jquery.min.js资源下载

jquery-1.10.2版本

province.json资源下载

省市区json文档——可作为测试接口

handlebars.js资源下载

前端模板引擎——handlebars.js

template-web.js资源下载

template-web.js前端模板引擎

viewer.min.css资源下载

图片预览插件： 参数配置可参考作者文章； 调用方法： // 图片预览 var viewer = new Viewer(document.getElementById('viewer'), { // url: 'data-original', button: true, inline: false, zoomable: true, fullscreen: false, transition: true, minZoomRatio: 0.1, maxZoomRatio: 10, // backdrop: true, movable: true, interval: 2000, navbar: true, loading: true, show: function() { viewer.update(); } });

viewer.min.js

图片预览插件： 参数配置可参考作者文章； 调用方法： // 图片预览 var viewer = new Viewer(document.getElementById('viewer'), { // url: 'data-original', button: true, inline: false, zoomable: true, fullscreen: false, transition: true, minZoomRatio: 0.1, maxZoomRatio: 10, // backdrop: true, movable: true, interval: 2000, navbar: true, loading: true, show: function() { viewer.update(); } });

jquery.pagination.js

jquery-pagination分页插件 1、引入pagination.css和jquery.pagination.js文件； 2、配置可参考jquery.pagination.js文件50行的配置默认参数，含参数注释； var defaults = { totalData: 0, //数据总条数 showData: 0, //每页显示的条数 pageCount: 9, //总页数,默认为9 current: 1, //当前第几页 prevCls: 'prev', //上一页class nextCls: 'next', //下一页class prevContent: '<', //上一页内容 nextContent: '>', //下一页内容 activeCls: 'active', //当前页选中状态 coping: false, //首页和尾页 isHide: false, //当前页数为0页或者1页时不显示分页 homePage: '', //首页节点内容 endPage: '', //尾页节点内容 keepShowPN: false, //是否一直显示上一页下一页 mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量 count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数 jump: false, //跳转到指定页数 jumpIptCls: 'jump-ipt', //文本框内容 jumpBtnCls: 'jump-btn', //跳转按钮 jumpBtn: '跳转', //跳转按钮文本 callback: function () {} //回调 }; 3、使用： <link rel="stylesheet" href="./css/pagination.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./js/jquery.pagination.js"></script> <ul id="filterTab"></ul> <script> function example(page, current = 1) { $('#filterTab').pagination({ totalData: page, //总页数 showData: showNum, //每页显示条数 coping: true, //首页和尾页 jump: true, //跳转至指定页数 current: current, //当前显示第几页 callback: function(api) { searchUsers(false, api.getCurrent()) //获取当前页 } }); }; </script>

pagination.css

jquery-pagination分页插件 1、引入pagination.css和jquery.pagination.js文件； 2、配置可参考jquery.pagination.js文件50行的配置默认参数，含参数注释； var defaults = { totalData: 0, //数据总条数 showData: 0, //每页显示的条数 pageCount: 9, //总页数,默认为9 current: 1, //当前第几页 prevCls: 'prev', //上一页class nextCls: 'next', //下一页class prevContent: '<', //上一页内容 nextContent: '>', //下一页内容 activeCls: 'active', //当前页选中状态 coping: false, //首页和尾页 isHide: false, //当前页数为0页或者1页时不显示分页 homePage: '', //首页节点内容 endPage: '', //尾页节点内容 keepShowPN: false, //是否一直显示上一页下一页 mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量 count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数 jump: false, //跳转到指定页数 jumpIptCls: 'jump-ipt', //文本框内容 jumpBtnCls: 'jump-btn', //跳转按钮 jumpBtn: '跳转', //跳转按钮文本 callback: function () {} //回调 }; 3、使用： <link rel="stylesheet" href="./css/pagination.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./js/jquery.pagination.js"></script> <ul id="filterTab"></ul> <script> function example(page, current = 1) { $('#filterTab').pagination({ totalData: page, //总页数 showData: showNum, //每页显示条数 coping: true, //首页和尾页 jump: true, //跳转至指定页数 current: current, //当前显示第几页 callback: function(api) { searchUsers(false, api.getCurrent()) //获取当前页 } }); }; </script>