jQuery Mobile Sliderが間違ったコードを出力しています

深みのある画像に接続されているスライダーがあるページがあります。そのスライダはjQueryスライダのプラグインを使用しています。このスライダをモバイルフレンドリーにしたいと思います。静的なモバイルスライダーを追加するだけで始めました。私はjQueryのモバイル用CSSやJSを追加し、そのようにinput[type="range"]を挿入：jQuery Mobile Sliderが間違ったコードを出力しています

<input type="range" id="zoomRange" value="25" min="0" max="100" />

私はそれが絶対に必要というわけではないことがわかりましたので、私はラベルを追加しませんでした。次のようにとDOMで出力されたコードは、次のとおりです。

<input type="number" data-type="range" max="100" min="0" value="25" id="zoomRange" 
     class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-input-text ui-body-c ui-shadow-inset"> 
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-link" style="left: 0%;"></a>

はここで何が起こっているかを熟知誰ですか？

出典

2012-01-06 user1135254

jQueryMobileドキュメント

から、フレームワークは、付属の入力

とスライダーにそれらを強化する自動タイプ=「範囲」を持つすべての入力要素を見つけ、ますので、あなたが見るものあなたはそのスピナーを手に入れて、スライダーだけを持っていたいと思っています。あなたは2つの方法でそれを行うことができます。

1）inputタイプのdata-role="none"を使用してください。これはjQuery Mobileフレームワークに入力タイプを強化しないように指示し、プレーンなHTMLスライダのように見えます。

2）CSSを操作してスピナーを非表示にします。

私は考えていません。 2あなたのためのトリックを行います。

ここでは、私が何を話しているかを示すサンプルコードを示します。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
    "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" type="text/css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"> 
</script> 
    <script type="text/javascript" src= 
    "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"> 
</script> 
    <style type="text/css"> 
     #slider-2{ 
     display:none; 
     } 
    </style> 
</head> 

<body> 
    <div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Page1</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="content"> 
     <div data-role="fieldcontain"> 
     <label for="slider-0">jQueryMobile Default</label> <input type="range" name= 
     "slider" id="slider-0" value="25" min="0" max="100"> 
     </div> 

     <div data-role="fieldcontain"> 
     <label for="slider-1">data-role='none'</label> <input type="range" name="slider" 
     id="slider-1" value="25" min="0" max="100" data-role="none"> 
     </div> 

     <div data-role="fieldcontain"> 
     <label for="slider-2">Spinner hidden</label> <input type="range" name="slider" 
     id="slider-2" value="25" min="0" max="100"> 
     </div> 
    </div><!-- /content --> 
    </div><!-- /page --> 
</body> 
</html>

ここでデモ - http://jsfiddle.net/2SXV6/

ことが

を助けるなら、私を知ってみましょう

出典

2012-01-07 17:19:47 user700284

jQuery Mobile Sliderが間違ったコードを出力しています

答えて

関連する問題