``` $.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}); } }); ```