Jquery Tools -- Tabs

Jquery
Tools-a jquery-based UI presentation framework.

This framework provides tabs (Tab/TAB) overlay (overlay), tooltip (prompt box), scrollable (scroll Information bar), expose (highlighted), and flahembed (video playback embedded) six Main functions (called the six tools on its official website), each of which has its own independent support package, without interfering with each other, users can download data as needed.

Mainly speaking: tabs

1. js and css

View Code

1 <script src="/Content/javascript/jQuery/jQueryUI/ui/jquery-ui.js" type="text/javascript"></script>
2 <link href="/Content/javascript/jQuery/jQueryUI/themes/cupertino/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
3 <script src="/Content/javascript/jQuery/jQueryUI/ui/jquery.ui.tabs.js" type="text/javascript"></script>

Second, the redirection address of different tabs is displayed on the page.

<Div id = "tabs">
<Ul>
<Li> <a href = "aaa/1. aspx? UserId = Id & userName = name "> User Basic Information 1 </a> </li>
<Li> <a href = "aaa/2. aspx? UserId = Id & userName = name "> basic user information 2 </a> </li>

<Li> <a href = "aaa/3. aspx? UserId = Id & userName = name "> basic user information 3 </a> </li>

<Li> <a href = "aaa/4. aspx? UserId = Id & userName = name "> User basic information 4 </a> </li>
</Ul>

</Div>

Third:

Script Code

1 <script type = "text/javascript">
2 $ (function (){
3
4 var tab = $ Request. tab;
5 $ ("# tabs"). tabs ('option', 'cache', false); // do not read from the cache
6 $ ("# tabs"). tabs ('option', 'ajaxoptions', {async: false}); // synchronous
7
8 $ ("# tabs"). tabs ({
9 load: function (event, ui ){
10 $ ('A', ui. panel). click (function (){//
11 // set the label element corresponding to the tab. The default value is "a", which can also be set to "li", which is equivalent to the jquery selector.
12 $ (ui. panel). load (this. href); // load the corresponding Tab
13 return false;
14 });
15}
16 });
17
18
19 $ ("# tabs"). tabs ('select', tab)
20 if ("userId" = "") {// if usrid is empty, other tabs are not enabled. The default value is 0.
21 $ ("# tabs"). tabs ({disabled: [1, 2, 3, 4]});
22}
23
24
25 });
26
27 </script>