bootstrap添加iframe頁
阿新 • • 發佈:2018-09-23
添加 oar href append span home loaddata 清除 數據
改寫自: https://www.cnblogs.com/yxgmagic/p/9637075.html
效果圖:
<div class="ibox float-e-margins"> <div id="tabContainer"></div> </div> <script src="xxx.js"></script><!-- 引入下面js即可,自己命名 --> <script> var iframe = $("#tabContainer").iframes({ data: [ { id:View Code‘home‘, text: ‘用戶‘, url: "/mgr/user_edit/47", closeable: true }, { id: ‘admineap2‘, text: ‘日誌列表‘, url: "/menu/menu_edit/158" ,closeable: true } /* , { id: ‘admineap‘, text: ‘部門‘, url: "/dept/dept_update/27" }, { id: ‘menu‘, text: ‘菜單‘, url: "/menu/menu_edit/107" },{ id: ‘edit‘, text: ‘百度一下‘, url: "/blackboard/show", //closeable: true }*/], //showIndex: 1, loadAll: false }) iframe.addIframe({ id: ‘admineap‘, text: ‘部門‘, url: "/dept/dept_update/27" ,closeable: true }); iframe.addIframe({ id: ‘menu‘, text: ‘菜單‘, url: "/menu/menu_edit/107" ,closeable:true }); //iframe.showIframe(‘admineap‘);//根據數據屬性id設置 </script>
//xxx.js (function ($, window, document, undefined) { ‘use strict‘; var pluginName = ‘iframes‘; var thisElement = ‘‘; var height = ‘500px‘;//以這種形式出現的iframe,必須設置高度,不能設置100% //入口方法 $.fn[pluginName] = function (options) { var self = $(this); thisElement = self; if (this == null) return null; var data = this.data(pluginName); if (!data) { data = new BaseIframe(this, options); self.data(pluginName, data); } return data; }; var BaseIframe = function (element, options) { this.$element = $(element); this.options = $.extend(true, {}, this.default, options); this.init(); } //默認配置 BaseIframe.prototype.default = { showIndex: 0, //默認顯示頁索引 loadAll: false//true=一次全部加在頁面,false=只加在showIndex指定的頁面,其他點擊時加載,提高響應速度 } //結構模板 BaseIframe.prototype.template = { div_tabs: ‘<div class="row content-tabs"></div>‘, nav_menuTabs: ‘<nav class="page-tabs J_menuTabs"></nav>‘, nav_a: ‘<a href="javascript:;" class="J_menuTab" data-id="{0}" data-index="{1}" name="{2}">{3}</a>‘,//這裏不能用id,id會追加代碼到a標簽內 div_content: ‘<div class="page-tabs-content" id="page-tabs"></div>‘, div_iframe: ‘<div class="row J_mainContent" id="content-tabs"></div>‘, iframe: ‘<iframe class="J_iframe" name="{0}" data-index="{1}" width="100%" height="{2}" src="{3}" frameborder="0" data-id="{4}" seamless style="display: none;"></iframe>‘, a_close: ‘<i class="fa fa-remove" title="關閉" data-id="{0}"></i>‘ } //初始化 BaseIframe.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; } if(this.options.height){ height = this.options.height; } //清除原來的tab頁 this.$element.html(""); this.builder(this.options.data); } //使用模板搭建頁面結構 BaseIframe.prototype.builder = function (data) { var div_tabs = $(this.template.div_tabs); var nav_menuTabs = $(this.template.nav_menuTabs); var div_content = $(this.template.div_content); var div_iframe = $(this.template.div_iframe); for (var i = 0; i < data.length; i++) { //nav-tab var nav_a = $(this.template.nav_a.format(data[i].url,i,data[i].id ,data[i].text)); //如果可關閉,插入關閉圖標,並綁定關閉事件 if (data[i].closeable) { var a_close = $(this.template.a_close.format(data[i].id)); nav_a.append(" "); nav_a.append(a_close); } div_content.append(nav_a); } nav_menuTabs.append(div_content); div_tabs.append(nav_menuTabs); this.$element.append(div_tabs); this.$element.append(div_iframe); this.loadData(); } /** * 添加Iframe * */ BaseIframe.prototype.openIframe = function(dataUrl,menuName,dataIndex){ //console.log("openiframe",this); // 獲取標識數據 var flag = true; if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false; thisElement.find("#content-tabs iframe").each(function(){ //console.log(‘id‘,$(this).data(‘id‘)); //console.log(‘url‘,dataUrl); if($(this).data(‘id‘) == dataUrl){ flag = false; } }); if(flag){ var iframe = $(this.template.iframe.format(menuName,dataIndex,height,dataUrl,dataUrl)); thisElement.find("#content-tabs").append(iframe); } BaseIframe.prototype.hidden_a(menuName); return false; } /**加載數據*/ BaseIframe.prototype.loadData = function () { 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) { // 添加iframe var iframe = $(this.template.iframe.format(data[i].id,i,height,data[i].url,data[i].url)); this.$element.find("#content-tabs").append(iframe); } else { console.error("id=" + data[i].id + "的iframe頁未指定url"); } } } //console.log("this++",this); //console.log("thisdafult++",BaseIframe.prototype.default); if(data.length > 1){ this.$element.find("#content-tabs iframe").eq(this.options.showIndex).css("display","inline"); this.$element.find(‘#page-tabs a‘).eq(this.options.showIndex).addClass(‘active‘); }else{ this.$element.find("#content-tabs iframe").eq(0).css("display","inline"); this.$element.find(‘#page-tabs a‘).eq(0).addClass(‘active‘); } //綁定事件 BaseIframe.prototype.eventses(); //$("#content-tabs iframe").css("height",height); //console.log(thisElement.attr(‘id‘)); //console.log(thisElement.html()); } /**點擊事件*/ BaseIframe.prototype.eventses = function () { //console.log("thisElement",thisElement); thisElement.find("#page-tabs a i").each(function(){ $(this).click(function(){ var id = $(this).data(‘id‘); //console.log(‘ad0‘,id); BaseIframe.prototype.remove(id); }); }); thisElement.find("#page-tabs a").click(function(){ //console.log("點擊a: ",this); var dataUrl = $(this).data(‘id‘); var menuName = $(this).text(); var name = $(this).attr(‘name‘); var dataIndex = $(this).data(‘index‘);; BaseIframe.prototype.openIframe(dataUrl,name,dataIndex); }); } //新增一個Iframe頁 BaseIframe.prototype.addIframe = function (obj) { var nav_a = $(this.template.nav_a.format(obj.url,$(‘#page-tabs a‘).length,obj.id ,obj.text)); //如果可關閉,插入關閉圖標,並綁定關閉事件 if (obj.closeable) { var a_close = $(this.template.a_close.format(obj.id)); nav_a.append(" "); nav_a.append(a_close); } thisElement.find("#page-tabs").append(nav_a); BaseIframe.prototype.eventses(); } /**隱藏其他的,顯示當前*/ BaseIframe.prototype.hidden_a = function(obj){ thisElement.find(‘#page-tabs a‘).each(function(){ $(this).removeClass(‘active‘); }); thisElement.find(‘#content-tabs iframe‘).each(function(){ $(this).css("display","none"); }); thisElement.find("iframe[name=‘"+obj+"‘]").css("display","inline"); thisElement.find("a[name=‘"+obj+"‘]").addClass(‘active‘); //console.log("height",height); //thisElement.find("#content-tabs iframe").css("height",height); } //根據id獲取活動也標簽名 BaseIframe.prototype.find=function (tabId) { return this.$element.find(".nav-tabs li a[href=‘#" + tabId + "‘]").text(); } // 刪除活動頁 BaseIframe.prototype.remove=function (obj) { thisElement.find("#content-tabs iframe[name=‘"+obj+"‘]").remove(); thisElement.find("#page-tabs a[name=‘"+obj+"‘]").remove(); thisElement.find(‘#page-tabs a‘).eq(0).addClass(‘active‘); thisElement.find("#content-tabs iframe").eq(0).css("display","inline"); if(thisElement.find(‘#page-tabs a‘).length > 0){ var a = thisElement.find(‘#page-tabs a‘).eq(0);//找到第一個a標簽取出數據 this.openIframe(a.data(‘id‘),a.attr(‘name‘),a.data(‘index‘)); } } //根據id設置活動iframe頁 BaseIframe.prototype.showIframe=function (tabId) { var a = thisElement.find("#page-tabs a[name=‘" + tabId + "‘]");//找到a標簽 //console.log("a標簽",a); var dataUrl = a.data(‘id‘); var dataIndex = a.data(‘index‘);; BaseIframe.prototype.openIframe(dataUrl,tabId,dataIndex); } //獲取當前活動iframe頁的ID BaseIframe.prototype.getCurrentIframeId=function () { var id=thisElement.find("#page-tabs .active a").attr("name"); console.log(‘id‘,id); return id; } 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)View Code
參數說明:
方法說明:
bootstrap添加iframe頁