2

このように指定されたHTMLコードでは

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

スライダー.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);
    }
});

スライド.css

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

しかし、私はこのスライダーさえ取得せず、Slider init 呼び出しの前に取得するだけでした。jquery を使用して silder を呼び出すと、自動的に div タグが作成され、そのスタイルが に設定されるため、スライダーが非表示になりますoverflow: hidden。どうすればこれを回避できますか?

よろしくお願いします

4

1 に答える 1

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>
于 2012-11-01T10:17:21.127 に答える