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屋！
查看全文
