滑动时隐藏的Jquery UI滑块

时间:2012-11-01 09:28:28

标签: jquery user-interface slider

在这样的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,滑块将隐藏。我怎么能避免这个?

提前致谢和问候

1 个答案:

答案 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>