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>