diff options
Diffstat (limited to 'demos/functional/templates/ui.tabs.php')
| -rw-r--r-- | demos/functional/templates/ui.tabs.php | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/demos/functional/templates/ui.tabs.php b/demos/functional/templates/ui.tabs.php new file mode 100644 index 000000000..cf4e89e81 --- /dev/null +++ b/demos/functional/templates/ui.tabs.php @@ -0,0 +1,88 @@ +<style> + +#divTabs, #divAddTabs { + height:30px; +} + +</style> + +<div id="containerDemo"></div> + +<script type="text/javascript"> + + var model = { + + renderAt: '#containerDemo', + + title: 'Tabs Demos', + + demos: [ + + { + title: 'Simple Tabs', + html: ['<div><ul id="divTabs" class="flora">', + '<li><a href="#tabs-fragment-1"><span>One</span></a></li>', + '<li><a href="#tabs-fragment-2"><span>Two</span></a></li>', + '<li><a href="#tabs-fragment-3"><span>Three</span></a></li>', + '</ul>', + '<div id="tabs-fragment-1">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div>', + '<div id="tabs-fragment-2">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div>', + '<div id="tabs-fragment-3">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div></div>'].join(''), + destroy: '$("#divTabs").tabs("destroy");', + + options: [ + { desc: 'Simple Tabs', source: '$("#divTabs").tabs();' }, + { desc: 'Simple Cloned Tabs', source: '$("#divTabs").clone().tabs();' }, + { desc: 'Simple Empty Tabs', source: '$("#divTabs").tabs();' }, + { desc: 'Simple Detached Tabs', source: '$("<div/>").tabs();' } + ] + }, + { + title: 'Add A Tab', + html: ['<div><ul id="divAddTabs" class="flora">', + '<li><a href="#addtabs-fragment-1"><span>One</span></a></li>', + '<li><a href="#addtabs-fragment-2"><span>Two</span></a></li>', + '<li><a href="#addtabs-fragment-3"><span>Three</span></a></li>', + '</ul>', + '<div id="addtabs-fragment-1">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div>', + '<div id="addtabs-fragment-2">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div>', + '<div id="addtabs-fragment-3">', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', + '</div></div>'].join(''), + destroy: '$("#divAddTabs").tabs("destroy");', + + options: [ + { desc: 'Simple Dialog', source: '$("#divAddTabs").tabs("add", "#", "Added");' } + ] + }, + ] + + }; + + $(window).load(function(){ + + uiRenderDemo(model); + + }); + +</script> |