2

ここのソリューション http://jsfiddle.net/KADqA/23/を使用して画像をjqueryモバイルチェックボックスに追加しましたが、正常に動作しますが、ラベルのテキストがチェックボックスの画像と一致しなくなりました(高すぎます) )そして、cssで中央に配置する方法がわかりません。

これは、html を生成するためのコードの一部です。

<input type=checkbox id=chk" + ingindex + " class='chk chk" + ingindex + "' name=chk" + ingindex + "><label for=chk" + ingindex + ">" + item + "<a href='#' data-rel='dialog' ><img class=recimg src='http://webrecipemanager.com/images/recipe/" + image + "' alt='" + name + "'></a></label>

これは、firebug から生成された html です。

<div id="div0" class="drag inaisle ui-draggable" name="div0">draggable=Object { 

element={...}, options={...}, started=

false

, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}
<div class="ui-checkbox">
<input id="chk0" class="chk chk0" type="checkbox" name="chk0">checkboxradio=Object { element={...}, options={...}, label={...}, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmousedown=

true

, vclick=

true

}
<label class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-btn-up-i" for="chk0" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="i">corners=

true

shadow=

false

iconshadow=

true

wrapperEls=

"span"

icon=

"checkbox-off"

theme=

"i"

buttonElements=Object { bcls=

"ui-btn ui-btn-up-i ui-b...er-all ui-btn-icon-left"

, outer=label.ui-btn, inner=span.ui-btn-inner, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmouseover=

true

, vclick=

true

}
</div>
<input id="item0" type="hidden" value="1/2 c Baking Cocoa" name="item0">
<input id="ing0" type="hidden" value="Baking Cocoa" name="ing0">
</div>
4

1 に答える 1

0

Firebugまたは別の開発者ツールを使用して、操作するCSSを調べることができます...
ドキュメントを参照してください

テーマを上書きする

テーマは確かな出発点として意図されていますが、カスタマイズすることを意図しています。すべてがCSSによって制御されるため、Webインスペクターツールを使用して、変更するスタイルプロパティを簡単に識別できます。要素に追加されたテーマクラス（グローバル）とセマンティック構造クラス（ウィジェット固有）のセットは、スタイルオーバーライドのターゲットとなる可能性のあるセレクターの豊富なセットを提供します。構造とテーマのスタイルシート参照の後に配置され、すべてのスタイルオーバーライドを含む外部スタイルシートをヘッドに追加することをお勧めします。これにより、オーバーライドがライブラリコードとは別に保持されるため、ライブラリの新しいバージョンに簡単に更新できます。

あなたの場合、以下を追加してください

  <style>
  .ui-mobile a img, .ui-mobile fieldset {
    vertical-align: middle;
  }
  </style>

変更されたjsfiddleと実際の例の完全なコードを参照してください。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

  <style>
  .ui-mobile a img, .ui-mobile fieldset {
    vertical-align: middle;
  }
  </style>

</head>

<body>
  <div data-role="page" id="home">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
            <label for="OptIn">Receive E-mails From Us</label>

           <input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
            <label for="tandc">I agree to the <a href="#tc" data-rel="dialog" ><img src="http://dummyimages.com/25x25" /></a></label>
       </fieldset>
    </div>
  </div>
  <div data-role="page" id="tc">
    <div data-role="header">
        <h1>T and C</h1>
    </div>
    Read me
  </div>

  <script>
  $('.ui-btn-text').click(function(event) {
    var checked = $("#tandc[type='checkbox']").is(":checked");
    var $this = $(this);

    if($this.children('a').length) {
        $.mobile.changePage('#tc', {
            transition : 'pop',
            role       : 'dialog'
        });
    }
    stateOfCheckbox(checked);
  });

  function stateOfCheckbox(checked) {
    $('#home').live( 'pagebeforeshow',function(event){
        $("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
    });
  }
  </script>
</body>
</html>

スクリーンショット：
ここに画像の説明を入力してください

于 2012-11-12T13:56:52.280 に答える