<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<title>jquery tab TAB Toggle Instance </title>
<link href= "img/saas.css Tutorial" rel= "stylesheet" type= "Text/css"/>
<script src= "Js/jquery.js" ></script>
<script src= "Js/jquery.tab0.9.js" ></script>
<script language= "Web Effects" src= "Js/jquery.mask.js" ></script>
<body>
Function Description:
1. Support Custom HTML content
2. Support Ajax Loading content
3. Callback function
<br/>
Slide Demo
<div id= "tab_list" style= "width:700px" >
</div>
Common Demo
<div id= "Tab_list_n" >
</div>
Ajax Demo
<div id= "Tab_list_a" >
</div>
Dynamic add auto Show slide demo <input type= "button" id= "AddTab" value= "Add" >
<div id= "Tab_list_add" >
</div>
Dynamic add does not show slide demo <input type= "button" id= "ADDTABN" value= "Add" >
<div id= "TAB_LIST_ADDN" >
</div>
</body>
<script>
$ (function () {
$ ("#tab_list"). Tab ({items:[
{title: ' Tab1 ', Closed:true,icon: ', HTML: ' Test1 ', load: ', Callback:function () {}},
{title: ' tab22222222 ', Closed:true,icon: ', HTML: ' Test2 ', load: ', Callback:function () {alert (' click TaB2 ');},
{title: ' Tab3 ', Closed:true,icon: ', HTML: ' Test3 ', load: ', Callback:function () {}},
{title: ' Tab4 ', Closed:true,icon: ', HTML: ' Test4 ', load: ', Callback:function () {}},
{title: ' Tab5 ', Closed:true,icon: ', HTML: ' Test5 ', load: ', Callback:function () {}},
{title: ' Tab6 ', Closed:true,icon: ', HTML: ' Test6 ', load: ', Callback:function () {}},
{title: ' Tab7 ', Closed:true,icon: ', HTML: ' Test7 ', load: ', Callback:function () {}},
{title: ' Tab8 ', Closed:true,icon: ', HTML: ' Test8 ', load: ', Callback:function () {}},
{title: ' Tab9 ', Closed:true,icon: ', HTML: ' Test9 ', load: ', Callback:function () {}},
{title: ' Tab10 ', Closed:true,icon: ', HTML: ' test10 ', load: ', Callback:function () {}},
{title: ' Tab11 ', Closed:true,icon: ', HTML: ' test11 ', load: ', Callback:function () {}},
{title: ' Tab12 ', Closed:true,icon: ', HTML: ' test12 ', load: ', Callback:function () {}},
{title: ' Tab13 ', Closed:true,icon: ', HTML: ' test13 ', load: ', Callback:function () {}},
{title: ' Tab14 ', Closed:true,icon: ', HTML: ' test14 ', load: ', Callback:function () {}},
{title: ' Tab15 ', Closed:true,icon: ', HTML: ' test15 ', load: ', Callback:function () {}},
{title: ' Tab16 ', Closed:true,icon: ', HTML: ' test16 ', load: ', Callback:function () {}}
],
WIDTH:500,
HEIGHT:100,
TABCONTENTWIDTH:500,
TABWIDTH:66,
TABHEIGHT:25,
Tabhtml: ' Generally used for description of the area });
$ ("#tab_list_n"). Tab ({items:[
{title: ' Tab1 ', Closed:true,icon: ', HTML: ' Test1 ', load: ', Callback:function () {}},
{title: ' TaB2 ', Closed:true,icon: ', HTML: ' Test2 ', load: ', Callback:function () {}},
{title: ' Tab3 ', Closed:true,icon: ', HTML: ' Test3 ', load: ', Callback:function () {}},
{title: ' Tab13 ', Closed:true,icon: ', HTML: ' test13 ', load: ', Callback:function () {}},
{title: ' Tab14 ', Closed:true,icon: ', HTML: ' test14 ', load: ', Callback:function () {}},
{title: ' Tab15 ', Closed:true,icon: ', HTML: ' test15 ', load: ', Callback:function () {}},
{title: ' Tab16 ', Closed:true,icon: ', HTML: ' test16 ', load: ', Callback:function () {}}
],
Tabscroll:false,
WIDTH:500,
HEIGHT:100,
tabcontentwidth:498,
TABWIDTH:66,
Tabheight:25
});
$ ("#tab_list_a"). Tab ({items:[
{title: ' Tab1 ', Closed:true,icon: ', HTML: ', Load: ' 1.html ', Callback:function () {}},
{title: ' TaB2 ', Closed:true,icon: ', HTML: ' Test2 ', load: ', Callback:function () {}},
{title: ' Tab3 ', Closed:true,icon: ', HTML: ' Test3 ', load: ', Callback:function () {}},
{title: ' Tab13 ', Closed:true,icon: ', HTML: ' test13 ', load: ', Callback:function () {}},
{title: ' Tab14 ', Closed:true,icon: ', HTML: ' test14 ', load: ', Callback:function () {}},
{title: ' Tab15 ', Closed:true,icon: ', HTML: ' test15 ', load: ', Callback:function () {}},
{title: ' Tab16 ', Closed:true,icon: ', HTML: ' test16 ', load: ', Callback:function () {}}
],
Tabscroll:false,
WIDTH:500,
HEIGHT:100,
tabcontentwidth:498,
TABWIDTH:66,
Tabheight:25
});
var o=$ ("#tab_list_add"). Tab ({items:[
{title: ' Tab1 ', Closed:true,icon: ', HTML: ', Load: ' 1.html ', Callback:function () {}}
],
Tabscroll:false,
WIDTH:500,
HEIGHT:100,
tabcontentwidth:498,
TABWIDTH:66,
Tabheight:25
});
$ (' #addtab '). Click (function () {
O.newtab ({title: ' Tab1 ', Closed:true,icon: ', HTML: ', Load: ' 1.html ', Callback:function () {}});
});
var oo=$ ("#tab_list_addn"). Tab ({items:[
{title: ' Tab1 ', Closed:true,icon: ', HTML: ', Load: ' 1.html ', Callback:function () {}}
],
Tabscroll:false,
WIDTH:500,
HEIGHT:100,
tabcontentwidth:498,
TABWIDTH:66,
Tabheight:25
});
$ (' #addtabn '). Click (function () {
Oo.addtab ({title: ' Tab1 ', Closed:true,icon: ', HTML: ', Load: ' 1.html ', Callback:function () {}});
});
});
</script>