jQuery Mobileでフォーム要素を配置する

jQueryモバイルフォームとCSSを初めて使用するのは初めてです。私はdivに含まれているjQuery Mobileフォームを作成しましたが、フォーム要素の位置を調整することができるようにしたいと考えていますが、これまでのところ運がありません。下の図では、CSSを使用して「送信」ボタンをコンテナの下部に配置しようとしています。いずれにせよ、これを行う良い方法を示唆することができますか？jQuery Mobileでフォーム要素を配置する

<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
    /> 
    <style type="text/css"> 
     #submitButton { 
      position: absolute; 
      bottom: 0%; 
      width: 50px; 
     } 
    </style> 
</head> 

<body> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <div id="lr" style="height: 500px;"> 
       <form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;"> 
        <label for="select-choice-0" class="select">Select Label:</label> 
        <select name="select-choice-0" id="select-choice-0"> 
         <option value="item1">Item 1</option> 
         <option value="item2">Item 2</option> 
         <option value="item3">Item 3</option> 
         <option value="item4">Item 4</option> 
        </select> 
        <div id="preview"></div> 
        <button type="button" data-theme="a" 
        name="Choose" value="submit-value">Choose</button> 
        <label for="textarea">Text Area Label:</label> 
        <textarea name="textarea" id="textarea-a"></textarea> 
        <button id="submitButton" class="ui-btn-top" type="button" 
        data-theme="a" name="Publish" value="Upload">Submit</button> 
      </div> 
      </form> 
     </div> 
    </div> 
    </div> 
</body>

出典

2012-04-28 Ben Pearce

JQMは、HTMLを変更し、元のボタンにクラスの多くを適用します。要素を調べると、要素が完全に異なっていることがわかります。 JQMが作りすぎたもので遊ぶのではなく、ボタンを別のdivでラップしてそのdivを配置することができます。すなわち

<div id="submitBtnWrap"> 
    <button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button> 
</div>

次に、cssをラッパーdivに適用します。

#submitBtnWrap { 
    position: absolute; 
    bottom: 0%; 
    width: 50px; 
}

出典

2012-04-28 01:00:13 codaniel

jQuery Mobileでフォーム要素を配置する

答えて

関連する問題