Tabs: Update demos to use AMD

Ref #10119
This commit is contained in:
Alexander Schmitz 2015-06-30 23:45:49 -04:00
parent 48f31d7dd0
commit d1c0e38185
7 changed files with 14 additions and 54 deletions

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
@ -20,7 +16,6 @@
});
}
});
});
</script>
</head>
<body>

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#tabs" ).tabs({
collapsible: true
});
});
</script>
</head>
<body>

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#tabs" ).tabs();
});
</script>
</head>
<body>

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<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>

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
</head>
<body>

View File

@ -4,15 +4,9 @@
<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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="sortable">
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
@ -20,7 +14,6 @@
tabs.tabs( "refresh" );
}
});
});
</script>
</head>
<body>

View File

@ -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>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<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; }