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 回答