jQuery mobile structure of html

Question

I wounder if it's bad practice to step out from jquery mobile fundamental structure. In my example I got exact the same code. But in the other one I added a div before the -tag. That gives me another look, cause the css isn't right. Is it bad? It breaks my good looking list. And are there any good solution of it?

Reason is because I want some control of the info in my list, to show and hide the div with som jQuery. I'll solve this easy to give the li -tag a class and hide and show that instead. But im a bit confused abouth it anyway

If I have this code (take from jquery demo page):

                    <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>

It will generate this 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>

But if I add a div in my code like this:

                    <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>

It will generate this 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 already have a solution for listview elements toggling. So no need to wrap li elements with parent div.

Here's a solution for you: http://jsfiddle.net/Gajotres/TvwnQ/

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

Basically you just need to toggle class ui-screen-hidden on listview li element.

Answer 2

So it ended up like this:

    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

Basic Structure of Jquery Mobile Page as Below:

<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>

--For more refer www.jquerymobile.com

Answer 4

Thank you Butani but I know the basic structrue.. Only curious about how jqm want me to structure the listviews in different ways to make it right. It's like learning html/css again in a new way. Haveing tags in other tags that will generate other tags. I dont always see the logic in doing it that way.

Okey Gajotres. This is almoust what i want. I've striped it down a bit:

                    <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>

The reason of haveing the <div class="clickableMessage"> and <div class="markeableMessage"> is because of I want to hide and toggle them. Showing ClickableMessage and hide markeableMessage, toggle those two.

But as I said in the first post I now have the class on the "li" and hide that instead. So I'll generating two "li " with two different classes instead of one "li" with two different divs in it. But anyway I got a bit curious how it should be done.