html的jQuery移动结构

Question

如果从 jquery 移动基础结构中跳出是不好的做法，我会感到很痛苦。在我的示例中，我得到了完全相同的代码。但在另一个中，我在 -tag before 添加了一个 div。这让我再看一眼，因为 css 不正确。 不好吗？它打破了我好看的清单。有什么好的解决办法吗？

原因是因为我想要对列表中的信息进行一些控制，以使用 som jQuery 显示和隐藏 div。我会很容易地解决这个问题，给 li 标签一个类并隐藏和显示它。但是我还是有点困惑

如果我有这段代码（取自 jquery 演示页面）：

                    <li>
                        <a href="#">
                            <h2>
                                Stephen Weber</h2>
                            <p>
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                        <p class="ui-li-aside">
                            <strong>6:24</strong>PM</p>
                </li>

它会生成这个html：

                    <li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" data-corners="false"
                    data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false"
                    data-iconpos="right" data-theme="c">
                    <div class="ui-btn-inner ui-li">
                        <div class="ui-btn-text">
                            <p class="ui-li-aside ui-li-desc">
                                <strong>6:24</strong> PM
                            </p>
                            <a class="ui-link-inherit" href="#">
                                <h2 class="ui-li-heading">
                                    Stephen Weber</h2>
                                <p class="ui-li-desc">
                                    <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong>
                                </p>
                                <p class="ui-li-desc">
                                    Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                    jQuery team.</p>
                            </a>
                        </div>
                    </div>
                </li>

但是如果我像这样在我的代码中添加一个 div：

                    <li>
                    **<div>**
                        <a href="#">
                            <h2>
                                Stephen Weber</h2>
                            <p>
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                        <p class="ui-li-aside">
                            <strong>6:24</strong>PM</p>
                    </div>
                </li>

它会生成这个html：

                <li class="ui-li ui-li-static ui-btn-up-c">
                    <div>
                        <p class="ui-li-aside ui-li-desc">
                            <strong>6:24</strong> PM
                        </p>
                        <a class="ui-link" href="#">
                            <h2 class="ui-li-heading">
                                Stephen Weber</h2>
                            <p class="ui-li-desc">
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong>
                            </p>
                            <p class="ui-li-desc">
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                        </a>
                    </div>
                </li>

Answer 1

jQuery Mobile 已经有了列表视图元素切换的解决方案。所以不需要用父 div 包裹 li 元素。

这里有一个解决方案：http://jsfiddle.net/Gajotres/TvwnQ/

$(document).on('pagebeforeshow', '#index', function(){    
    // Hide first listview element
    $('#mylist li').eq(0).addClass('ui-screen-hidden');    
});

基本上你只需要在 listview li 元素上切换类 ui-screen-hidden。

Answer 2

结果是这样的：

    module.toggleClickableAndCheckableMessage = function () {
    var checkableMessage = pageId.find('li.checkableMessage');
    var clickableMessage = pageId.find('li.clickableMessage');

    if (clickableMessage.eq(0).is(':visible')) {
        clickableMessage.addClass('ui-screen-hidden');
        checkableMessage.removeClass('ui-screen-hidden');
    } else {
        checkableMessage.addClass('ui-screen-hidden');
        clickableMessage.removeClass('ui-screen-hidden');
    }
};

Answer 3

Jquery Mobile Page的基本结构如下：

<html>
<body>
    <div data-role="page" name="page1">
        <div data-role="header">
            <!-- your header text ->
        </div>
        <div data-role="content">
            <!-- your main data write here ex listitem,form etc ->
        </div>
        <div data-role="header">
            <!-- your footer text ->
        </div>


    </div>
    <div data-role="page" name="page=2">
        <div data-role="header">
            <!-- your header text ->
        </div>
        <div data-role="content">
            <!-- your main data write here ex listitem,form etc ->
                     <!-- here you can define your list and main content [body of page]-->
        </div>
        <div data-role="header">
            <!-- your footer text ->
        </div>
    </div>
</body>
</html>

--更多请参考www.jquerymobile.com

Answer 4

谢谢Butani，但我知道基本结构。只是好奇jqm希望我如何以不同的方式构建列表视图以使其正确。这就像以一种新的方式再次学习 html/css。在将生成其他标签的其他标签中有标签。我并不总是看到这样做的逻辑。

Okey Gajotres。这几乎是我想要的。我已经把它删掉了一点：

                    <li data-role="fieldcontain" data-theme="@messageTheme" class="clickableMessage" data-icon="false">
                    <div class="clickableMessage">
                        <a href="">
                            <div class="receivers">
                                <span>text </span>
                            </div>
                            <h2>@message.Header</h2>
                            <p>
                                @message.Text</p>
                        </a>
                    </div>
                    <div class="markeableMessage">
                        <a href="#">
                            <label>
                                <div class="receivers">
                                    <span>text </span>
                                </div>
                                <h2>@message.Header</h2>
                                <p>
                                    @message.Text</p>
                                <fieldset data-role="controlgroup">
                                    <input id="@("cbx" + message.MessageRef)" class="markedForDelete" name="CheckboxToDelete" type="checkbox" value=@message.MessageRef />
                                </fieldset>
                            </label>
                        </a>
                    </div>
                </li>

拥有<div class="clickableMessage"> 和<div class="markeableMessage"> 的原因是因为我想隐藏和切换它们。显示 ClickableMessage 和隐藏 markeableMessage，切换这两个。

但正如我在第一篇文章中所说，我现在将课程放在“li”上并隐藏它。所以我将生成两个带有两个不同类的“li”，而不是一个带有两个不同 div 的“li”。 但无论如何我有点好奇应该怎么做。