自由拖曳插件
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", { //第一个参数"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>
- 自由拖曳插件-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>
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/)
持续更新中…