移动端常用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:每页数据条数,默认10
function 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:每页数据条数,默认10
function 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.youkuaiyun.com/u010568344/article/details/77583018