jquery - htmlのjQueryモバイル構造

Question

jquery モバイルの基本構造から外れるのが悪い習慣だと思います。私の例では、まったく同じコードが得られました。しかし、他のものでは、タグの前に 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

したがって、次のようになりました。

    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 2

Butani に感謝しますが、基本的な structrue は知っています。jqm がリストビューをさまざまな方法で構造化して正しくする方法についてのみ興味があります。これは、新しい方法で html/css を再度学習するようなものです。他のタグを生成する他のタグにタグを持つ。そのようにすることの論理を常に見ているとは限りません。

オーケー・ガジョトレ。これはほとんど私が欲しいものです。私はそれを少しストライプ化しました：

                    <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 を非表示にして、この 2 つを切り替えます。

しかし、最初の投稿で述べたように、「li」にクラスがあり、代わりにそれを非表示にしています。したがって、2 つの異なる div を持つ 1 つの "li" ではなく、2 つの異なるクラスを持つ 2 つの "li" を生成します。しかし、とにかく、それをどのように行うべきか、少し興味がありました。

Answer 3

Jquery モバイル ページの基本構造は次のとおりです。

<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を参照してください。