1

いくつかのボタンとスライダーを含む単純な jquery モバイル サイトがあります。ボタンは水平方向のスペース全体を埋めるように伸びますが、スライダーはそうではありません。とてもゴツい感じです。jquery-mobile スライダーをだまして水平スペース全体を埋める方法はありますか?

<div data-role="page">
    <div data-role="header">
        <h1>header</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="content" data-position="fixed" data-theme="a">
        <form>
           <input type="range" name="slider" id="slider-0" value="50" min="0" max="100"/>
        </form>
       <a id="button-1" href="#" data-role="button">Button</a>
       <a id="button-2" href="#" data-role="button">Button</a>
    </div>
</div>

補足: このコードには、data-role="content" を持つ 2 つの div が含まれています。それは私を困らせるつもりですか？jquery-mobile はスライダーをフッターに配置するのが好きではありませんが、スライダーが表示領域の下部に固定されたフッターのように機能する必要があります。

4

1 に答える 1

2

一貫した画面サイズをターゲットにしている場合、これは非常に簡単です。JQM 1.1RC2 のデフォルトでは、スライダー バーに 65% を使用しています。ただし、スライダーの前の入力フィールドは 50px に固定されています。.ui-slider width を試してみて、より近い値を取得してください。ただし、画面サイズによって異なるように見えるため、注意してください。

div.ui-slider{width:80%;}

たぶん、80%くらいの方がうまくいくでしょう。2番目の部分については、テストしてお知らせください。

于 2012-04-12T05:06:26.313 に答える