Question

我在这里使用了解决方案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>

Answer 1

您可以使用Firebug或其他开发人员工具来检查CSS来操纵...
see the docu

覆盖主题

主题是一个坚实的起点，但意味着   定制。由于一切都是由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>

截图：
enter image description here

将jquery mobile复选框中的文本与添加的图像对齐

1 个答案: