1 files changed, 54 insertions, 0 deletions
diff --git a/demos/functional/templates/ui.tabs.html b/demos/functional/templates/ui.tabs.html
new file mode 100644
index 000000000..902ae91bb
--- /dev/null
+++ b/demos/functional/templates/ui.tabs.html
@@ -0,0 +1,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>
+\ No newline at end of file