包简介

pagingSilder brings you Hardware-Accelerated Page Transitions for Web / Mobile Web Apps / PhoneGap Apps. Inspired by http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/ I have written an extension. This extension allows the page slider to contro

README 文档

README

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

What is it?

pagingSilder brings you Hardware-Accelerated Page Transitions for Web / Mobile Web Apps / PhoneGap Apps. Inspired by http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/ I have written an extension. This extension allows the page slider to control several pages, retrieve individual pages and slide from one side to another.

Why singleton pattern?

Using singleton pattern as class object makes the integration easy in the common way. Also singleton pattern does not block a multiple use per page. You are able to create new instances of pagingSlider object like "var myPagingSlider = pagingSlider;".

Demo

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

Features

slide to pages with touch swipes by using Hardware-Accelerated Page Transitions
auto switch to pages by clicking menu item
call pages directly
animated mobile pagebrowser
integrated touch events with quoJS
loop functionality
disable/enable pointer foot menu
multi sliders on one page support

Install via bower

bower install linslin-pagingslider

Useage

Checkout and run app/index.html in Browser.
Modify the Template
Take a look at the demo directory for cordova-, web-examples & configurations

<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>

Configurations

Disable/Enable loop

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

Disable/Enable pointer footer menu

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

Tested with

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

Changelog

Release 1.0.7 - Changelog

Modified Demo URL.
Reordered readme.md contents.

Release 1.0.6 - Changelog

Added bower support
Added angularJS support

Release 1.0.5 - Changelog

Added live demo

Release 1.0.4 - Changelog

Hotfix: composer support.
README.md modifications.

Release 1.0.3 - Changelog

Hotfix: composer support.

Release 1.0.2 - Changelog

Added composer support.
Added platform support (Windows Phone 8.0 & 8.1, amazon-fireos, tizen)

Release 1.0.1 - Changelog

Added user css class support - #4

Release 1.0 - Changelog

Official stable release
Added cordova 3.6 & 4.0 support (iOS / Android / blackberry / firefoxos / browser)
Changed readme.md images paths.

Known Issues

Old Android Versions - Swipe does not work due quoJS/zepto.js. Fix -> "madrobby/zepto#315"

Thanks to Christophe Coenraets

linslin/paging-slider 适用场景与选型建议

linslin/paging-slider 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 18 次下载、GitHub Stars 达 24，最近一次更新时间为 2014 年 11 月 14 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「phonegap」「page transition」「pagingSlider」「cordova」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 linslin/paging-slider 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 linslin/paging-slider 我们能提供哪些服务？

定制开发 / 二次开发

基于 linslin/paging-slider 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 linslin/paging-slider 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

nolimits4web/swiper 41.85k

Most modern mobile touch slider and framework with hardware accelerated transitions

gomachan46/state-machine 18

simple state machine with annotations for PHP, inspired by AASM known as a Ruby state machine.

drmonty/datatables 2

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

drmonty/datatables-plugins 2

Plug-ins for DataTables

siraaf/finite 0

A simple PHP7.2+ Finite State Machine

matthewpageuk/laravel-bitty-enums 9

This package helps you use bitwise enums in PHP and Laravel.

linslin/paging-slider

包简介

关键字：