最近項目有個需求，就是製作很多後臺管理程序中的"記憶taps"
先說說記憶taps的特性，根據用戶對側邊欄的某個欄目路徑的觸發，在頂部自動生成新的選項卡，同時這個taps組內的標籤用戶可以執行刪除操作
首先是在路由控制器文件router.js中 定義一個可匹配的路由數組， 對應着側邊欄的欄目標題和當前hash（哈希）
var $urlsMap = {
"#index/normal":["普通會員首頁"],
"#index/fxs":["分銷商首頁"],
"#index/gys":["供應商首頁"],
"#index/cadmin":["c2c平臺管理員"],
"#tables":[""],
//產品管理
"#product/scenic":["門票管理"],
"#product/hotel":["酒店管理"],
"#product/vacation":["線路管理"],
"#product/eats":["餐飲管理"],
"#product/goods":["特產管理"],
"#product/guider":["導遊管理"],
"#product/car_rental":["租車管理"],
//合作伙伴
"#user/apply":["供應商管理"],
"#user/distributor":["分銷商管理"],
//用戶管理
"#user/user":["用戶"],
"#user/distributor":["用戶組"],
"#user/integral":["會員積分"],
//合作申請
"#user/message":["合作申請管理"],
.
.
.
.
};
用正則方法中的exec()獲得backbone項目中當前路徑的hash
var $baseURI = options.$insertDOM[0].baseURI||"";
var $urlReg = /#[^#]+/;
var $result = $urlReg.exec($baseURI)[0].toString();
exec() 方法用於檢索字符串中的正則表達式的匹配。
語法: RegExpObject.exec(string);
將已生成的taps組內所有的a標籤html內容,連接成字符串，便於檢索用戶打開的新頁面是否已經生成過了taps
var $allTapsText = $tapsUl.find("li a").map(function(){
return $(this).html();
}).get().join(", ");
如果已經生成過了taps,那麼就不繼續下面的操作，直接切換taps的高亮樣式
if($allTapsText.indexOf($tapsTitle)>-1){
/*更新taps的高亮指向*/
$tapsUl.find("li").removeClass("active");
$tapsUl.find("li a[href='"+$result+"']").parent("li").addClass("active");
return false;
}
在taps組的最後生成一個新的taps，並將高亮樣式指向它
//如果能匹配到這個taps
if($tapsTitle){
/*轉換成字符串*/
$tapsTitle = $tapsTitle.toString();
/*新增新的taps*/
$tapsUl.append($tapsTemp);
/*改變新taps的文本和鏈接指向*/
$tapsUl.find("li:last a").html($tapsTitle).attr("href",$result);
/*更新taps的高亮指向*/
$tapsUl.find("li").removeClass("active");
$tapsUl.find("li:last a").parent("li").addClass("active");
}
單擊taps上的關閉小按鈕，觸發刪除dom事件
/*關閉按鈕*/
var $tapsUlClose = $("section.taps-wrapper ul.taps-nav li i");
遇上一個點擊一次執行一次，再點擊執行兩次，再點擊執行三次的BUG ， 解決方法就是解除綁定
/*解決click重複綁定事件*/
$tapsUlClose.unbind("click");
/*刪除選項卡*/
$tapsUlClose.on("click",function(){
$tapsUl = $("section.taps-wrapper ul.taps-nav");
var $this = $(this);
/*父級元素li*/
var $parentLi = $this.parent("li");
/*獲得當前li的索引*/
var $thisLiIndex = $tapsUl.find("li.active").index();
var $LiSize = $tapsUl.find("li").size();
$tapsUl.find("li").removeClass("active");
$parentLi.remove();
當taps總數量>= 當前刪除的taps索引+2， 長度足夠，那麼繼續顯示這個索引的taps
if($LiSize>=$thisLiIndex+2){
$tapsUl.find("li").eq($thisLiIndex).addClass("active");
}else{
$tapsUl.find("li").eq($thisLiIndex-1).addClass("active");
}
獲得新的需要指向的url
var $newUrl = $tapsUl.find("li.active a").attr("href");
重置hash，實現跳轉
window.location.hash = $newUrl;
//阻止事件冒泡
event.stopPropagation();
});
------------------------------------------------------------以下爲對應的html
<section class="taps-wrapper">
<ul class="taps-nav">
<li class="active"><a href="javascript:;">首頁</a></li>
</ul>
</section>
<script type="text/javascript">
/*選項卡切換*/
$("section.taps-wrapper >ul li a").on("click",function(){
var $this = $(this);
$("section.taps-wrapper >ul li").removeClass("active");
$this.parent("li").addClass("active");
});
</script>
------------------------------------------------------------以下爲對應的css
/* 導航tips */
.pageheader {
position: relative;
background-color: #fff;
height: 64px;
}
.pageheader section.taps-wrapper{
position: relative;
height: inherit;
padding: 0 20px;
}
.pageheader section.taps-wrapper ul.taps-nav{
height: inherit;
padding: 0;
margin-bottom: 0;
border-bottom: 1px solid #ddd;
}
.pageheader section.taps-wrapper ul.taps-nav >li{
list-style: none;
position: relative;
display: block;
float: left;
margin-bottom: -1px;
text-align: center;
}
.pageheader section.taps-wrapper ul.taps-nav >li a{
position: relative;
display: block;
height: 46px;
line-height: 46px;
min-width: 80px;
padding: 0 15px;
font-size: 14px;
letter-spacing: 1px;
margin-top: 18px;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #ddd;
}
.pageheader section.taps-wrapper ul.taps-nav >li.active a{
border: 1px solid #ddd;
color: #333;
border-bottom: 1px solid #fff;
}
.pageheader section.taps-wrapper ul.taps-nav >li a:hover{
text-decoration: none;
background-color: #e5e8ea;
}
.pageheader section.taps-wrapper ul.taps-nav >li.active a:hover{
background-color: #fff;
}
.pageheader section.taps-wrapper ul.taps-nav >li i{
position: absolute;
display: block;
width: 15px;
height: 15px;
font-size: 15px;
right: 2px;
color: #545454;
top: 20px;
cursor: pointer;
display: none;
}
.pageheader section.taps-wrapper ul.taps-nav >li:hover i{
display: block;
color: #545454;
}
.pageheader section.taps-wrapper ul.taps-nav >li i:hover{
color: #e45;
}
@不羈的狂魚編輯