在 `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) { }); ```