返回首页 | 金赞娱乐场

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发bootstrap选项卡扩展功能详解

时间:2017-07-07 编辑:admin

网站开发bootstrap选项卡扩展功能详解

用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写。

花了几个小时把tabs控件扩展了下。下面是代码

页面代码:

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title /title 
 link href="Content/bootstrap." rel="external nofollow" rel="stylesheet" / 
 script src="Scripts/jquery-1.10.2.php" /script 
 script src="Scripts/bootstrap.php" /script 
 style type="text/" 
 .pagetabs{height:41px;}
 .nav-tabs li{padding: 0 1px;}
 .nav-tabs li a{color: #555;padding:8px 25px 8px 15px;border-top:4px solid transparent;background-color:#eee;border:1px solid #ddd;border-bottom-color:transparent;}
 .nav-tabs li a .close{display:inline-block;float:inherit;position: absolute;top: 1px;font-size: 18px;font-weight: inherit;right: 5px;}
 .nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus{border-top: 4px solid #ffa405;}
 .nav-tabs li a:hover{background-color:#e3e3e3;border:1px solid #ddd;border-bottom-color:transparent;}
 .pagetabs .dropdown-toggle,.pagetabs .dropdown-toggle:hover{border:none;background-color:transparent;padding:8px;}
 /style 
 /head 
 body 
 div id="tabtest" /div 
 /body 
 /html 
 script 
 $(function () {
 var toolbar = $(' div /div 
 $("#tabtest").before(toolbar);
 Tabs.init({ selector: $("#tabtest"), close: true });
 for (var i = 1; i = 40; i++) {
 (function (i) {
 toolbar.append($(' button type="button" ' + i + ' /button ').click(function () {
 Tabs.addtab({ title: "测试" + i, bindcode: i, content: i + " " + lwFW.dateHelper.toString(new Date(), "yyyy-MM-dd HH:mm:ss") });
 //Tabs.addtab({ title: "测试" + i, bindcode: i, url: "http://www.baidu.com" });
 }));
 })(i);
 /script 

控件代码:

//选项卡
var Tabs = (function ($) {
 var options = {
 selector: undefined,//
 close: false,//是否可以关闭标签
 //contextmenu: false,//右键菜单
 closeCallback: function () { }
 var _newtab;
 var _tabcontent;
 var _drop;
 var tab = function () {
 this.options = {
 title: "",
 bindcode: undefined,
 url: undefined,
 close: false
 var isfull = false;
 this.init = function (setting) {
 $.extend(this.options, setting);
 this.addtab = function (setting) {
 $.extend(this.options, setting);
 var li, litop, hasdata;
 if (!_drop) {
 _drop = new droplist();
 hasdata = ishas(this.options);
 if (!hasdata.has) {
 li = $(' li a href="#page' + this.options.bindcode + '" rel="external nofollow" data-toggle="tab" ' + this.options.title + ' span × /span /a /li 
 li.data("data", $.extend(true, {}, this.options));
 } else {
 li = hasdata.selector.off("click");
 li.prependTo(options.selector);
 li.find("span.close").show().on("click", function () {
 closetab(this);
 options.selector.children("li").not(li).removeClass("active");
 li.addClass("active");
 litop = _drop.options.selector.position().top, paneltop = options.selector.position().top;
 if (litop paneltop) { //超出检测
 _drop.addDropItem();
 function closetab(target) {
 var pager = $(target).parent().attr("href");
 $(target).closest("li").remove();
 options.selector.next().find(pager).remove();
 if (options.selector.find("li.active").length = 0) {
 options.selector.find("li a:first").tab("show");
 var li = _drop.options.ulpanel.children("li:first");
 if (li.length = 0) return;
 li.find("span.close").show();
 _drop.options.selector.before(li);
 if (_drop.options.selector.position().top options.selector.position().top) {
 li.find("span.close").hide();
 _drop.options.ulpanel.append(li);
 return;
 li.off("click");
 if (_drop.options.ulpanel.children("li").length = 0) {
 _drop.options.selector.css({ "visibility": "hidden" });
 function ishas(setting) {//检测选项卡是否存在
 var lis = options.selector.find("li"), lidata, hasdata;
 hasdata = { selector: undefined, has: false };
 $.each(lis, function () {
 lidata = $(this).data("data");
 if (!lidata) return true;
 if (lidata.title === setting.title && lidata.bindcode === setting.bindcode && lidata.url === setting.url) {
 hasdata = { selector: $(this), has: true };
 return false;
 return hasdata;
 var tabcontent = function () {
 this.options = {
 selector:undefined
 var option = {
 bindcode: undefined,
 url: undefined,
 content:undefined
 this.init = function () {
 var content = $(' div /div 
 this.options.selector = content;
 options.selector.after(this.options.selector);
 this.addContent = function (setting) {
 var page,iframe;
 $.extend(option, setting);
 hasdata = ishas(option);
 if (!hasdata.has) {
 page = $(' div id="page' + option.bindcode + '" /div ').data("data", $.extend(true, {}, option));
 if (!option.url) {
 page.html(option.content);
 } else {
 iframe = $(' iframe src="' + option.url + '" onload="lwFW.windowHelper.autoiframe(this)" scrolling="no" /iframe 
 page.append(iframe);
 page.appendTo(this.options.selector);
 } else {
 page = hasdata.selector;
 this.options.selector.children("div").not(page).removeClass("active");
 page.addClass("active");
 function ishas(setting) {//检测选项卡是否存在
 var divs = _tabcontent.options.selector.children("div"), divdata, hasdata;
 hasdata = { selector: undefined, has: false };
 $.each(divs, function () {
 divdata = $(this).data("data");
 if (!divdata) return true;
 if (divdata.bindcode === setting.bindcode) {
 hasdata = { selector: $(this), has: true };
 return false;
 return hasdata;
 var droplist = function () {
 this.options = {
 selector: undefined,
 ulpanel: undefined
 this.init = function (panel) {
 var li = $(' li a data-toggle="dropdown" href="#" rel="external nofollow" b /b /a ul /ul /li 
 this.options.selector = li.css({ "visibility": "hidden" });
 this.options.ulpanel = li.children("ul");
 this.options.selector.appendTo(panel);
 this.addDropItem = function () {
 additem(this.options.selector, this.options.ulpanel);
 function additem(li, ul) {
 var item = options.selector.children("li").not(li).last();
 li.css({ "visibility": "visible" });
 if (item.length = 0) return;
 item.find("span.close").hide();
 ul.append(item);
 item.one("click", function () {
 itemtarget(this, li, ul);
 function itemtarget(target, selector, ulpanel) {
 var item = options.selector.children("li").not(selector).last();
 $(target).find("span.close").show();
 $(target).prependTo(options.selector);
 if (item.length = 0) return;
 if (selector.position().top options.selector.position().top) {
 item.find("span.close").hide();
 ulpanel.append(item);
 item.one("click", function () {
 itemtarget(this, selector, ulpanel);
 function init(setting) {
 $.extend(options, setting);
 if (!options.selector) {
 return;
 if (options.selector[0].tagName.toLowerCase() != "ul") {
 var selector = $(' ul /ul ').appendTo(options.selector);
 options.selector = selector;
 if (!_drop) {
 _drop = new droplist();
 _drop.init(options.selector);
 if (!_tabcontent) {
 _tabcontent = new tabcontent();
 _tabcontent.init();
 if (!_newtab) {
 _newtab = new tab();
 function addtab(setting) {
 if (!_newtab) {
 _newtab = new tab();
 _newtab.addtab(setting);
 if (!_tabcontent) {
 _tabcontent = new tabcontent();
 _tabcontent.addContent(setting);
 options.selector.find('li a').filter('[href=#page' + setting.bindcode + ']').tab("show");
 return {
 init: function (setting) {
 init(setting);
 }, addtab: function (setting) {
 addtab(setting);
})(jQuery);


浏览:

网站建设

流程

    网站建设流程