``` $.extend({ // 放入以下代码 }); ``` ## 一、自定义下拉 ``` /* HTML结构 <div class="zh-uiselect js-vehicle-status"> <div class="zh-uis-title">空闲</div> <div class="zh-uis-body"> <ul> <li>活动</li> <li class="active">空闲</li> <li>未上线</li> </ul> </div> </div> */ uiSelect: function(opts, callback) { opts = opts || {}; var defaultOpts = { titleEventType: 'click', // 标题事件类型 itemEventType: 'click', // 下拉项事件类型 wrapActiveClass: 'active', // wrap激活class itemActiveClass: 'active', // item激活class isShrinkOther: false // 是否收起其他 }; opts = $.extend({}, defaultOpts, opts); // 下拉显示/隐藏 $('body').on(opts.titleEventType, opts.titleEle, function(e) { e.stopPropagation(); var $this = $(this), $parent = $this.parent(); if($parent.hasClass(opts.wrapActiveClass)) { $parent.removeClass(opts.wrapActiveClass); } else { if(opts.isShrinkOther) { $(opts.wrapEle).removeClass(opts.wrapActiveClass); } $parent.addClass(opts.wrapActiveClass); $parent.children(opts.bodyEle).css({ width: $this.outerWidth(), left: $this.offset().left, top: $this.offset().top+$this.height() }); if(opts.bodyEleZIndex) { $parent.children(opts.bodyEle).css({ zIndex: opts.bodyEleZIndex }); } } }); // 下拉项点击 $('body').on(opts.itemEventType, opts.itemEle, function(e) { e.stopPropagation(); var $this = $(this); $this.addClass(opts.itemActiveClass).siblings().removeClass(opts.itemActiveClass); $this.parents(opts.wrapEle).removeClass(opts.wrapActiveClass).children(opts.titleEle).text($this.text()); if(callback && typeof callback === 'function') { callback.call(this); } }); // 点击其他区域隐藏下拉 $('body').click(function() { $(opts.wrapEle).removeClass(opts.wrapActiveClass); }); } ``` 调用： ``` $.uiSelect({ wrapEle: '.js-vehicle-status', bodyEle: '.zh-uis-body', titleEle: '.zh-uis-title', itemEle: '.zh-uis-body li' }); ``` ## 二、ajax分页 下面是vue分页效果图，但实现的核心原理和jquery的ajax分页是一样的  ``` // ajax分页 page: function(options) { var defaults = { 'visiblePages': 6 // 可见页码(不能小于4) }; var opts = $.extend({}, defaults, options); var curPage = opts.curPage; // 创建分页列表 function createPageList(curPage) { var li = '<li class="zh-prev"><a href="###"><span class="zh-icon-prev"></span></a></li>'; if(opts.totalPages <= opts.visiblePages) { // 总页数<=可见页 for(var i=1; i<=opts.totalPages; i++) { if(curPage == i) { li += '<li class="zh-cur"><a href="###">'+i+'</a></li>'; } else { li += '<li><a href="###">'+i+'</a></li>'; } } } else { // 总页数>可见页 if(curPage < opts.visiblePages-1) { // 当前页<可见页-1 for(var i=1; i<=opts.visiblePages-1; i++) { if(curPage == i) { li += '<li class="zh-cur"><a href="###">'+i+'</a></li>'; } else { li += '<li><a href="###">'+i+'</a></li>'; } } li += '<li class="zh-ellipsis">...</li>'; li += '<li><a href="###">'+opts.totalPages+'</a></li>'; } else if(curPage >= opts.visiblePages-1) { // 当前页>=可见页-1 if(opts.totalPages-curPage <= opts.visiblePages-4) { // 能连到结束 li += '<li><a href="###">1</a></li>'; li += '<li class="zh-ellipsis">...</li>'; for(var i=opts.totalPages-(opts.visiblePages-2); i<=opts.totalPages; i++) { if(curPage == i) { li += '<li class="zh-cur"><a href="###">'+i+'</a></li>'; } else { li += '<li><a href="###">'+i+'</a></li>'; } } } else { // 不能连到结束 li += '<li><a href="###">1</a></li>'; li += '<li class="zh-ellipsis">...</li>'; for(var i=curPage-(opts.visiblePages-4); i<=curPage+1; i++) { if(curPage == i) { li += '<li class="zh-cur"><a href="###">'+i+'</a></li>'; } else { li += '<li><a href="###">'+i+'</a></li>'; } } li += '<li class="zh-ellipsis">...</li>'; li += '<li><a href="###">'+opts.totalPages+'</a></li>'; } } } li += '<li class="zh-next"><a href="###"><span class="zh-icon-next"></span></a></li>'; li += '<li class="zh-total">共'+opts.totalPages+'页</li>'; $(opts.ele).html(li); } createPageList(curPage); // 点击页码 $(opts.ele).off('click'); $(opts.ele).on('click', 'li:not(.zh-prev, .zh-next, .zh-total, .zh-ellipsis)', function() { curPage = +$(this).text(); $(this).addClass('zh-cur').siblings().removeClass('zh-cur'); createPageList(curPage); if(opts.change && typeof opts.change === 'function') { opts.change.call(null, curPage); } }); // 点击前一页 $(opts.ele).on('click', '.zh-prev', function() { curPage = +$(opts.ele).children('.zh-cur').text(); curPage--; if(curPage < 1) return; createPageList(curPage); if(opts.change && typeof opts.change === 'function') { opts.change.call(null, curPage); } }); // 点击后一页 $(opts.ele).on('click', '.zh-next', function() { curPage = +$(opts.ele).children('.zh-cur').text(); curPage++; if(curPage > opts.totalPages) return; createPageList(curPage); if(opts.change && typeof opts.change === 'function') { opts.change.call(null, curPage); } }); } ``` 调用： ``` $.page({ ele: '.zh-pagination ul', curPage: opts.curPage, // 当前页 totalPages: opts.pages, // 总页数 change: function(num) { renderListFn({curPage: num}); } }); ```