如何在 jQueryMobile 1.4.2 中使用格式化的内容设置单选按钮列表的样式

Posted 2023-03-15

【中文标题】如何在 jQueryMobile 1.4.2 中使用格式化的内容设置单选按钮列表的样式

【英文标题】：How to style Radiobutton list in jQueryMobile 1.4.2 with formatted content

【发布时间】：2014-04-07 21:51:32

【问题描述】：

我正在尝试在 jQueryMobile 1.4.2 中创建类似于以下内容的内容 - 即包含内容的单选按钮列表来解释每个选项。这是来自this great article best practices article.的jquery 1.2版截图，描述文字的大小小于正文。

但是，当我直接从中复制他的示例代码时，它的尺寸会像这样不正确（显示其他控件以供参考尺寸）。

这是示例代码

<fieldset data-role="controlgroup"> 
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
    <label for="radio-choice-1">
        <h3 class="ui-li-heading">jQuery Mobile</h3>
        <p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />          
    <label for="radio-choice-2">
        <h3 class="ui-li-heading">Sencha Touch</h3>
        <p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />          
    <label for="radio-choice-3">
        <h3 class="ui-li-heading">jQTouch</h3>
        <p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
    </label>            
</fieldset>

原来上面的代码不再起作用的原因是它引用了css类名ul-li-desc，它使用在jquery mobile 1.2.1 css中，但不再在最新的css for version 1.4.2中。

新的 1.4.2 版本在ListView component 中有一些非常相似的示例代码，看起来像这样

这里缩小字体大小的c​​ss类是.ui-listview>li p

那么，在 jQuery Mobile 1.4.2 中，创建一个添加内容不多的单选按钮列表的正确方法是什么？

【问题讨论】：

附言。是的，显然我可以自己设计它并节省了 20 分钟来写这个问题，但我试图理解 css 框架并从一开始就做所有事情:-) 或者我应该只是在 ListView 中粘贴单选按钮？

+1 评论 ;) 是的，一旦您开始使用 css，您就会了解 JQM。 1.4 比以前的版本更容易，因为团队减少了内部元素的数量 - 例如。 span - 拥有大多数风格。 Firebug 控制组并开始覆盖/探索 :) ps。即使您使用列表视图，您也需要至少覆盖​​li 的padding。

给你jsfiddle.net/Palestinian/4E485

@omar - 谢谢。你能把这个作为一个真正的答案，所以我可以给你积分

【参考方案1】：

了解 jQM CSS 结构的最简单方法是触发当前视图。 jQM 基于 widget 更改 html 标记，因为它添加了额外的元素并包装了其他元素以便每个最终 UI。

请记住，在覆盖 jQM 样式时，您必须具体且谨慎。大多数小部件共享相同的类（全局类）。

另请注意，从 jQM 1.4 开始，为了提高性能，团队减少了用于设置 widgets 样式的 inner 元素的数量。

/* <p> within <label> */
label p 
  font-size: .9em;
  font-weight: 400;
  display: block;


/* <h3> & <p> within <label> */
label h3, label p 
  margin: .45em;


/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after 
  top: 35% !important;

Demo

【讨论】：

感谢 Omar - 期待与您一起解决我未来的问题 :-) 呵呵

@Simon_Weaver 不客气！我也很期待为您提供帮助，这将是一种乐趣:)