在 `H-ui.tab` 基礎上封裝，給添加上點擊和加載回調 ##方法 `$.tpTab` ``` /** * 高級版 Tab 切換 * @param tabBar Tab 標簽 * @param tabCon Tab 容器 * @param class_name 被選中標簽class * @param tabEvent 觸發 Tab 切換的事件 * @param i 被激活索引 * @param callback 切換回調函數 callback(index,$tabCon,$tabBar) * @param finished 初始化完成之后的回調函數 finished(index,$tabCon,$tabBar) */ jQuery.tpTab =function(tabBar,tabCon,class_name,tabEvent,i,callback,finished){ var $tabBar=$(tabBar),$tabCon=$(tabCon); function chg(index) { $tabBar.removeClass(class_name).eq(index).addClass(class_name); $tabCon.hide().eq(index).show(); } // 初始化操作 chg(i||0); typeof finished === "function" && finished(i,$tabCon,$tabBar); $tabBar.bind(tabEvent,function(){ var index=$tabBar.index(this); chg(index); typeof callback === "function" && callback(index,$tabCon,$tabBar); }); }; ``` ##使用示例 ###HTML 部分 ``` <div id="tab_upload" class="HuiTab"> <div class="tabBar cl"> <span>本地上傳</span> <span>網絡圖片</span> <span>歷史圖片</span> </div> <div class="tabCon"> <div> <div id="drag" class="mt-30"> <label for="file-input"> <i class="Hui-iconfont Hui-iconfont-add3" style="font-size: 100px" id="upload-btn"></i> </label> </div> <input type="file" accept="*/*" name="file[]" id="file-input" multiple class="input-file" style="display: none"> </div> </div> <div class="tabCon"> <div class="form form-horizontal mt-30"> <div class="formControls" id="net-image"> <input type="text" class="input-text radius" id="remote-input" style="width: 60%"> <button class="btn btn-secondary radius ml-10" type="button" id="crawl-btn">抓取</button> <button class="btn btn-primary radius ml-10" type="button" id="remote-btn">確定</button> </div> </div> </div> <div class="tabCon"> <div class="photo-list mt-30"></div> <div class="photo-page" id="photo-page"></div> </div> </div> ``` ###JavaScript 部分 ``` // Tab 切換 $.tpTab("#tab_upload .tabBar span", "#tab_upload .tabCon", "current", "click", "0", function (index, tabCon, tabBar) { if (index == 2 && tabCon.eq(index).find('.photo-list').html() == '') { getListImage({p:p,'count':'1'}); } }, function (i) { }); ```