首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
bootstrap按钮插件（Button）使用方法解析
Jan 13 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
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
Three.js(1) OOP(1) 条形码(1) Mysql8(2) Outlook(1) tree shaking(1) 黑屏(2) SeaTable(1) MutationObserver(1) celery(1)
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十一）
2014/06/25 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
Prototype Array对象 学习
2009/07/19 Javascript
JS判断字符串长度的5个方法（区分中文和英文）
2014/03/18 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python中单、双下划线的区别总结
2017/12/01 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
浅谈Python基础—判断和循环
2019/03/22 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
社区母亲节活动方案
2014/03/05 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
被告代理词范文
2015/05/25 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
护士心得体会范文
2016/01/25 职场文书
《水浒传》读后感3篇（范文）
2019/09/19 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
零基础学java之循环语句的使用
2022/04/10 Java/Android