2

ruby on rails アプリで jQuery スライダーを使用しています。問題は、スライダー ボタンをドラッグできないことですが、スライダー内の任意の場所をクリックすると正常に移動します。

ここに画像の説明を入力

ファイルを閲覧する

<div id="slider"></div>
<%= text_field_tag :search_radius, params[:search_radius], placeholder: "2 miles", class: "search_radius" %>

jsファイル

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    },
  change: function() {
   $('input.search_radius').val( $( "#slider" ).slider( "value"));
    },
        create: function() {
    $('input.search_radius').val( $( "#slider" ).slider( ""));
  }
  });
$(".search_radius").val($("#slider").slider("value"));

css ファイル

#slider {
 width:100px ;
 height:11px;
 background:url(slider/slider-bg.png);
 margin-left: 10px;
 position:relative;
 padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
 width:24px !important;
 height:24px !important;
 position:absolute !important;
 top:-7px !important;
 margin-left:-12px !important;
 z-index:200 !important;
 background:url("slider/slider-button.png") !important;
 border: none !important;
 display: block !important;
}

/*Result div where the slider value is displayed*/
#search_radius {
 font-size:20px;
 height:$searchInputsHeight;
 font-family:Arial, Helvetica, sans-serif;
 color:green;
 width:80px;
 text-align:center;
 text-shadow:0 1px 1px #000;
 font-weight:700;
 display:inline;
}

アプリケーション.css

 *= require jquery.ui.slider

アプリケーション.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.slider
4

2 に答える 2

1

うーん、一見、すべてが良さそうに見えます。削除してみてください-次のように変更して作成してください：

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    }
  });
$(".search_radius").val($("#slider").slider("value"));
于 2013-04-02T12:53:40.467 に答える
1

Firebug でコンソールを見て、javascript が正常に動作しているかどうかを確認してみましたか?

z-indexの問題のように聞こえますが、すでに対処しようとしているようです。また、firebug の「要素の検査」ツールを使用して、スライダーの上の z-index に何もないことを確認してみてください。

可能であれば、例へのリンクを送ってください。見てみます

于 2013-04-02T12:16:52.037 に答える