这是代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Slider </title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css">
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}
/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}
/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
}
/*Result div where the slider value is displayed*/
#slider-result {
font-size:20px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}
a {
outline:none;
-moz-outline-style:none;
}
</style>
</head>
<body>
<div class="slider"></div>
<div class="slider1"></div>
<div class="slider2"></div>
<div id="slider-result" value="poor">Poor</div>
<div id="slider-result1" value="poor">Poor</div>
<input type="hidden" value="poor" id="hidden"/>
<input type="hidden1" value="poor" id="hidden"/>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 4,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
if(ui.value ==0)
$( "#slider-result" ).html( "Poor");
else if(ui.value == 1)
$( "#slider-result" ).html( "Average");
else if(ui.value == 2)
$( "#slider-result" ).html( "Good");
else if(ui.value == 3)
$( "#slider-result" ).html( " Very Good");
else if(ui.value == 4)
$( "#slider-result" ).html( "Excellent");
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
</script>
</body>
</html>
如何获取所选滑块的值?因为当我使用值时隐藏它
var currentValue = $('#hidden').val();
,我得到一个对象作为返回值。我无法获得这个价值......任何帮助,还想在<div class="slider1"></div>
创建一个新的相同滑块来制作它?
有什么想法吗?
答案 0 :(得分:0)
不完全确定第二部分。你能更清楚一点吗?
在值位上,您可以尝试$(选择器).attr('value')。
答案 1 :(得分:0)
您可以使用clone()克隆jquery中的元素,例如
$( “#什么”)。克隆()。appendTo( “#集装箱”)
将克隆id为'whatever'的元素并将其插入元素'container'的末尾(例如,可以是<div
&gt;)