Selectmenu: Update demos to use AMD

Ref #10119
This commit is contained in:
Alexander Schmitz 2015-06-30 22:53:45 -04:00
parent 91ee61e780
commit 0e8d871a26
3 changed files with 34 additions and 55 deletions

View File

@ -5,15 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</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/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
@ -47,7 +41,6 @@
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
});
</script>
<style>
h2 {

View File

@ -5,27 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - 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/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
$( "#salutation" ).selectmenu();
});
</script>
<style>
fieldset {
border: 0;
@ -38,6 +18,19 @@
height: 200px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
$( "#salutation" ).selectmenu();
</script>
</head>
<body>

View File

@ -5,33 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Product Selection</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/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var circle = $( "#circle" );
$( "#radius" ).selectmenu({
change: function( event, data ) {
circle.css({
width: data.item.value,
height: data.item.value
});
}
});
$( "#color" ).selectmenu({
change: function( event, data ) {
circle.css( "background", data.item.value );
}
});
});
</script>
<style>
fieldset {
border: 0;
@ -50,6 +24,25 @@
height: 150px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var circle = $( "#circle" );
$( "#radius" ).selectmenu({
change: function( event, data ) {
circle.css({
width: data.item.value,
height: data.item.value
});
}
});
$( "#color" ).selectmenu({
change: function( event, data ) {
circle.css( "background", data.item.value );
}
});
</script>
</head>
<body>