bootstrap选项卡扩展，增加关闭，超出一行显示下拉 - Web

TOP

bootstrap选项卡扩展，增加关闭，超出一行显示下拉(一)

2017-10-13 10:49:53 【大中小】浏览:1225次

最近用了下bootstrap,虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。

花了几个小时把tabs控件扩展了下。下面是代码

页面代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="Content/bootstrap.css" rel="stylesheet" />
 7     <script src="Scripts/jquery-1.10.2.js"></script>
 8     <script src="Scripts/bootstrap.js"></script>
 9     <script src="Scripts/lwFW.js"></script>
10     <style type="text/css">
11         .pagetabs{height:41px;}
12         .nav-tabs > li{padding: 0 1px;}
13         .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;}
14         .nav-tabs > li > a > .close{display:inline-block;float:inherit;position: absolute;top: 1px;font-size: 18px;font-weight: inherit;right: 5px;}
15         .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{border-top: 4px solid #ffa405;}
16         .nav-tabs > li > a:hover{background-color:#e3e3e3;border:1px solid #ddd;border-bottom-color:transparent;}
17         .pagetabs .dropdown-toggle,.pagetabs .dropdown-toggle:hover{border:none;background-color:transparent;padding:8px;}
18         .pagetabs .open > .dropdown-toggle, .pagetabs .open > .dropdown-toggle:hover, .pagetabs .open > .dropdown-toggle:focus{background-color:transparent;}
19     </style>
20 </head>
21 <body>
22     <div id="tabtest" style="width:600px;"></div>
23 
24 </body>
25 </html>
26 <script>
27     $(function () {
28         var toolbar = $('<div class="btn-group"></div>');
29         $("#tabtest").before(toolbar);
30         Tabs.init({ selector: $("#tabtest"), close: true });
31         for (var i = 1; i <= 40; i++) {
32             (function (i) {
33                 toolbar.append($('<button type="button" class="btn btn-default">' + i + '</button>').click(function () {
34                     Tabs.addtab({ title: "测试" + i, bindcode: i, content: i + " " + lwFW.dateHelper.toString(new Date(), "yyyy-MM-dd HH:mm:ss") });
35                     //Tabs.addtab({ title: "测试" + i, bindcode: i, url: "http://www.baidu.com" });
36                 }));
37             })(i);
38         };
39     });
40 </script>

View Code

控件代码：

  1 //选项卡
  2 var Tabs = (function ($) {
  3     var options = {
  4         selector: undefined,//
  5         close: false,//是否可以关闭标签
  6         //contextmenu: false,//右键菜单
  7         closeCallback: function () { }
  8     };
  9     var _newtab;
 10     var _tabcontent;
 11     var _drop;
 12 
 13     var tab = function () {
 14         this.options = {
 15             title: "",
 16             bindcode: undefined,
 17             url: undefined,
 18             close: false
 19         };
 20         var isfull = false;
 21         this.init = function (setting) {
 22             $.extend(this.options, setting);
 23         };
 24         this.addtab = function (setting) {
 25             $.extend(this.options, setting);
 26             var li, litop, hasdata;
 27             if (!_drop) {
 28                 _drop = new droplist();
 29             };
 30             hasdata = ishas(this.options);
 31             if (!hasdata.has) {
 32                 li = $('<li><a href="#page' + this.options.bindcode + '" data-toggle="tab">' + this.options.title + '<sp

首页上一页 1 2 3 下一页尾页 1/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：nodeJS之crypto加密	下一篇：input文字垂直居中和按钮对齐问题..