bootstrap选项卡扩展功能详解

2024-12-02 12:54:55

用了下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选项卡动态切换效果

最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给
精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)

今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g
浅谈bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hideen.bs.tab:隐藏上一个元素完成 1.4.
很棒的Bootstrap选项卡切换效果

今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了. 先看一下效果图吧,显目一些! 实现代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scal
bootstrap导航、选项卡实现代码

本文实例为大家分享了bootstrap导航和选项卡的具体代码,供大家参考,具体内容如下导航:  <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#">雪碧图</a></li> &
bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示.  <ul id="myTab" class="nav nav-tabs" role=
使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &
BootStrap tab选项卡使用小结

选项卡选项卡的基本使用方式为: <ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target=&q
Bootstrap选项卡与Masonry插件的完美结合

Bootstrap 是最流行的前端框架之一.在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页. 如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的选项卡组件一起使用,你将会发现许多讨厌的行为. 我遇到过,而本文主要关注这个问题是什么和你要如何来解决这个问题. Bootstrap的Tabs Bootstrap的选项卡组件包括两个关键点:选项卡导航元素和一些内容面板.在页面加载时,第一个面板应用了 .active 类.使这个面板默认是可见的.
全面解析Bootstrap中tab（选项卡）的使用方法

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hidee

bootstrap选项卡扩展功能详解

相关推荐

随机推荐