mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
parent
0e8d871a26
commit
78364a2428
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user