Skip to content
Permalink
Browse files

Slider: Update demos to use AMD

Ref #10119
  • Loading branch information...
arschmitz committed Jul 1, 2015
1 parent 0e8d871 commit 78364a2428d56c4867a65c9715f33bbde7459e18
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Colorpicker</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#red, #green, #blue {
@@ -31,28 +26,29 @@
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
</style>
<script>
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "#swatch" ).css( "background-color", "#" + hex );
}
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "#swatch" ).css( "background-color", "#" + hex );
}
$( "#red, #green, #blue" ).slider({
orientation: "horizontal",
range: "min",
@@ -64,7 +60,6 @@
$( "#red" ).slider( "value", 255 );
$( "#green" ).slider( "value", 140 );
$( "#blue" ).slider( "value", 60 );
});
</script>
</head>
<body class="ui-widget-content" style="border:0;">
@@ -4,16 +4,10 @@
<meta charset="utf-8" >
<title>jQuery UI Slider - 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/mouse.js"></script>
<script src="../../ui/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider" ).slider();
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Slider bound to select</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
@@ -25,7 +20,6 @@
$( "#minbeds" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
</script>
</head>
<body>
@@ -15,8 +15,8 @@
height:120px; float:left; margin:15px
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
// setup master volume
$( "#master" ).slider({
value: 60,
@@ -35,7 +35,6 @@
orientation: "vertical"
});
});
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical range slider</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-range" ).slider({
orientation: "vertical",
range: true,
@@ -22,7 +17,6 @@
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-range" ).slider({
range: true,
min: 0,
@@ -23,7 +18,6 @@
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed maximum</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
@@ -22,7 +17,6 @@
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed minimum</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
@@ -22,7 +17,6 @@
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical slider</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
@@ -23,7 +18,6 @@
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
</head>
<body>
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Snap to increments</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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider" ).slider({
value:100,
min: 0,
@@ -22,7 +17,6 @@
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>

0 comments on commit 78364a2

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.