Question

如果从jquery移动基础结构中走出来是不好的做法，我会更加努力。在我的例子中，我得到完全相同的代码。但在另一个中，我在 -tag之前添加了一个div 。这给了我另一个看，因为CSS不对。这不好吗？它打破了我的好看清单。它有什么好的解决方案吗？

原因是因为我希望对列表中的信息进行一些控制，以使用som jQuery显示和隐藏div。我会解决这个问题很容易让li -tag成为一个类并隐藏并显示它。但无论如何我有点困惑

如果我有这个代码（从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已经有了listview元素切换的解决方案。所以不需要用父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”。但无论如何，我有点好奇应该怎么做。

jQuery的hQuery移动结构

4 个答案: