首页
所有分类
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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
Javascript WebSocket使用实例介绍（简明入门教程）
Apr 16 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
js实现拾色器插件（ColorPicker）
May 21 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
德生G88(1) 美国购物网站(1542) ICF-F10(1) 香港购物网站(84) 纸巾盒(1) 爱尔兰购物网站(30) 天梯图(1) SLi Minor 2020(63) AE3805(1) CPU(2)
You might like
php面向对象全攻略 （十六） 对象的串行化
2009/09/30 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python实现音乐下载器
2018/04/15 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python extract及contains方法代码实例
2020/09/11 Python
艺术家策划的室内设计：Curious Egg
2019/03/06 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
党的群众路线教育实践活动个人对照检查材料（教师）
2014/11/04 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
SQL SERVER触发器详解
2022/02/24 SQL Server
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js