移动端常用JS插件(持续更新中)
来源:互联网 发布:sql查询字段包含汉字 编辑:程序博客网 时间:2024/05/16 17:40
自由拖曳插件
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:每页数据条数,默认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>
- 自由拖曳插件-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/)
持续更新中…
阅读全文
2 0
- 移动端常用JS插件(持续更新中)
- 移动端常用JS插件(持续更新中)
- 常用插件,持续更新中~~
- Maven常用插件配置(持续更新中)
- 常用js函数收集(持续更新中----)
- 常用Xcode插件推荐(持续更新)
- Eclipse常用插件(持续更新中)更新地址
- AS常用插件-持续更新
- Android Studio开过中常用的插件,大大提高开发效率!(持续更新中)
- robotframework中常用的js脚本,持续更新中
- 原生js常用方法集锦--持续更新中。。。
- js大全(持续更新中)
- 总结js常用函数和常用技巧(持续更新)
- 总结js常用函数和常用技巧(持续更新)
- 总结js常用函数和常用技巧(持续更新)
- js前端页面常用字段验证(持续更新)
- vs2012扩展插件大合集(亲自试验,持续更新中...)
- angular好用的插件集合(持续更新中)
- 计算机英语
- 软考基础知识
- evercookie 使用方法示例
- mui 上拉刷新下拉加载
- 优秀架构师需掌握的架构设计技巧
- 移动端常用JS插件(持续更新中)
- sklearn.model_selection.train_test_split随机划分训练集和测试集
- 基于mininet+opendaylight搭建SDN测试环境
- Java验证身份证号码是否合法
- 【python 爬虫】python如何以request payload形式发送post请求
- word文档中如何删除空白页
- Springboot引用外部配置文件
- 常用生命周期函数总结
- 教你怎么快速创建字体图标