bootstrap选项卡扩展功能详解
时间:2019-03-30
本文章向大家介绍bootstrap选项卡扩展功能详解,主要包括bootstrap选项卡扩展功能详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用了下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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android的八种对话框的实现代码示例
- Android使用RecyclerView实现今日头条频道管理功能
- Liunx(centos8)下的yum的基本用法和实例(推荐)
- Android中LeakCanary检测内存泄漏的方法
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Android实现简单的拨号器功能
- Android调用系统自带浏览器打开网页的实现方法
- Linux之删除带有空格的文件(不是目录)
- Android自定义AvatarImageView实现头像显示效果
- 如何使用win10内置的linux系统启动spring-boot项目
- Android 实现单线程轮循机制批量下载图片
- Android开发之项目模块化实践教程
- Linux centos7 下安装 phpMyAdmin的教程
- 简单学习Android TextView
- Android 滑动返回Activity的实现代码