1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<script type="text/javascript">
var model = {
renderAt: '#containerDemo',
title: 'Tabs Demos',
demos: [
{
title: 'Simple Tabs',
desc: 'With few lines of code you could make tabs. You can try more options on the fly!',
html: { url: 'templates/ui.tabs.ex1.html' },
destroy: '$("tabsEx1 > ul").tabs("destroy");',
options: [
{
desc: 'First tab active by default',
source: '$("#tabsEx1 > ul").tabs();'
},
{
desc: 'Start With Custom Tab',
source: '$("#tabsEx1 > ul").tabs({selected:1});'
},
{
desc: 'Use a slide effect to switch tabs',
source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });'
},
{
desc: 'Use a fade effect to switch tabs',
source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });'
},
{
desc: 'Use a combined slide and fade effect to switch tabs',
source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });'
},
{
desc: 'Define event to switch tabs (mouseover)',
source: '$("#tabsEx1 > ul").tabs({ event: "mouseover" });'
}
]
}
]
};
$(function(){
uiRenderDemo(model);
});
</script>
|
