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);

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

Javascript 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 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
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
django的ORM模型的实现原理
2019/03/04 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
逻辑链路控制协议
2016/10/01 面试题
J2EE面试题
2016/03/14 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
2015年调度员工作总结
2015/04/30 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技