jQuery - 滑块不工作 [英] jQuery - Slider not working
本文介绍了jQuery - 滑块不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我进入控制台并没有(错误)消息...
帮助?
<!DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxml:lang =enlang =en>
< head>
< meta http-equiv =content-typecontent =text / html; charset = iso-8859-1/>
< title> Sintítulo1< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js><<< ; /脚本>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js>< /脚本>
< script type =text / javascript>
$(.slider).slider({
animate:true,
range:min,
value:50,
min:0,
max:100,
step:1,
slide:function(event,ui){
$(#slider-result)。html(ui.value);
}
});< / script>
< style type =text / css>
<! -
body {
background:#CECECE!important;
padding:10px;
}
/ *滑块背景* /
.slider {
width:230px;
height:10px;
背景:#737373;
职位:亲属;
保证金:0;
padding:0 10px;
}
/ *滑块按钮的样式* /
.ui-slider-handle {
width:16px;
height:16px;
位置:绝对;
top:-3px;
margin-left:-12px;
z-index:200;
背景:#404040;
概述:无;
}
/ *这是填充栏颜色* /
.ui-widget-header {
background:#ABABAB;
height:8px;
left:1px;
top:1px;
位置:绝对;
}
- >
< / style>
< / head>
< body>
< div class =slider>< / div>
< div id =slider-result> 50< / div>
< / body>
< / html>
显然,这是一个可用的小提琴。 http://jsfiddle.net/D45mp/
解决方案
当然,只需在< / body>< / html>
之前的文档末尾添加脚本,就像这样
< html>
< body>
// Div跨度和其他东西
< script type =text / javascript>
$(。slider)。slider({
animate:true,
range:min,
value:50,
min:0,
max:100,
step:1,
slide:function(event,ui){
$(#slider-result)。html(ui.value);
}
});< / script>
< / body>
< / html>
或
写入 document.ready()
脚本块
Trying to get a simple slider working... nothing is happening. I do this code below in JSFiddle (jquery 1.7.2, jQueryUI 1.8.1) and it works.. however... in web page.. it does not. It is simple a slider without its handle.
I go into console and there is no (error) message...
Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Sin título 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$( ".slider" ).slider({
animate: true,
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$("#slider-result").html( ui.value );
}
});</script>
<style type="text/css">
<!--
body{
background: #CECECE !important;
padding:10px;
}
/*the slider background*/
.slider {
width:230px;
height:10px;
background: #737373;
position:relative;
margin:0;
padding:0 10px;
}
/*Style for the slider button*/
.ui-slider-handle {
width:16px;
height:16px;
position:absolute;
top:-3px;
margin-left:-12px;
z-index:200;
background:#404040;
outline:none;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:#ABABAB;
height:8px;
left:1px;
top:1px;
position:absolute;
}
-->
</style>
</head>
<body>
<div class="slider"></div>
<div id="slider-result">50</div>
</body>
</html>
Here's a working fiddle apparently. http://jsfiddle.net/D45mp/
解决方案
Just Add your script at the end of the document before </body></html>
of course, like this
<html>
<body>
// Divs spans and other stuff
<script type="text/javascript">
$(".slider").slider({
animate: true,
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
$("#slider-result").html(ui.value);
}
});</script>
</body>
</html>
Or
write that inside a document.ready()
script block
这篇关于jQuery - 滑块不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文