0

モバイル アプリで Phonegap を使用している jquery モバイル フォーム要素のサイズを変更したいと考えています。ここで、画面サイズに応じた数値またはパーセンテージに基づいて、サイズを変更してフォーム要素の高さを増やしたいと考えています。私はjquery Mobileが幅を単独で処理することを知っていますが、JSを介して高さを指定して、すべてのフォーム要素の高さがその特定の比率/パーセンテージで増加するようにしたいと考えています。

JQuery Mobile CSS を変更できることは知っていますが、一度 CSS を設定するのではなく、実行時に JS を使用して高さを変更したいと考えています。それで、これを行う最善の方法は何ですか？

私は実際に画面サイズを取得し、すべての要素に割合に応じてサイズを指定したいと考えています。jQuery Mobile CSS を見ると、設定する必要があるものがたくさんありますが、設定されるかどうかはまだわかりません。CSS全体を変更または書き直さずにそれを行う方法はありますか? または、カスタム CSS とフォーム要素を記述する必要があるだけですか?

任意の提案と努力をいただければ幸いです。

4

1 に答える 1

0

入力要素を使用してこれを示すフィドルを次に示します: http://jsfiddle.net/ezanker/akgEa/

この例では、テキスト型の 3 つの入力と、クリックするたびに高さが 2 倍になるボタンがあります。ボタンは各入力を繰り返し処理し、現在の高さを取得してから、高さを現在の 2 倍に設定します。

<div data-role="fieldcontain">
    <label for="textinput-fc1">Text Input:</label>
    <input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
    <label for="textinput-fc2">Text Input:</label>
    <input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
    <div data-role="fieldcontain">
    <label for="textinput-fc3">Text Input:</label>
        <input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>

<input id="btnSet" type="button" value="Set Heights" data-theme="a" />

$('#btnSet').on("click", function(e){
    $("[type='text']").each(function( index ) {
        var curH = $(this).height();
        $(this).height(curH * 2);
    });
});

注: 使用しているフォーム要素の種類によっては、高さの設定がすべての要素で機能するとは限りません。フォームの生成コードをインスペクターで見て、各要素タイプの高さを設定する最良の方法を確認することをお勧めします。

于 2013-10-08T21:33:18.767 に答える