编程 Javascript

bootstrap选项卡扩展功能详解

Posted in Javascript onJune 14, 2017

用了下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" style="width:600px;"></div>

</body>
</html>
<script>
  $(function () {
    var toolbar = $('<div class="btn-group"></div>');
    $("#tabtest").before(toolbar);
    Tabs.init({ selector: $("#tabtest"), close: true });
    for (var i = 1; i <= 40; i++) {
      (function (i) {
        toolbar.append($('<button type="button" class="btn btn-default">' + 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 class="close">×</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 class="tab-content"></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 + '" class="tab-pane"></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 class="dropdown pull-right"><a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" ><b class="caret"></b></a><ul class="dropdown-menu"></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 class="nav nav-tabs pagetabs"></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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap选项卡扩展功能详解

- Author -

路ぺ漫漫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

总结一些js自定义的函数

Aug 05 Javascript

JS中confirm,alert,prompt函数使用区别分析

Apr 01 Javascript

Jquery插件分享之气泡形提示控件grumble.js

May 20 Javascript

javascript 实现原路返回

Jan 21 Javascript

微信小程序 wxapp导航 navigator详解

Oct 31 Javascript

AngularJS辅助库browserTrigger用法示例

Nov 03 Javascript

详谈JavaScript的闭包及应用

Jan 17 Javascript

从零开始在NPM上发布一个Vue组件的方法步骤

Dec 20 Javascript

详解keep-alive + vuex 让缓存的页面灵活起来

Apr 19 Javascript

微信小程序点击保存图片到本机功能

Dec 13 Javascript

微信小程序使用自定义组件导航实现当前页面高亮

Jan 02 Javascript

vue3 watch和watchEffect的使用以及有哪些区别

Jan 26 Vue.js

zTree树形插件异步加载方法详解

Jun 14 #Javascript

详解Angular2响应式表单

Jun 14 #Javascript

vue过渡和animate.css结合使用详解

Jun 14 #Javascript

ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

Jun 14 #Javascript

详解Vue.use自定义自己的全局组件

Jun 14 #Javascript

详解vue-router2.0动态路由获取参数

Jun 14 #Javascript

微信小程序动态添加分享数据

Jun 14 #Javascript