滑动时隐藏Jquery UI滑块_Jquery_User Interface_Slider

滑动时隐藏Jquery UI滑块

jquery user-interface

滑动时隐藏Jquery UI滑块,jquery,user-interface,slider,Jquery,User Interface,Slider,在下面给出的HTML代码中 <div id="slider1" class="slide1" style="overflow: visible !important; position: absolute !important; margin-top: 0px !important;"></div> slide.css .slide1 { float: left; left: 600px; height: 10px; width: 150

在下面给出的HTML代码中

<div id="slider1" class="slide1" style="overflow: visible !important; position: absolute !important; margin-top: 0px !important;"></div>

slide.css

.slide1 {
    float: left;
    left: 600px;
    height: 10px;
    width: 150px;
    top: 167px;
    z-index: 2;
}

但我甚至没有得到这个滑块，只是在滑块初始化调用之前得到。当我们使用jquery调用silder时，由于自动创建div标记并将其样式设置为

overflow:hidden

，滑块将隐藏。我怎样才能避免这种情况

提前感谢和问候

你说的“第一次”是什么意思

我已经将您的HTML/CSS/JS放到了一把小提琴上，它似乎工作正常：

在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>


-JSFIDLE演示
.幻灯片1{
浮动：左；
左：600px；
高度：10px；
宽度：150px；
顶部：167px；
z指数：2；
}
//

实际上，此滑块要放在jequery对话框中，因此当单击滑块时，当位置：绝对时，它将隐藏在帧中；当位置：固定时，它将平稳工作，bt我需要绝对位置，当我在我的网站上尝试时，它没有显示..你能将它显示为任何其他类型吗？请帮助我在调用slider（）时避免自动创建div

<!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>