bootstrap面板tab
参考自: https://blog.csdn.net/jrn1012/article/details/76043177
github地址: https://github.com/bill1012/bootstrap-tab
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!--bootstrap-tab样式--> <link rel="stylesheet" href="../css/bootstrap-tab.css"> <script src="jquery/jquery-1.8.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="../js/bootstrap-tab.js"></script> <div id="tabContainer"></div> <script> <!-- 主要是bootstrap-tab.css和bootstrap-tab.js 这个有bug,我这三个面板的页面经过后台跳转的,渲染会出异常 第一个面板会出现第二个面板的内容,第二个面板会出现第三个面板的内容.. --> var busiPresiteDevchkId = '${busiPresiteDevchkId}'; var vehicleid = '${vehicleid}'; var machinecode = '${machinecode}'; console.log(machinecode); $("#tabContainer").tabs({ data: [{ id: 'edit', text: '编辑修改', url: "${ctxPath}/busiPresiteDevchk/busiPresiteDevchk_update/" + busiPresiteDevchkId }, { id: 'carType', text: '车型', url: "${ctxPath}/basVehicle/basVehicle_info/" +vehicleid }, { id: 'machines', text: '设备', url: "${ctxPath}/basStationMachine/basStationMachine_info/" + machinecode }], //showIndex: 1,//默认显示的位置0 loadAll: false }) //$("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: '${ctxPath}/blackboard'}) </script>
(function ($, window, document, undefined) { 'use strict'; var pluginName = 'tabs'; //入口方法 $.fn[pluginName] = function (options) { var self = $(this); if (this == null) return null; var data = this.data(pluginName); if (!data) { data = new BaseTab(this, options); self.data(pluginName, data); } return data; }; var BaseTab = function (element, options) { this.$element = $(element); this.options = $.extend(true, {}, this.default, options); this.init(); } //默认配置 BaseTab.prototype.default = { showIndex: 0, //默认显示页索引 loadAll: false,//true=一次全部加在页面,false=只加在showIndex指定的页面，其他点击时加载，提高响应速度 } //结构模板 BaseTab.prototype.template = { ul_nav: '<ul id="myTab" class="nav nav-tabs"></ul>', ul_li: '<li><a href="#{0}" data-toggle="tab"><span>{1}</span></a></li>', ul_li_close: '<i class="fa fa-remove closeable" title="关闭"></i>', div_content: '<div class="tab-content"></div>', div_content_panel: '<div class="tab-pane fade" id="{0}"></div>' } //初始化 BaseTab.prototype.init = function () { if (!this.options.data || this.options.data.length == 0) { console.error("请指定tab页数据"); return; } //当前显示的显示的页面是否超出索引 if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) { console.error("showIndex超出了范围"); //指定为默认值 this.options.showIndex = this.default.showIndex; } //清除原来的tab页 this.$element.html(""); this.builder(this.options.data); } //使用模板搭建页面结构 BaseTab.prototype.builder = function (data) { var ul_nav = $(this.template.ul_nav); var div_content = $(this.template.div_content); for (var i = 0; i < data.length; i++) { //nav-tab var ul_li = $(this.template.ul_li.format(data[i].id, data[i].text)); //如果可关闭,插入关闭图标，并绑定关闭事件 if (data[i].closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(" "); } ul_nav.append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(data[i].id)); div_content.append(div_content_panel); } this.$element.append(ul_nav); this.$element.append(div_content); this.loadData(); this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show"); } BaseTab.prototype.loadData = function () { var self = this; //tab点击即加载事件 //设置一个值，记录每个tab页是否加载过 this.stateObj = {}; var data = this.options.data; //如果是当前页或者配置了一次性全部加载，否则点击tab页时加载 for (var i = 0; i < data.length; i++) { if (this.options.loadAll || this.options.showIndex == i) { if (data[i].url) { $("#" + data[i].id).load(data[i].url,data[i].param); this.stateObj[data[i].id] = true; } else { console.error("id=" + data[i].id + "的tab页未指定url"); this.stateObj[data[i].id] = false; } } else { this.stateObj[data[i].id] = false; (function (id, url,paramter) { self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab', function () { if (!self.stateObj[id]) { $("#" + id).load(url,paramter); self.stateObj[id] = true; } }); }(data[i].id, data[i].url, data[i].paramter)) } } //关闭tab事件 this.$element.find(".nav-tabs li a i.closeable").each(function (index, item) { $(item).click(function () { var href = $(this).parents("a").attr("href").substring(1); if(self.getCurrentTabId()==href){ self.$element.find(".nav-tabs li:eq(0) a").tab("show"); } $(this).parents("li").remove(); $("#" + href).remove(); }) }); } //新增一个tab页 BaseTab.prototype.addTab=function (obj) { var self=this; //nav-tab var ul_li = $(this.template.ul_li.format(obj.id, obj.text)); //如果可关闭,插入关闭图标，并绑定关闭事件 if (obj.closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(" "); } this.$element.find(".nav-tabs:eq(0)").append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(obj.id)); this.$element.find(".tab-content:eq(0)").append(div_content_panel); //$("#" + obj.id).load(obj.url,obj.paramter); //this.stateObj[obj.id] = true; this.stateObj[obj.id] = false; (function (id, url,paramter) { self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab', function () { if (!self.stateObj[id]) { $("#" + id).load(url,paramter); self.stateObj[id] = true; } //this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show"); }); }(obj.id, obj.url, obj.paramter)) if(obj.closeable){ this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () { var href = $(this).parents("a").attr("href").substring(1); if(self.getCurrentTabId()==href){ self.$element.find(".nav-tabs li:eq(0) a").tab("show"); } $(this).parents("li").remove(); $("#" + href).remove(); }) } } //根据id获取活动也标签名 BaseTab.prototype.find=function (tabId) { return this.$element.find(".nav-tabs li a[href='#" + tabId + "']").text(); } // 删除活动页 BaseTab.prototype.remove=function (tabId) { var self=this; $("#" + tabId).remove(); this.$element.find(".nav-tabs li a[href='#" + tabId + "']").parents("li").remove(); } // 重新加载页面 BaseTab.prototype.reload=function (obj) { var self=this; if(self.find(obj.id)!=null){ $("#" + obj.id).remove(); this.$element.find(".nav-tabs li a[href='#" + obj.id + "']").parents("li").remove(); self.addTab(obj); }else{ self.addTab(obj); } } //根据id设置活动tab页 BaseTab.prototype.showTab=function (tabId) { this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show"); } //获取当前活动tab页的ID BaseTab.prototype.getCurrentTabId=function () { var href=this.$element.find(".nav-tabs li.active a").attr("href"); href=href.substring(1); return href; } String.prototype.format = function () { if (arguments.length == 0) return this; for (var s = this, i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); return s; }; })(jQuery, window, document)
这个渲染有问题,只能设置成一次加载一个tab,一次加载多个渲染有问题,比如a页面的内容到了b页面,b页面的内容到了c页面,c页面的内容到了a页面.
有大佬看了把这个问题解决了,请在评论区指点在下一二.在下是个菜鸡,什么都不懂的!
