CSS Tab加上MultiView完美配合
- 2008-11-30
- 23618
- 0
之前demo發的【利用CSS Tab Designer做出高品質的頁籤】不知道是否有使用者玩過了,demo再實際運用後有一個問題,再配合MultiView切換後無法讓使用者知道現在是屬於那個頁籤,所以就寫了一套處理方式,讓這玩意更完美。
首先要怎麼利用linkButton來套上CSS Tab Designer的方法已經在前文說過了【利用CSS Tab Designer做出高品質的頁籤】所以直接來吧,把每個linkButton都上這事件
<li><asp:LinkButton ID="lbtnTab1" runat="server" onclick="lbtnTab_Click"><span>密技神氣帖</span></asp:LinkButton></li> <li><asp:LinkButton ID="lbtnTab2" runat="server" onclick="lbtnTab_Click"><span>Google大神</span></asp:LinkButton></li> <li><asp:LinkButton ID="lbtnTab3" runat="server" onclick="lbtnTab_Click"><span>coding隨筆</span></asp:LinkButton></li> <li><asp:LinkButton ID="lbtnTab4" runat="server" onclick="lbtnTab_Click"><span>酷站大爆料</span></asp:LinkButton></li> <li><asp:LinkButton ID="lbtnTab5" runat="server" onclick="lbtnTab_Click"><span>胡言亂語</span></asp:LinkButton></li> <li><asp:LinkButton ID="lbtnTab6" runat="server" onclick="lbtnTab_Click"><span>Firefox專區</span></asp:LinkButton></li>
因為後端要用跑迴圈的方式來處理,所以不管你有幾個linkButton命名方式最後都請用順序數字,不然後端你會很難寫...而且請注意,onclick的事件必須套用同一各,不然你想寫死嗎...
後端我就直接放上了
//這事件中放一個共用的方法 protected void lbtnTab_Click(object sender, EventArgs e) { setSelectLbtn(sender);//把sender傳出去 } private void setSelectLbtn(object sender) { int x = 0; string sourceLbtn = "";//宣告一個字串用來處理傳過來的ID int viewNumber; switch (sender.GetType().Name)//抓到傳過來的物件 { case "LinkButton"://如果是linkButton sourceLbtn = ((LinkButton)sender).ID; break; case "Button"://如果是Button sourceLbtn = "l" + ((Button)sender).ID; break; } viewNumber = Convert.ToInt32(sourceLbtn.Substring(sourceLbtn.Length - 1, 1));//抓出按鈕的最後一個字 for (x = 1; x <= 6; x++)//有幾個按鈕就跑幾圈 { LinkButton lbtn = (LinkButton)Page.FindControl("lbtnTab" + x); if ((lbtn.ID == sourceLbtn)) { lbtn.Font.Bold = true; lbtn.Font.Underline = true; } else { lbtn.Font.Bold = false; lbtn.Font.Underline = false; } } this.MultiView1.SetActiveView((View)Page.FindControl("View" + viewNumber));//切換到選取的view上 }
如果你有使用masterPage請使用下列code
//這事件中放一個共用的方法 protected void lbtnTab_Click(object sender, EventArgs e) { setSelectLbtn(sender);//把sender傳出去 } private void setSelectLbtn(object sender) { int x = 0; string sourceLbtn = "";//宣告一個字串用來處理傳過來的ID int viewNumber; switch (sender.GetType().Name)//抓到傳過來的物件 { case "LinkButton"://如果是linkButton sourceLbtn = ((LinkButton)sender).UniqueID ; break; case "Button"://如果是Button sourceLbtn = "l" + ((Button)sender).UniqueID; break; } viewNumber = Convert.ToInt32(sourceLbtn.Substring(sourceLbtn.Length - 1, 1));//抓出按鈕的最後一個字 for (x = 1; x <= 6; x++)//有幾個按鈕就跑幾圈 { LinkButton lbtn = (LinkButton)Page.Master.FindControl(sourceLbtn.Substring(0, sourceLbtn.Length - 1) + x); if ((lbtn.UniqueID == sourceLbtn)) { lbtn.Font.Bold = true;//粗體 lbtn.Font.Underline = true;//斜體 } else { lbtn.Font.Bold = false; lbtn.Font.Underline = false; } } string viewName = this.MultiView1.GetActiveView().UniqueID.Substring(0, this.MultiView1.GetActiveView().UniqueID.Length - 1); this.MultiView1.SetActiveView((View)Page.Master.FindControl(viewName + viewNumber));//切換到選取的view上 }
這樣子就可以把切換到的頁籤字體加租加底線,使用者就很清楚現在是哪一頁啦,至於為什麼code中會有判斷type的部份,那是因為demo再運用的時候,在每個view內還放了一個button來做下一頁的按鈕,所以這樣子來讓這方法依然可以共用。至於或許你會問,那一開始的預設頁就沒有加粗的效果啦,其實demo也有考慮到所以如果你有需要還可以這樣改....(以下適用masterPage如果沒有用masterPage的請自行對造上方code修改)
protected void Page_Load(object sender, EventArgs e) { setSelectLbtn(this.MultiView1.GetActiveView().UniqueID); } //這事件中放一個共用的方法 protected void lbtnTab_Click(object sender, EventArgs e) { setSelectLbtn(sender);//把sender傳出去 } private void setSelectLbtn(object sender) { int x = 0; string sourceLbtn = "";//宣告一個字串用來處理傳過來的ID int viewNumber; switch (sender.GetType().Name)//抓到傳過來的物件 { case "String": this.lbtnTab1.Font.Bold = true; this.lbtnTab1.Font.Underline = true; sourceLbtn = this.lbtnTab1.UniqueID; break; case "LinkButton"://如果是linkButton sourceLbtn = ((LinkButton)sender).UniqueID ; break; case "Button"://如果是Button sourceLbtn = "l" + ((Button)sender).UniqueID; break; } viewNumber = Convert.ToInt32(sourceLbtn.Substring(sourceLbtn.Length - 1, 1));//抓出按鈕的最後一個字 for (x = 1; x <= 6; x++)//有幾個按鈕就跑幾圈 { LinkButton lbtn = (LinkButton)Page.Master.FindControl(sourceLbtn.Substring(0, sourceLbtn.Length - 1) + x); if ((lbtn.UniqueID == sourceLbtn)) { lbtn.Font.Bold = true;//粗體 lbtn.Font.Underline = true;//斜體 } else { lbtn.Font.Bold = false; lbtn.Font.Underline = false; } } string viewName = this.MultiView1.GetActiveView().UniqueID.Substring(0, this.MultiView1.GetActiveView().UniqueID.Length - 1); this.MultiView1.SetActiveView((View)Page.Master.FindControl(viewName + viewNumber));//切換到選取的view上 }
回應討論