Leo's Salary Thief Plaza: 讓jQuery不重置停留在使用者選的那一頁

利用javascript做了一個簡單的網頁標籤功能，標籤項略多，而在使用者選擇後一旦觸發isPostback，標籤就會被重置回第一個標籤。
因為標籤項目跟子項目都滿多的，這樣對使用者來說不太方便，所以找了方法鎖住使用者選擇的該標籤。

原本的javascript做在前台，但有些人會認為前後台要分清楚，所以這次也做了javascript在後台的版本。
邏輯很簡單，就是把使用者點選的標籤存起來，isPostback之後再讀出來跳到那一個標籤就好。

javascript在前台版：
html的部分

<head runat="server">
    <title></title>
    <link type="text/css" href="gis.css" rel="stylesheet" />
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <style type="text/css">
        #tabs
        {
            font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
            font-size: 0.8em;
            margin: 10px;
        }
        #dialog_link
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        ul#icons li
        {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
    </style>
</head>

    <div>
        <!-- Tabs -->
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">現況資料</a></li>
                <li><a href="#tabs-2">許可資料</a></li>
                <li><a href="#tabs-3">管制資料</a></li>
                <li><a href="#tabs-4">申報</a></li>
                <li><a href="#tabs-5">檢測資料</a></li>
                <li><a href="#tabs-6">更新擴充資料</a></li>
                <li><a href="#tabs-7">VOC</a></li>
            </ul>
            <div id="tabs-1">
                <asp:ImageButton ID="ImgBtnControl" runat="server" ImageUrl="~/images/sub1-7.png"
                    OnClick="ImgBtnControl_Click" />
            </div>
            <div id="tabs-2">
                <asp:ImageButton ID="ImgBtnLicense" runat="server" ImageUrl="~/images/sub1-1.png"
                    OnClick="ImgBtnLicense_Click" />
            </div>
            <div id="tabs-3">
                <asp:ImageButton ID="ImgBtnRelief" runat="server" ImageUrl="~/images/subBtn3.png"
                    OnClick="ImgBtnRelief_Click" />
            </div>
            <div id="tabs-4">
                <asp:ImageButton ID="ImgBtnApplySeason" runat="server" ImageUrl="~/images/sub2-8.png"
                    OnClick="ImgBtnApplySeason_Click" />
            </div>
            <div id="tabs-5">
                <asp:ImageButton ID="ImgBtnRegularStatistic" runat="server" ImageUrl="~/images/sub4-2.png"
                    OnClick="ImgBtnRegularStatistic_Click" />
            </div>
            <div id="tabs-6">
                <asp:ImageButton ID="ImgBtnCheckPipe" runat="server" ImageUrl="~/images/sub3-2.png"
                    OnClick="ImgBtnCheckPipe_Click" />
            </div>
            <div id="tabs-7">
                <asp:ImageButton ID="ImgBtnVOCWaste" runat="server" ImageUrl="~/images/sub5-6.png"
                    OnClick="ImgBtnVOCWaste_Click" />
            </div>
        </div>
    </div>

最後要在html末端(body之後)加上這段

<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            var tabIndex = $("#<%=hidCurrentTab.ClientID %>").val();
            $("#tabs").tabs({ select: function (event, ui) {
                $("#<%=hidCurrentTab.ClientID%>").val(ui.index);
            }
                , selected: tabIndex
            });
        });
        $('#dialog_link, ul#icons li').hover(
                function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); });
    })
</script>

這樣就完成了!!
接著是javascript做在後台的版本，上面的第一段和第二段碼完全一樣，唯一的差別是html末端的那段要全部砍掉，改成在後台的部分放上這個涵式：

    private void registerScriptTabs()
    {
        string scriptStr;
        scriptStr =  "    $(function () {// Tabs\n";
        scriptStr += "        $(document).ready(function () {\n";
        scriptStr += "            var tabIndex = $(\"#" + hidCurrentTab.ClientID + "\").val();\n";
        scriptStr += "            $(\"#tabs\").tabs({ select: function (event, ui) {\n";
        scriptStr += "                $(\"#" + hidCurrentTab.ClientID + "\").val(ui.index);\n";
        scriptStr += "            }\n";
        scriptStr += "                , selected: tabIndex\n";
        scriptStr += "            });\n";
        scriptStr += "        });\n";
        scriptStr += "        //hover states on the static widgets\n";
        scriptStr += "        $('#dialog_link, ul#icons li').hover(\n";
        scriptStr += "                    function () { $(this).addClass('ui-state-hover'); },\n";
        scriptStr += "                    function () { $(this).removeClass('ui-state-hover'); }\n";
        scriptStr += "    );\n";
        scriptStr += "    });\n";
        this.ClientScript.RegisterStartupScript(this.GetType(), "scriptTabs", scriptStr, true);
    }

其實就只是一模一樣的東西改在後台寫而已，有些人覺得前後要分清楚所以有兩種做法。(我自己是第二種，公司規定)
上面的涵式在Page_Load呼叫

    protected void Page_Load(object sender, EventArgs e)
    {
        registerScriptTabs();
        if (!IsPostBack)
        {
            ImgBtnBasic_Click(null, null);
        }
    }

這樣就全部完成了!
成品如圖：

Leo's Salary Thief Plaza

2012年10月29日星期一

讓jQuery不重置停留在使用者選的那一頁

沒有留言:

張貼留言

2012年10月29日 星期一

讓jQuery不重置停留在使用者選的那一頁

沒有留言:

張貼留言

2012年10月29日星期一