7

JqueryMobile を使用して、次のレイアウトを実現したいと考えています。

  1. 入力行を区切るための素敵な装飾ボックスを用意する
  2. 1 つのチェックボックスを入力テキスト フィールドと垂直方向に揃えて、両方を同じ行に配置する

私が達成する必要があること

しかし、多くの試みの後、私が得ることができた唯一のレイアウトは次のとおりです。 私が得ているもの

最初の試行は を使用して正しいように見えますjquerymobile gridsが、 mycheckboxは選択できなくなり、永遠にチェックされたままになります。2 回目の試行では、fieldsetによって提案された を使用しますjquerymobileが、 をcheckbox失い、css float プロパティを使用しようとしましたが、成功しませんでした。

完全なコードは次のとおりです。

  <!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Multi-page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body style="font-size: 12px;"> 
<div data-role="page" id="one">
    <div data-role="content">   
      <div class="ui-grid-a">
         <div class="ui-block-a" style="width: 20%;" >
            <div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
               <div class="ui-checkbox">
                  <label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
                      <span class="ui-btn-inner ui-btn-corner-all">
                      <span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
                      </span>
                  </label>
               </div>
            </div>  
         </div>
         <div class="ui-block-b" style="width: 80%;" >
            <div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
         </div>
       </div>

       <div style="height: 200px;">
           <fieldset data-role="controlgroup" data-type="horizontal">
               <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0"  class="custom" />
               <label for="checkbox-mini-0" >&nbsp</label>
               <input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
           </fieldset>  
           <div style="height: 30px; border:1px solid lightgray;">
           </div>   
           <div style="height: 30px; border:1px solid lightgray;">
           </div>      
        </div>      
   </div>
</div>

</body>
</html>

私の目標を達成するための助けやコメントをいただければ幸いです。

オンライン エディター: http://jsfiddle.net/alain_lavoie/XhsEh/でも html ファイルにアクセスできます。

4

2 に答える 2

2

http://jsfiddle.net/nirmaljpatel/XAsyy/

出力

于 2012-06-26T23:58:18.563 に答える
2

http://jsfiddle.net/XAsyy/110/

Nirmal Patel ans から更新すると、テキストエリアがチェックボックスで動作することがわかりました。テキストエリアを大きくしたくない場合は、次のようにします。

data-role="none" ie. <textarea id="test"  data-role="none"></textarea>

http://jsfiddle.net/XAsyy/144/

または、次を使用します。

css resize: none;
于 2012-09-30T06:18:45.133 に答える