bootstrap选项卡扩展功能详解

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

青山网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联

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

页面代码:




  
  
  
  
  
  


  

控件代码:

//选项卡
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 = $('
  • ' + this.options.title + '×
  • '); 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 = $('
    '); 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 = $('
    ').data("data", $.extend(true, {}, option)); if (!option.url) { page.html(option.content); } else { 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 = $(''); 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 = $('').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);

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    当前名称:bootstrap选项卡扩展功能详解
    浏览路径:http://myzitong.com/article/jodpso.html