demoshop

demo, trying to be the best_

之前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上
} 

回應討論