自由拖曳插件
draggabilly、Tdrag(很多自由拖曳或者拖曳排序插件都是基于jQuery-ui的draggable功能进行开发的,功能大同小异,draggabilly移动端和PC端都兼容,Tdrag不支持移动端)
- 滚动加载插件(上拉加载、下拉刷新)- 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", {
down: {
callback: downCallback
},
up: {
callback: upCallback
}
});
function downCallback() {
$.ajax({
url: 'xxxxxx',
success: function(data) {
mescroll.endSuccess();
},
error: function(data) {
mescroll.endErr();
}
});
}
function upCallback(page) {
$.ajax({
url: 'xxxxxx?num=' + page.num + "&size=" + page.size,
success: function(data) {
mescroll.endSuccess(data.length);
},
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
- 自由拖曳插件-draggabilly.pkgd.min.js(https://github.com/desandro/draggabilly)
var $draggable = $('.draggable').draggabilly({
// options...
})
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'],
});
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不支持移动端)
- 滚动加载插件(上拉加载、下拉刷新)- 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", {
down: {
callback: downCallback
},
up: {
callback: upCallback
}
});
function downCallback() {
$.ajax({
url: 'xxxxxx',
success: function(data) {
mescroll.endSuccess();
},
error: function(data) {
mescroll.endErr();
}
});
}
function upCallback(page) {
$.ajax({
url: 'xxxxxx?num=' + page.num + "&size=" + page.size,
success: function(data) {
mescroll.endSuccess(data.length);
},
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
- 自由拖曳插件-draggabilly.pkgd.min.js(https://github.com/desandro/draggabilly)
var $draggable = $('.draggable').draggabilly({
// options...
})
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'],
});
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