bs前端设计--多页签界面

在大型的bs系统开发中，界面通常组织成MDI的形式，fineui、jquery miniui等框架都完美的实现了，如果不想引入这些大的类库，需要自己实现或下载特定的插件。网上可以下载到一个clevertabs jquery插件库，但只支持jquery1.6和jquery ui1.8，对高版本jquery支持的不好。网上搜索了一下，有基于bootstrap的实现，而且兼容高版本jquery。下载后改进一下，满足基本需求。

下面分析一下实现原理。首先看看bootstrap tab页签的实现方式：

<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">菜鸟教程</a></li><li><a href="#ios" data-toggle="tab">iOS</a></li>
</ul>
<div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="home"><p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p></div><div class="tab-pane fade" id="ios"><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p></div>
</div>

在具体项目中，页签下面要显示具体的子页面，这里把ios的页签内容替换为iframe，并在其中显示一个具体的页面：

<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">菜鸟教程</a></li><li><a href="#ios" data-toggle="tab">iOS</a></li>
</ul>
<div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="home"><p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p></div><div class="tab-pane fade in" id="ios"><iframe style="height:500px;width:500px" src="www.baidu.com"></iframe></div>
</div>

测试通过，那么现在只需要能够动态生成页签和相关页面，并根据需要生成页签上的关闭按钮。

 /*** 新增一个tab，但如果是已存在的tab则只是激活它，而不再新增* * @param id {string} 模块ID * @param title {string} 标题* @param url {string} 目标链接地址* @param canClose {boolean} 是否生成关闭按钮* @param loginCheck {function}可选参数，不传则直接使用iframe打开界面*/bTabs.prototype.addTab = function(id,title,url,canClose,loginCheck){if(!id || !title || !url) console.error('新增tab时，id,title,url参数为必须传递参数！');var c = constants, $tabs = this.$container, openTabs = this.openTabs, p = this.p;var tabId = c.prefixKey + id;if(openTabs && $.isArray(openTabs) && openTabs.length>0){var exist = false;//是否已存在$.each(openTabs,function(i,row){if(row == tabId){exist = true;return false;}});//若功能已存在，则直接切换if(exist){$('ul.nav-tabs a[href="#'+tabId+'"]',$tabs).tab('show');return;}}else openTabs = new Array();if(canClose)$('ul.nav-tabs',$tabs).append('<li><a href="#'+tabId+'" data-toggle="tab">'+title+c.closeBtnTemplate+'</a></li>');else{$('ul.nav-tabs',$tabs).append('<li role="presentation" class="noclose"><a href="#'+tabId+'" data-toggle="tab">'+title+'</a></li>');}var content = $('<div class="tab-pane" id="'+tabId+'"></div>');$('div.tab-content',$tabs).append(content);//切换到新增加的tab上$('ul.nav-tabs li:last a',$tabs).tab('show');openTabs.push(tabId);var openIframe = function(){$(content).append('<iframe frameborder="0" scrolling="yes" style="width:100%;height:100%;border:0px;" src="'+url+'"></iframe>');};//进行登录验证if(loginCheck && $.isFunction(loginCheck)){if(loginCheck()) openIframe();else if(p && p.loginUrl) window.top.location.replace(p.loginUrl);}else openIframe();};

动态生成页签和相关内容的实现方式，就是拼html，在append到指定元素上，原理比较简单。这里只要分析清楚bootstrap的实现方式即可。页签上的关闭按钮也是拼了一个button（closeBtnTemplate : '<button type="button" class="navTabsCloseBtn" title="关闭" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>',），并用css改变其显示风格。总体上，灵活运用jquery的css选择器和bootstrap tab的接口，即可实现相关功能。

关闭页签的时候，过程相反，删除掉tab页签和相关页面内容

       /*** 关闭tab* @param id*/bTabs.prototype.closeTab = function(id){var c = constants, $tabs = this.$container, openTabs = this.openTabs;var thisTab = $('#' + id);//在移除标签页之前，先把iframe移除，解决在IE下，窗口上的输入控件获得不了焦点的问题if($('iframe',$(thisTab)).size() > 0) $('iframe',$(thisTab)).remove();//移除内容区$(thisTab).remove();var a = $('ul.nav-tabs a[href="#'+id+'"]',$tabs);var li = $(a).closest('li');//获得当前tab的前一个tabvar prevLi = $(li).prev();//移除Tabli.remove();if(openTabs && $.isArray(openTabs) && openTabs.length>0){var index = -1;$.each(openTabs,function(i,d){if(d == id){index = i;return false;}});if(index != -1) openTabs.splice(index,1);}//激活被关闭Tab邻的Tab，若没有则不处理if(prevLi.size() > 0 ) $('a',$(prevLi)).tab('show');};

bootstrap提供了一些基本的功能，把这些功能做成动态的，就可以实现非常绚丽的效果。现在web前端技术非常灵活，一些特效在cs端开发很困难，在bs端可以轻松实现。

bs前端设计--多页签界面相关推荐

HTML 前端设置浏览器页签图标设置
想实现如下效果:修改浏览器页签的图标话不多说上代码 <link rel="shortcut icon" type=& ...
电商前端设计-详情页
本文主要讨论电商工程中一些常见的页面设计模式和方法. 详情页是任何一个系统里面非常重要的一个页面,在电商领域里面尤其重要,这个页面也是访问频率最高的模块之一,其特点是模块非常复杂,以苏宁为例. 相关的 ...
界面设计方法 (2) — 3.卡式, 列表, 主细表, 树形, 页签
企业管理类型系统采用的PC端界面形式常见的有5种 (卡式.列表.主细表.树形.页签),以及以这5种形式为基础的组合形式.确定一个业务功能采用什么样的界面形式表达的效果最佳,一般是综合了客户的业务需求. ...
基于微前端qiankun的多页签缓存方案实践
作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...
AIDE手机编程初级教程（零基础向） 3.2.1 设计欢迎页（主体）
第三章优化小游戏系列教程导航 3.2 设计欢迎页 3.2.1 主体部分文章目录封装欢迎页后记封装这一部分和本节内容其实关系不大.不过,我在之后的文章中,也许都会安排这样的一个部分.安排 ...
eclipse插件开发(一) 简易4页签编辑器(源码 | 设计 | JS | CSS)
由于在前端编辑html和js还有css都比较繁琐,因此想要在一个页面编辑,所以想开发一个插件来减少这个繁琐 1.本文环境: Eclipse IDE for Enterprise Java Develo ...
前端实战:React 多页签缓存处理
关注并将「趣谈前端」设为星标每天定时分享技术干货/优秀开源/技术思维 1. 背景 ant design pro v2的项目需要多页签显示页面而且还需要页面能够缓存下来. 多页面展示不同数据会对应不 ...
UI培训教程分享：APP启动页UI界面设计
本期为大家分享的ui培训教程是关于APP启动页面的UI设计方面,作为一名合格的UI设计师,APP产品的启动页是需要会的,下面就来看看详细的教程吧. UI培训教程分享:APP启动页UI界面设计启动页面 ...
UI素材模板|App搜索页UI界面设计版式
无论是在app还是在web端,搜索都是一个发现内容的重要方式.与web端不同,app上的搜索功能在设计方面有自己独特的展现方式. 下面就看看这些App搜索页UI界面设计吧. 工作搜索App免费UI ...

bs前端设计--多页签界面

bs前端设计--多页签界面相关推荐

最新文章

热门文章