在这样的HTML代码中
<div id="slider1" class="slide1" style="overflow: visible !important; position: absolute !important; margin-top: 0px !important;"></div>
slider.js
$("#slider1").slider({
min: 0,
max: 100,
step: 10,
value: 50,
slide: function (event, ui) {
$('#high').html(ui.value);
},
change: function (event, ui) {
$('#high').attr('value', ui.value);
}
});
slide.css
.slide1 {
float: left;
left: 600px;
height: 10px;
width: 150px;
top: 167px;
z-index: 2;
}
但是我甚至没有得到这个滑块,只能在Slider init调用之前获得。当我们使用jquery调用silder时,由于自动创建div标签并将其样式设置为overflow: hidden
,滑块将隐藏。我怎么能避免这个?
提前致谢和问候
答案 0 :(得分:0)
你是怎么说'第一次'。
我已将HTML / CSS / JS放入小提琴中,它似乎正常工作:http://jsfiddle.net/2pcFh/
下面列出的文件在Firefox 13.0.1
中为我本地工作<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script type='text/javascript' src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style type='text/css'>
.slide1 {
float: left;
left: 600px;
height: 10px;
width: 150px;
top: 167px;
z - index: 2;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#slider1").slider({
min: 0,
max: 100,
step: 10,
value: 50,
slide: function(event, ui) {
$('#high').html(ui.value);
},
change: function(event, ui) {
$('#high').attr('value', ui.value);
}
});
});//]]>
</script>
</head>
<body>
<div id="slider1" class="slide1" style="overflow: visible !important; position: absolute !important; margin-top: 0px !important;"></div>
</body>
</html>