一个漂亮的小jQuery或Zepto插件，用于最简单的滑动视图。
Posted
tags:
中文标题：一个漂亮的小jQuery或Zepto插件，用于最简单的滑动视图。 原文标题：A nifty little jQuery or Zepto plugin for the simplest of sliding views. 项目评级：Star:261 Fork:33 下载地址：https://github.com/cloudfour/SimpleSlideView 详情介绍简单幻灯片视图
一个漂亮的小jQuery或Zepto插件，用于最简单的滑动视图。
如果你喜欢Bower，你可以在你的项目目录中运行bower install SimpleSlideView来安装这个插件。
历史
1.1.2
1.1.1
1.1.0
1.0.0
祝meee生日快乐。。。♫
依赖项
SimpleSlideView需要jQuery或Zepto（默认构建应该很好）。
如果使用Zepto 1.1.3或更高版本，则必须在构建中包含fx模块。有关更多信息，请参阅Zepto的自述文件。
可选：滚动
该插件设计用于非固定布局，这意味着在更改视图之前滚动到窗口或容器的顶部会很有帮助。如果有$.scrollTo的插件可用，SimpleSlideView将在默认情况下尝试使用它。它已经用jquery.scrollTo和ZeptoScroll进行了测试。
如果您想更改此行为，可以使用scrollCallback选项指定自己的回调。
开始
SimpleSlideView需要在标记中显示两种类型的元素：
一个非常简单的例子：
然后在包含元素上调用simpleSlideView：
如果您想为视图使用不同于.view的选择器，您可以指定一个参数：
更多选项可用，可以作为对象传递。
在视图之间导航
一旦插件处于活动状态，只有活动视图才可见，因此我们可能希望通过某种方式导航到其他视图。有两种类型的导航可能发生。。。“推”（目标视图从右起设置动画）或“拉”（目标查看从左起设置动画。
使用HTML
如果要在标记中指定视图导航，则可以使用data-popview和data-pushview属性。
如果有一个href的链接已经解析为视图，只需添加一个或另一个属性：
也可以指定属性值。如果您想使用一个更复杂的选择器，该选择器在href时无效，或者您想在SimpleSlideView处于活动状态时链接到不同的目的地，或者您想要使用一个根本不是链接的元素，这将非常有用：
使用JavaScript
simpleSlideView方法返回一个对象，其中包含可以使用JavaScript导航的方法。
有关更多信息，请参阅方法。
反应迅速
当视口可以显示更多内容时，滑动视图并不总是合适的。幸运的是，只要使用toggle、on和off方法对您的项目有意义，您就可以关闭和打开SimpleSlideView。
默认情况下，SimpleSlideView将在初始化时自行激活，但您可以通过将deferOn选项设置为true来禁用此功能。例如：
有关更深入的示例，请参阅响应演示。
选项
您可以将一个对象作为第一个或第二个参数传递给simpleSlideView方法：
以下是所有选项及其默认值：
方法
如果您打算使用以下方法，请将插件的输出保存到变量中：
打开、关闭和切换
这些方法激活或停用插件。除非您已将deferOn设置为true，或者您已呼叫off()或toggle()，否则您不必发射on()。
如果没有参数，toggle()将在插件关闭时调用on()，在插件打开时调用off()。您还可以为on传递布尔值（true）。
pushView和popView
将推动或弹出到targetView。这将被传递到$，因此它可以是jQuery或Zepto接受的任何类型的选择器。
这些是…的快捷方法。。。
更改视图
这与pushView或popView的工作原理相同，接受它需要'push'或'pop'中的action的值。
事件
这些都是在包含元素上触发的。所有事件名称都可以使用eventNames选项进行自定义。
viewChangeStart和viewChangeEnd
在任何视图更改（推送或弹出）的开始和结束时触发。除了通常的event对象外，回调还可以接收changeView函数所做的targetView和action参数：
slideViewOn和slideViewOff
这些事件是在插件被激活或停用时触发的。如果你想在某些布局中使用插件，但不想在其他布局中使用，这可能很有用。您可以在响应演示中看到一个这样的例子。
slideViewBeforeOn和slideViewBeforeOff
类似于“on”和“off”事件，除了它们是在插件开始激活或停用之前触发的。有关示例，请参阅响应演示。
幻灯片视图延迟
如果插件已初始化，但deferOn为真，则触发。有关示例，请参阅响应演示。
已知问题和限制
哈希和维护历史记录
那里
是专门用于使用JavaScript维护历史的整个库。坦率地说，这项任务对这个图书馆来说似乎太大了。如果您有整合历史的想法，请考虑为项目做出贡献。
多视图转换
如果您将视图深入到其历史记录中，则某些界面将连续动画化多个视图。这不是SimpleSlideView的一部分，因为我们不维护历史记录，也不要求视图存在于我们可以从中推断历史的任何特定层次结构中。
动态内容
这个插件在设计时考虑到了静态网页。它目前维护jQuery/Zepto对象，用于实例化时可用的视图。正因为如此，它并不特别适合动态加载大量内容的接口。这方面存在一个问题；欢迎提供额外的反馈、想法和拉货请求。
动画表演
我们注意到，有些页面使用CSS动画效果更好，有些页面则使用JavaScript效果更好。从广义上讲，包含大量复杂或动画内容的页面在使用JS时往往表现得更好，而大多数其他页面在使用CSS时似乎表现得更好。我们希望，通过依靠$.animate的方法，并提供useTransformProps和use3D的选项，我们已经让您能够尝试最适合您的项目的方法。
从1.1.x开始，您现在可以通过设置concurrentScroll和/或concurrentHeightChange到false来禁用一些并发动画。这可能会提高某些项目的性能。
嵌套实例
如果您尝试将一个滑动视图嵌套到另一个滑动图中，则可能会遇到冲突。您可以通过为冲突的属性指定不同的名称来修复某些冲突。例如：
从源构建
SimpleSlideView是用CoffeeScript编写的。我们包含了一个Grunt配置文件，使其易于贡献。安装node.js后，cd进入项目目录，按照以下步骤操作：
当您保存simpleslideview.coffee时，Grunt任务将自动编译和缩小。您可以通过点击Ctrl+C来停止此操作。
许可证
根据麻省理工学院许可证发布。
此存储库包含其他库，这些库可能属于或不属于同一许可证范围：
web app中常用插件（zepto--用法类似于jquery利用nodejs定制zepto）
移动端 jQuery日期插件---zepto.mdater (底部弹出层)