移动端常用JS插件（持续更新中）

自由拖曳插件 
draggabilly、Tdrag(很多自由拖曳或者拖曳排序插件都是基于jQuery-ui的draggable功能进行开发的，功能大同小异，draggabilly移动端和PC端都兼容，Tdrag不支持移动端)

1. 滚动加载插件（上拉加载、下拉刷新）- mescroll.js(https://github.com/mescroll/mescroll)

<link rel="stylesheet" href="mescroll.css"><div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删    //列表内容,如:<ul>列表数据</ul> ...</div><script src="mescroll.js"></script><script>    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback    down: {        callback: downCallback //下拉刷新的回调    },    up: {        callback: upCallback //上拉加载的回调    }});//下拉刷新的回调function downCallback() {    $.ajax({        url: 'xxxxxx',        success: function(data) {            //联网成功的回调,隐藏下拉刷新的状态;            mescroll.endSuccess(); //无参            //设置数据            //setXxxx(data);//自行实现 TODO        },        error: function(data) {            //联网失败的回调,隐藏下拉刷新的状态            mescroll.endErr();        }    });}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {    $.ajax({        url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?        success: function(data) {            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;            //参数data.length:当前页的数据总数            //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;            //列表如果无下一页数据,则提示无更多数据;            //如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态            mescroll.endSuccess(data.length);            //设置列表数据            //setListData(data);//自行实现 TODO        },        error: function(e) {            //联网失败的回调,隐藏下拉刷新和上拉加载的状态            mescroll.endErr();        }    });}</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

1. 自由拖曳插件-draggabilly.pkgd.min.js（https://github.com/desandro/draggabilly）

var $draggable = $('.draggable').draggabilly({  // options...})
1
2
3

3.Mobiscroll is a collection of UI controls for making amazing apps and websites(功能强大的UI控件，比如calendar、color、data&time、forms、images、number、range等)-Mobiscroll.js(http://www.jq22.com/jquery-info10900)

html:<input type="text" id="demo">$('#demo').mobiscroll().calendar({       theme: 'mobiscroll',       lang: 'zh',       display: 'bottom',       select: 'multiple',       controls: ['calendar'],});
1
2
3
4
5
6
7
8

4.移动端触摸滑动插件（触屏焦点图、触屏Tab切换、触屏多图切换）- swiper.min.js(http://www.swiper.com.cn/)

<div class="swiper-container">    <div class="swiper-wrapper">        <div class="swiper-slide">Slide 1</div>        <div class="swiper-slide">Slide 2</div>        <div class="swiper-slide">Slide 3</div>    </div>    <!-- 如果需要分页器 -->    <div class="swiper-pagination"></div>    <!-- 如果需要导航按钮 -->    <div class="swiper-button-prev"></div>    <div class="swiper-button-next"></div>    <!-- 如果需要滚动条 -->    <div class="swiper-scrollbar"></div></div>//导航等组件可以放在container之外<script>          var mySwiper = new Swiper ('.swiper-container', {    direction: 'vertical',    loop: true,    // 如果需要分页器    pagination: '.swiper-pagination',    // 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev',    // 如果需要滚动条    scrollbar: '.swiper-scrollbar',  })          </script></body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

5.JavaScript image gallery for mobile and desktop.（图片画廊）- photoswipe.min.js（https://github.com/dimsemenov/photoswipe）

6.复制插件（一键复制）- clipboard.js（https://github.com/zenorocha/clipboard.js/）

持续更新中…

转自：

自由拖曳插件 
draggabilly、Tdrag(很多自由拖曳或者拖曳排序插件都是基于jQuery-ui的draggable功能进行开发的，功能大同小异，draggabilly移动端和PC端都兼容，Tdrag不支持移动端)

1. 滚动加载插件（上拉加载、下拉刷新）- mescroll.js(https://github.com/mescroll/mescroll)

<link rel="stylesheet" href="mescroll.css"><div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删    //列表内容,如:<ul>列表数据</ul> ...</div><script src="mescroll.js"></script><script>    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback    down: {        callback: downCallback //下拉刷新的回调    },    up: {        callback: upCallback //上拉加载的回调    }});//下拉刷新的回调function downCallback() {    $.ajax({        url: 'xxxxxx',        success: function(data) {            //联网成功的回调,隐藏下拉刷新的状态;            mescroll.endSuccess(); //无参            //设置数据            //setXxxx(data);//自行实现 TODO        },        error: function(data) {            //联网失败的回调,隐藏下拉刷新的状态            mescroll.endErr();        }    });}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {    $.ajax({        url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?        success: function(data) {            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;            //参数data.length:当前页的数据总数            //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;            //列表如果无下一页数据,则提示无更多数据;            //如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态            mescroll.endSuccess(data.length);            //设置列表数据            //setListData(data);//自行实现 TODO        },        error: function(e) {            //联网失败的回调,隐藏下拉刷新和上拉加载的状态            mescroll.endErr();        }    });}</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

1. 自由拖曳插件-draggabilly.pkgd.min.js（https://github.com/desandro/draggabilly）

var $draggable = $('.draggable').draggabilly({  // options...})
1
2
3

3.Mobiscroll is a collection of UI controls for making amazing apps and websites(功能强大的UI控件，比如calendar、color、data&time、forms、images、number、range等)-Mobiscroll.js(http://www.jq22.com/jquery-info10900)

html:<input type="text" id="demo">$('#demo').mobiscroll().calendar({       theme: 'mobiscroll',       lang: 'zh',       display: 'bottom',       select: 'multiple',       controls: ['calendar'],});
1
2
3
4
5
6
7
8

4.移动端触摸滑动插件（触屏焦点图、触屏Tab切换、触屏多图切换）- swiper.min.js(http://www.swiper.com.cn/)

<div class="swiper-container">    <div class="swiper-wrapper">        <div class="swiper-slide">Slide 1</div>        <div class="swiper-slide">Slide 2</div>        <div class="swiper-slide">Slide 3</div>    </div>    <!-- 如果需要分页器 -->    <div class="swiper-pagination"></div>    <!-- 如果需要导航按钮 -->    <div class="swiper-button-prev"></div>    <div class="swiper-button-next"></div>    <!-- 如果需要滚动条 -->    <div class="swiper-scrollbar"></div></div>//导航等组件可以放在container之外<script>          var mySwiper = new Swiper ('.swiper-container', {    direction: 'vertical',    loop: true,    // 如果需要分页器    pagination: '.swiper-pagination',    // 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev',    // 如果需要滚动条    scrollbar: '.swiper-scrollbar',  })          </script></body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

5.JavaScript image gallery for mobile and desktop.（图片画廊）- photoswipe.min.js（https://github.com/dimsemenov/photoswipe）

6.复制插件（一键复制）- clipboard.js（https://github.com/zenorocha/clipboard.js/）

持续更新中…

转自：http://blog.csdn.net/u010568344/article/details/77583018