用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
页面代码:
!DOCTYPE html html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title /title link href="Content/bootstrap.css" rel="external nofollow" rel="stylesheet" / script src="Scripts/jquery-1.10.2.js" /script script src="Scripts/bootstrap.js" /script style type="text/css" .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: "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) { (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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。