1


jQueryスライダーの見栄えを良くするためにいくつかのスタイルを設定しました。ui-slider-handlerに使用される画像。私はIEとグーグルクロームでうまく働きます。しかし、SafariとFirefoxでは正しく機能しません。
私はそれをいじってみて、さまざまなブラウザでいじられた出力をチェックしました。それでうまくいきます。

デスクトップ（SafariとFirefoxのブラウザ）で同じソースコードを実行すると、なぜ機能しないのかわかりません。スクリプトが間違った場所で呼び出されている可能性がありますが、別の場所でスクリプトを呼び出そうとしました。
さまざまなブラウザでの出力****GoogleChromeFirefoxSafari
 ここに画像の説明を入力してください コード はここに画像の説明を入力してください 次 ここに画像の説明を入力してください のとおりです。

    <!DOCTYPE HTML PUBLIC>
    <html>
     <head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />

      <style>

      .vUiSliderWrapper{
        overflow:hidden;
      }
      .vUiSlider{
        height:7px;
        background-image:-ms-linear-gradient(top, #b9b9b9,#e0e0e0);
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#b9b9b9",endColorStr="#e0e0e0");
        background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#e0e0e0)) !important; 
        background: -moz-linear-gradient(top,#b9b9b9,#e0e0e0) !important;
      }
      .vUiSlider .ui-slider-handle{
        border:none;
        background:url('http://s14.postimage.org/wo9hknojx/slider_handles.png') 0 -27px no-repeat;
        width:20px;
        height:17px;  
        outline: none;
      }
      .vUiSlider .ui-slider-handle:hover{
        background-position:0 -4px;
       }
      .vUiSlider .ui-slider-range{ 
        border-radius:4px;
        background-image:-ms-linear-gradient(top, #04adff,#0083c1);
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#04adff",endColorStr="#0083c1");
        background: -webkit-gradient(linear, left top, left bottom, from(#04adff), to(#0083c1)) !important; 
        background: -moz-linear-gradient(top,#04adff,#0083c1) !important;
      }

      #sld1 .vUiSlider{
       width:200px;
      }
      </style>
     </head>
    <body>
      <span id="sld1" class="vUiSliderWrapper">
       <div  class="vUiSlider"></div>
       <input type="text" role="data"/>
      </span>

     <span id="sld2" class="vUiSliderWrapper">
      <div class="vUiSlider"></div>
      <input type="text" role="data"/>
     </span>

      <script>
       $(document).ready(function(){
           $('.vUiSliderWrapper .vUiSlider').slider({
             range: "min",
             min:0,
             max:100,
             value:3,
             animate: true,
             slide:function(event, ui){
                $(this).siblings('input[role="data"]').val(ui.value);
             }
           });
       });

      </script>
     </body>

    </html>
4

1 に答える 1

0

scriptとstyles sheetを新しいバージョンのファイルに置き換えることで、この問題を解決できます。しかし、私はまだそれがどのように機能するのか、そしてファイルが古いバージョンであるかどうか疑問に思っていIEますGoogle Chrome。

于 2013-03-15T09:59:15.960 に答える