README

=======================

这是什么？

pagingSlider 为您带来 Web / 移动 Web 应用 / PhoneGap 应用程序的硬件加速页面切换。受 http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/ 启发，我编写了一个扩展。这个扩展允许页面滑块控制多个页面，检索单个页面并在两侧滑动。

为什么要使用单例模式？

使用单例模式作为类对象可以以常见的方式轻松集成。此外，单例模式不会阻止页面上的多次使用。您可以使用 "var myPagingSlider = pagingSlider;" 这样的方式创建 pagingSlider 对象的新实例。

演示

http://www.linslin.org/2015/01/13/css-hardware-accelerated-page-transitions/

特性

使用硬件加速页面切换通过触摸滑动切换页面
点击菜单项自动切换到页面
直接调用页面
动画移动页面浏览器
与 quoJS 集成触摸事件
循环功能
禁用/启用指针页脚菜单
支持单页多个滑块

通过 bower 安装

bower install linslin-pagingslider

使用方法

在浏览器中检出并运行 app/index.html。
修改模板
查看演示目录中的 cordova-、web 示例和配置

<html>
<head>
    <title>pagingSlider</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<h3>pagingSlider example</h3>
<div id="wrapper">
    <div class="slidepage-container myPageContainerClass">
        <div id="badges-slidepage-1" page="1" class="psPage center current">
            <div class="content">
               <h2>Page 1</h2>
            </div>
        </div>
        <div id="badges-slidepage-2" page="2" class="psPage right">
            <div class="content">
               <h2>Page 2</h2>
            </div>
        </div>
        <div id="badges-slidepage-3" page="3" class="psPage right">
            <div class="content">
               <h2>Page 3</h2>
            </div>
        </div>
        <div id="badges-slidepage-4" page="4" class="psPage right">
            <div class="content">
               <h2>Page 4</h2>
            </div>
        </div>
    </div>
    <div class="footer-menu myPageContainerClass">
        <ul class="pager clearfix">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> 
    <h4>Page menu:</h4>
    <div class="header-menu clearfix">
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 1);">1</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 2);">2</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 3);">3</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 4);">4</a>
        or 
        <a href="javascript:void(0);" onclick="pagingSlider.setPage('.myPageContainerClass', 3);">directly call Page 3</a>
    </div>                
</div>

<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/quoJs/package/quo.js"></script>
<script type="text/javascript" src="lib/fastclick.js"></script>
<script type="text/javascript" src="pagingSlider.js"></script>
<script type="text/javascript">
    $$('#wrapper').swipeLeft(function(){
        pagingSlider.slidePageFrom('.myPageContainerClass', 'right');
    });
    
    $$('#wrapper').swipeRight(function(){
        pagingSlider.slidePageFrom('.myPageContainerClass', 'left');
    });
</script>

</body>
</html>

配置

禁用/启用循环

<script type="text/javascript">
        pagingSlider.loop = false; //default is true
</script>

禁用/启用指针页脚菜单

<script type="text/javascript">
        pagingSlider.disablePagePointer = true; //default is false
</script>

测试与

cordova 3.3, 3.4, 3.5, 3.6, 4.0
angularJS
Android 4.1<
iOS 6.0<
Firefox OS 1.3

变更日志

发布 1.0.7 - 变更日志

修改了演示 URL。
重新排列了 readme.md 的内容。

发布 1.0.6 - 变更日志

添加了 bower 支持
添加了 angularJS 支持

发布 1.0.5 - 变更日志

添加了实时演示

发布 1.0.4 - 变更日志

热修复：composer 支持。
README.md 修改。

发布 1.0.3 - 变更日志

热修复：composer 支持。

发布 1.0.2 - 变更日志

添加了 composer 支持。
添加了平台支持（Windows Phone 8.0 & 8.1、amazon-fireos、tizen）

发布 1.0.1 - 变更日志

添加了用户 CSS 类支持 - #4

发布 1.0 - 变更日志

官方稳定版
添加了 cordova 3.6 & 4.0 支持（iOS / Android / blackberry / firefoxos / 浏览器）
修改了 readme.md 图片路径。

已知问题

旧版 Android - 由于 quoJS/zepto.js，滑动不工作。修复 -> "madrobby/zepto#315"

linslin / paging-slider

维护者

详细信息