Tabs: Update demos to use AMD

Ref #10119
jquery · Jul 21, 2015 · d1c0e38 · d1c0e38
1 parent 48f31d7
commit d1c0e38
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 54 deletions.
diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html
@@ -4,13 +4,9 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Content via Ajax</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js">
 		$( "#tabs" ).tabs({
 			beforeLoad: function( event, ui ) {
 				ui.jqXHR.fail(function() {
@@ -20,7 +16,6 @@
 				});
 			}
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html
@@ -4,17 +4,12 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Collapse content</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js">
 		$( "#tabs" ).tabs({
 			collapsible: true
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/default.html b/demos/tabs/default.html
@@ -4,15 +4,10 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Default functionality</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js">
 		$( "#tabs" ).tabs();
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html
@@ -4,13 +4,6 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Simple manipulation</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/position.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/button.js"></script>
-	<script src="../../ui/tabs.js"></script>
-	<script src="../../ui/dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
 	#dialog label, #dialog input { display:block; }
@@ -20,8 +13,8 @@
 	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
 	#add_tab { cursor: pointer; }
 	</style>
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js" data-modules="dialog">
 		var tabTitle = $( "#tab_title" ),
 			tabContent = $( "#tab_content" ),
 			tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
@@ -88,7 +81,6 @@
 				tabs.tabs( "refresh" );
 			}
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html
@@ -4,17 +4,12 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Open on mouseover</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js">
 		$( "#tabs" ).tabs({
 			event: "mouseover"
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html
@@ -4,23 +4,16 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Sortable</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
-	<script src="../../ui/sortable.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js" data-modules="sortable">
 		var tabs = $( "#tabs" ).tabs();
 		tabs.find( ".ui-tabs-nav" ).sortable({
 			axis: "x",
 			stop: function() {
 				tabs.tabs( "refresh" );
 			}
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html
@@ -4,16 +4,11 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Tabs - Vertical Tabs functionality</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
-	<script src="../../external/jquery/jquery.js"></script>
-	<script src="../../ui/core.js"></script>
-	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/tabs.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<script>
+	<script src="../../external/requirejs/require.js"></script>
-	$(function() {
+	<script src="../bootstrap.js">
 		$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
 		$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
-	});
 	</script>
 	<style>
 	.ui-tabs-vertical { width: 55em; }