将标头添加到jQuery移动控制组

Question

我想在jQuery mobile中为控件组添加一个标头。我想要的输出与您在jQuery移动主题滚轮页面上看到的相同，其示例应显示在下面（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中的错误？