1

我想在 jQuery mobile 中向控件组添加标题。我想要的输出与您在 jQuery mobile Theme Roller 页面上看到的相同，下面应显示一个示例（http://jquerymobile.com/themeroller/）

在此处输入图像描述

如您所见，有一个控制组，顶部有一个标题。查看主题滚轮页面的 DOM，他们在控件组的输入/标签对之前添加了列表项元素。

我可以将标记的列表项插入到我的控件组中（如 JQM 生成的 HTML），但默认情况下它会将第一个控件项的角变圆 - 因为背景颜色进入边缘，所以几乎看不到，但仍然很明显：

在此处输入图像描述

所以，理想情况下，我很想知道是否有一种简单的方法来添加标题并让 jQuery 做它的魔法让它看起来像它应该的那样。

这是我尝试过的代码，它产生了上面的第二个示例。请注意，它使用主干和下划线，因此变量替换：

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">
            <li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top ui-btn-up-undefined" data-role="list-divider" data-form="ui-bar-a">Apprentice/Trainee Role</li>
            <% for ( var i in area_template.roles ) {
                var role = area_template.roles[i];
            %>
                <input name="checkbox_<%= role.id %>" id="checkbox_<%= role.id %>" type="checkbox">
                <label for="checkbox_<%= role.id %>"><%= role.name %></label>
            <% } %>
        </fieldset>
    </div>

编辑：感谢您的工作和建议 Jeemusu。我仍然可以看到角落。我将粘贴您的小提琴页面生成的代码与我的应用程序生成的代码之间的差异。我只能预测它可能与使用 JQM 1.0.1 的小提琴有关，而我的应用程序使用 JQM 1.1.1。我尝试改造 1.0.1。并且错误太多。

再次编辑：我刚刚删除了很多粘贴的代码，因为我在 jsFiddle 上意识到我可以切换到 jQuery 1.7.2，它允许我切换到 jQm 1.1.1，当我在小提琴上运行你的代码时，角落出现。尽管它们出现在代码中，但由于使用了较浅的颜色，因此几乎看不到。但是您肯定可以看到使用两个不同库之间的 DOM 差异。也许这表明 1.1.1 中存在错误？

4

1 回答 1

2

我将控制组从主题编辑器中剥离出来，并将其剥离到最低限度的标记。你可以在这个 jsfiddle中找到结果。我还包括了您在问题中的代码，因为您可以看到我们的代码并没有太大的不同。希望这将帮助您指出正确的方向。

查看您的代码，您有一些不必要的标记，例如：

<div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">

上面的代码不需要<div data-role="fieldcontain">，这将由 jquerymobile 自动构建并包裹任何<fieldset>.

更新

由于默认主题使用非常浅的颜色，因此在我上面的示例中似乎看不到对照组中第一个项目的圆角。您唯一的选择可能是使用 css hack 通过定位.ui-btn-inner类来删除它们。我已将 css 添加到此更新的 jsfiddle中。有问题的CSS是这样的：

.ui-btn-inner {
    border-top: none !important;  // Use to remove borders all together 
    border-radius: 0 !important;  // Use this to remove the radius  
}

​</p>

于 2012-08-02T03:59:09.960 回答