bootstrap选项卡扩展功能详解
70 浏览量
2020-12-09
16:28:04
上传
评论
收藏 35KB PDF 举报
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) {
资源评论
