当前位置： 文江博客话题详情

在 jquery 中构建动态列表并丢失 CSS

发布于 2024-11-30 02:05:09 字数 20838 浏览 0 评论 0原文

我正在按天建立一个约会列表，并且当天的约会可以折叠在日期标题下。我正在使用追加来插入列表项。当动态构建列表时，格式化为零。 jquery 或 CSS 的优点都没有体现出来。我应该使用与追加不同的方法来构建列表吗？下面的链接显示了在动态列表下方构建的静态列表。

http://www.roamingq.com/jquery/Test2.htm#my_qs

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <!--<script type="text/javascript">
            $(document).ready(function () {
                $("#sayHelloButton").click(function (event) {
                    $.ajax({
                        type: 'GET',
                        url: 'http://www.roamingq.com/rqes/rqservice.svc/Test',
                        //url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        processdata: true,
                        success: function (result) {
                            alert(result.d);
                        },
                        error: function (data) {
                            alert("failure");
                        }
                    });
                });
            });      
        </script>-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript" >
            $(function () {
                $(".submit").click(function () {
                    var email = $("#lgn_email").val();
                    var password = $("#lgn_password").val();
                    var dataString = 'email=' + email + '&password=' + password;
                    alert(dataString);
                    return false;
                });
            });
</script>
    </head> 
<body> 


<!-- Start of Login -->
<div data-role="page" data-theme="b" id="login">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Login</h1>
    </div>
    <div data-role="content" data-inset="true">
        <form id="target" method="post" action="#my_qs">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="lgn_email">Email:</label>
                    <input type="email" name="lgn_email" id="lgn_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="lgn_password">Password:</label>
                    <input type="password" name="lgn_password" id="lgn_password" value="" />
                </div>
                <p>
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="lgn_rememberme" id="lgn_rememberme" class="custom" data-theme="c" />
                        <label for="lgn_rememberme">Remember me</label>
                    </fieldset>
                </p>
                    <a href="#my_qs" data-role="button" data-inline="true">Login</a>
                <!--<input type="submit" value="Login" class="submit"/>-->
                <!--<input id="sayHelloButton" value="Say Hello" type="button" />-->
                <p>Don't have an account? <a href="#registration">Register</a> now for free!</p>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Login -->









<!-- Start of Registration -->
<div data-role="page" data-theme="b" id="registration">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Registration</h1>
        <!--<a href="#login" class="ui-btn-right">Cancel</a>-->
    </div>
    <div data-role="content" data-inset="true">
        <form action="/FormActions/register.ashx" method="get">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="rg_mobileNumber">Mobile #:</label>
                    <input type="text" name="rg_mobileNumber" id="rg_mobileNumber" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_firstName">First name:</label>
                    <input type="text" name="rg_firstName" id="rg_firstName" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_lastName">Last name:</label>
                    <input type="text" name="rg_lastName" id="rg_lastName" value=""  />
                </div>                
                <div data-role="fieldcontain">
                    <label for="rg_email">Email:</label>
                    <input type="email" name="rg_email" id="rg_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password1">Password:</label>
                    <input type="password" name="rg_password1" id="rg_password1" value="" />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password2">Re-enter Password:</label>
                    <input type="password" name="rg_password2" id="rg_password2" value="" />
                </div>
                <div data-role="fieldcontain">
                    <p>By submitting this information, I acknowledge that I have
                    read and agree to the <a href='MobileQ_TermsofUse.DOC.html' data-rel=”dialog” rel="external" data-transition=”flip”>Terms of Use</a> and 
                    <a href='MobileQ_PrivacyPolicy.DOC.html' data-rel=”dialog” rel="external" data-transition=”pop”>Privacy Policy</a></p>
                </div>
                <div data-role="fieldcontain">
                    <a href="#my_qs" data-role="button" data-inline="true">Register</a>
                    <p>Already have an account? <a href="#login">Login</a></p>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Registration -->





<!-- Start of My Q's -->
<div data-role="page" data-theme="b" id="my_qs">
    <div data-role="header"  data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#new_q" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog"  data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->


    <div data-role="content" id="my_qs_listview">

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                data: '{"User": "' + "[email protected]" + '","Password": "' + "bru2bec" + '","BookingCategories": "' + "7" + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processdata: true,
                success: function (result) {
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $("#my_qs_listview").append('<div data-role="collapsible" data-collapsed="false">');
                    $("#my_qs_listview").append('<h3>June 02, 2011</h3>');
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $.each(result.d.Reservations, function (i, Res) {
                        $("#my_qs_listview").append('<li><img src="icons/Service_55x55.png" style="vertical-align:middle;"/><h3>' + Res.Name + '</h3><p>' + Res.Address1 + '</p><p class="ui-li-aside"><b>' + Res.Detail + '</b></p>');
                    });
                    $("#my_qs_listview").append('</ul></div></ul>');
                },
                failure: function (data) {
                    alert("Try again later.");
                }
            });
            $('#my_qs_listview').listview('refresh', true);
        });        
    </script>

</div>

    <div data-role="collapsible" data-collapsed="false" id="my_qs_listview">
        <h3>June 02, 2011</h3>
        <ul data-role="listview">
            <li>
                <img src="icons/Fitness_55x55.png" style="vertical-align:middle;"/>
                <h3>Gold's Gym</h3>
                <p>Yoga Class</p>
                <p class="ui-li-aside"><b>6:30pm</b></p>
            </li>
            <li>
                <img src="icons/Service_55x55.png"/>
                <h3>Dale's Dead Bug</h3>
                <p>Exterior bug spraying</p>
                <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
            </li>
        </ul>
    </div>



    <!--<div data-role="content" id="my_qs_listview">   
        <ul data-role="listview">
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 02, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Fitness_55x55.png"  style="vertical-align:middle;"/>
                        <h3>Gold's Gym</h3>
                        <p>Yoga Class</p>
                        <p class="ui-li-aside"><b>6:30pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Service_55x55.png"/>
                        <h3>Dale's Dead Bug</h3>
                        <p>Exterior bug spraying</p>
                        <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 03, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Golf_55x55.png" />
                        <h3>Sleepy Ridge Golf</h3>
                        <p>18 holes + cart</p>
                        <p class="ui-li-aside"><b>8:00am</b></p>
                    </li>
                    <li>
                        <img src="icons/Spas_55x55.png" />
                        <h3>Zen Spa</h3>
                        <p>60 minute massage</p>
                        <p class="ui-li-aside"><b>12:00pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Dentist_55x55.png" />
                        <h3>Dr Smith DDS</h3>
                        <p>Checkup and bleaching</p>
                        <p class="ui-li-aside"><b>1:30pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 04, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Salon_55x55.png" />
                        <h3>Super Salon</h3>
                        <p>Haircut and "Forever 41" tip frosting</p>
                        <p class="ui-li-aside"><b>4:00pm</b></p>
                    </li>                
                    <li>
                        <img src="icons/Restaurants_55x55.png" />
                        <h3>Tsunami</h3>
                        <p>Dinner reservation</p>
                        <p class="ui-li-aside"><b>7:30pm</b></p>
                    </li>
                </ul>
            </div>
        </ul>
    </div>-->
</div>
<!-- End of My Q's -->





<!-- Start of New Q -->
<div data-role="page" data-theme="b" id="new_q">
    <div data-role="header" data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#my_qs" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog" data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div data-role="content" style="height:20px; text-align:center; font-weight:bold;">Select a New Q</div>
    <div data-role="content">   
        <div class="ui-grid-b"> 
            <div class="ui-block-a"><a href="#restaurants"><div style="height:120px; text-align:center;"><img src="icons/Restaurants_55x55.png" /><h5 >Restaurants</h5></div></a></div> 
            <div class="ui-block-b"><a href="#salons"><div style="height:120px; text-align:center;"><img src="icons/Salon_55x55.png" /><h5 >Hair Salons</h5></div></a></div> 
            <div class="ui-block-c"><a href="#service"><div style="height:120px; text-align:center;"><img src="icons/Service_55x55.png" /><h5 >Service</h5></div></a></div> 
            <div class="ui-block-a"><a href="#golf"><div style="height:120px; text-align:center;"><img src="icons/Golf_55x55.png" /><h5 >Golf</h5></div></a></div> 
            <div class="ui-block-b"><a href="#spas"><div style="height:120px; text-align:center;"><img src="icons/Spas_55x55.png" /><h5 >Spas</h5></div></a></div> 
            <div class="ui-block-c"><a href="#dentists"><div style="height:120px; text-align:center;"><img src="icons/Dentist_55x55.png" /><h5 >Dentists</h5></div></a></div> 
            <div class="ui-block-a"><a href="#fitness"><div style="height:120px; text-align:center;"><img src="icons/Fitness_55x55.png" /><h5 >Fitness</h5></div></a></div> 
            <div class="ui-block-b"><a href="#rx"><div style="height:120px; text-align:center;"><img src="icons/RX_55x55.png" /><h5 >Pharmacies</h5></div></a></div> 
            <div class="ui-block-c"><a href="#general"><div style="height:120px; text-align:center;"><img src="icons/MQ_55x55.png" /><h5 >Dining</h5></div></a></div> 
        </div><!-- /grid-c -->
    </div><!-- /page -->
</div>
<!-- End of New Q -->

<!-- Start of Favorites page -->
<div data-role="page" id="favorites">
<div data-role="header">
    <h1>Favorites</h1>
</div>
<div data-role="content">
<p>Come here to save time and book appointments at your bookmarked favorite restaurants, hair salons, golf courses, and more. </p>
</div>
</div>
<!-- End of Favorites page -->


<!-- Start of Offers page -->
<div data-role="page" id="offers">
<div data-role="header">
    <h1>Offers</h1>
</div>
<div data-role="content">
<p>This page will be updated with the hottest deals everywhere you like to go.</p>
</div>
</div>
<!-- End of Offers page -->


<!-- Start of Settings page -->
<div data-role="page" id="settings">
<div data-role="header">
    <h1>Settings</h1>
</div>
<div data-role="content">
<p>This screen is where you will change your geographical location, application preferences, etc.</p>
</div>
</div>
<!-- End of Settings page -->


<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- Restaurants -->
<div data-role="page" id="restaurants">
<div data-role="header">
    <h1>Restaurants</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Restaurants -->

<!-- Salons -->
<div data-role="page" id="salons">
<div data-role="header">
    <h1>Hair Salons</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Salons -->

<!-- Service -->
<div data-role="page" id="service">
<div data-role="header">
    <h1>Service Technicians</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Service -->

<!-- Golf -->
<div data-role="page" id="golf">
<div data-role="header">
    <h1>Golf Courses</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Golf -->

<!-- Spas -->
<div data-role="page" id="spas">
<div data-role="header">
    <h1>Spas</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Spas -->

<!-- Dentists -->
<div data-role="page" id="dentists">
<div data-role="header">
    <h1>Dentists</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Dentists -->

<!-- Fitness -->
<div data-role="page" id="fitness">
<div data-role="header">
    <h1>Fitness</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Fitness -->

<!-- RX -->
<div data-role="page" id="rx">
<div data-role="header">
    <h1>Pharmacies</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- RX -->




</body>
</html>
原文

I am building a list of appointments by day and the appointments for the day are collapsible under the date header. I am using append to insert the list items. When the list is built dynamically, there is zero formatting. None of the jquery goodness or CSS shows through. Should I be building the list using a different method than append? The link below shows a static list built below a dynamic one.

http://www.roamingq.com/jquery/Test2.htm#my_qs

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
        <!--<script type="text/javascript">
            $(document).ready(function () {
                $("#sayHelloButton").click(function (event) {
                    $.ajax({
                        type: 'GET',
                        url: 'http://www.roamingq.com/rqes/rqservice.svc/Test',
                        //url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                        data: {},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        processdata: true,
                        success: function (result) {
                            alert(result.d);
                        },
                        error: function (data) {
                            alert("failure");
                        }
                    });
                });
            });      
        </script>-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript" >
            $(function () {
                $(".submit").click(function () {
                    var email = $("#lgn_email").val();
                    var password = $("#lgn_password").val();
                    var dataString = 'email=' + email + '&password=' + password;
                    alert(dataString);
                    return false;
                });
            });
</script>
    </head> 
<body> 


<!-- Start of Login -->
<div data-role="page" data-theme="b" id="login">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Login</h1>
    </div>
    <div data-role="content" data-inset="true">
        <form id="target" method="post" action="#my_qs">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="lgn_email">Email:</label>
                    <input type="email" name="lgn_email" id="lgn_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="lgn_password">Password:</label>
                    <input type="password" name="lgn_password" id="lgn_password" value="" />
                </div>
                <p>
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="lgn_rememberme" id="lgn_rememberme" class="custom" data-theme="c" />
                        <label for="lgn_rememberme">Remember me</label>
                    </fieldset>
                </p>
                    <a href="#my_qs" data-role="button" data-inline="true">Login</a>
                <!--<input type="submit" value="Login" class="submit"/>-->
                <!--<input id="sayHelloButton" value="Say Hello" type="button" />-->
                <p>Don't have an account? <a href="#registration">Register</a> now for free!</p>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Login -->









<!-- Start of Registration -->
<div data-role="page" data-theme="b" id="registration">
    <div data-role="header" data-position="inline" data-nobackbtn="true">
        <h1>Mobile Q Registration</h1>
        <!--<a href="#login" class="ui-btn-right">Cancel</a>-->
    </div>
    <div data-role="content" data-inset="true">
        <form action="/FormActions/register.ashx" method="get">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="rg_mobileNumber">Mobile #:</label>
                    <input type="text" name="rg_mobileNumber" id="rg_mobileNumber" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_firstName">First name:</label>
                    <input type="text" name="rg_firstName" id="rg_firstName" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_lastName">Last name:</label>
                    <input type="text" name="rg_lastName" id="rg_lastName" value=""  />
                </div>                
                <div data-role="fieldcontain">
                    <label for="rg_email">Email:</label>
                    <input type="email" name="rg_email" id="rg_email" value=""  />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password1">Password:</label>
                    <input type="password" name="rg_password1" id="rg_password1" value="" />
                </div>
                <div data-role="fieldcontain">
                    <label for="rg_password2">Re-enter Password:</label>
                    <input type="password" name="rg_password2" id="rg_password2" value="" />
                </div>
                <div data-role="fieldcontain">
                    <p>By submitting this information, I acknowledge that I have
                    read and agree to the <a href='MobileQ_TermsofUse.DOC.html' data-rel=”dialog” rel="external" data-transition=”flip”>Terms of Use</a> and 
                    <a href='MobileQ_PrivacyPolicy.DOC.html' data-rel=”dialog” rel="external" data-transition=”pop”>Privacy Policy</a></p>
                </div>
                <div data-role="fieldcontain">
                    <a href="#my_qs" data-role="button" data-inline="true">Register</a>
                    <p>Already have an account? <a href="#login">Login</a></p>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<!-- End of Registration -->





<!-- Start of My Q's -->
<div data-role="page" data-theme="b" id="my_qs">
    <div data-role="header"  data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#new_q" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog"  data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->


    <div data-role="content" id="my_qs_listview">

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                url: 'http://www.roamingq.com/rqes/user.svc/Authenticate',
                data: '{"User": "' + "[email protected]" + '","Password": "' + "bru2bec" + '","BookingCategories": "' + "7" + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processdata: true,
                success: function (result) {
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $("#my_qs_listview").append('<div data-role="collapsible" data-collapsed="false">');
                    $("#my_qs_listview").append('<h3>June 02, 2011</h3>');
                    $("#my_qs_listview").append('<ul data-role="listview">');
                    $.each(result.d.Reservations, function (i, Res) {
                        $("#my_qs_listview").append('<li><img src="icons/Service_55x55.png" style="vertical-align:middle;"/><h3>' + Res.Name + '</h3><p>' + Res.Address1 + '</p><p class="ui-li-aside"><b>' + Res.Detail + '</b></p>');
                    });
                    $("#my_qs_listview").append('</ul></div></ul>');
                },
                failure: function (data) {
                    alert("Try again later.");
                }
            });
            $('#my_qs_listview').listview('refresh', true);
        });        
    </script>

</div>

    <div data-role="collapsible" data-collapsed="false" id="my_qs_listview">
        <h3>June 02, 2011</h3>
        <ul data-role="listview">
            <li>
                <img src="icons/Fitness_55x55.png" style="vertical-align:middle;"/>
                <h3>Gold's Gym</h3>
                <p>Yoga Class</p>
                <p class="ui-li-aside"><b>6:30pm</b></p>
            </li>
            <li>
                <img src="icons/Service_55x55.png"/>
                <h3>Dale's Dead Bug</h3>
                <p>Exterior bug spraying</p>
                <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
            </li>
        </ul>
    </div>



    <!--<div data-role="content" id="my_qs_listview">   
        <ul data-role="listview">
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 02, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Fitness_55x55.png"  style="vertical-align:middle;"/>
                        <h3>Gold's Gym</h3>
                        <p>Yoga Class</p>
                        <p class="ui-li-aside"><b>6:30pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Service_55x55.png"/>
                        <h3>Dale's Dead Bug</h3>
                        <p>Exterior bug spraying</p>
                        <p class="ui-li-aside"><b>ETA 2:15pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 03, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Golf_55x55.png" />
                        <h3>Sleepy Ridge Golf</h3>
                        <p>18 holes + cart</p>
                        <p class="ui-li-aside"><b>8:00am</b></p>
                    </li>
                    <li>
                        <img src="icons/Spas_55x55.png" />
                        <h3>Zen Spa</h3>
                        <p>60 minute massage</p>
                        <p class="ui-li-aside"><b>12:00pm</b></p>
                    </li>
                    <li>
                        <img src="icons/Dentist_55x55.png" />
                        <h3>Dr Smith DDS</h3>
                        <p>Checkup and bleaching</p>
                        <p class="ui-li-aside"><b>1:30pm</b></p>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false">
                <h3>June 04, 2011</h3>
                <ul data-role="listview">
                    <li>
                        <img src="icons/Salon_55x55.png" />
                        <h3>Super Salon</h3>
                        <p>Haircut and "Forever 41" tip frosting</p>
                        <p class="ui-li-aside"><b>4:00pm</b></p>
                    </li>                
                    <li>
                        <img src="icons/Restaurants_55x55.png" />
                        <h3>Tsunami</h3>
                        <p>Dinner reservation</p>
                        <p class="ui-li-aside"><b>7:30pm</b></p>
                    </li>
                </ul>
            </div>
        </ul>
    </div>-->
</div>
<!-- End of My Q's -->





<!-- Start of New Q -->
<div data-role="page" data-theme="b" id="new_q">
    <div data-role="header" data-backbtn="false">
        <h1>Mobile Q</h1> 
        <div data-role="navbar">
        <ul>
            <li><a href="#my_qs" data-role="button" data-icon="home" data-iconpos="top">My Q's</a></li>
            <li><a href="#" class="ui-btn-active" data-role="button" data-icon="plus" data-iconpos="top">New Q</a></li>
            <li><a href="#favorites" data-role="button" data-icon="star" data-rel="dialog" data-transition="pop" data-iconpos="top">Favorites</a></li>
            <li><a href="#offers" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" data-iconpos="top">Offers</a></li>
            <li><a href="#settings" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop" data-iconpos="top">Settings</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div data-role="content" style="height:20px; text-align:center; font-weight:bold;">Select a New Q</div>
    <div data-role="content">   
        <div class="ui-grid-b"> 
            <div class="ui-block-a"><a href="#restaurants"><div style="height:120px; text-align:center;"><img src="icons/Restaurants_55x55.png" /><h5 >Restaurants</h5></div></a></div> 
            <div class="ui-block-b"><a href="#salons"><div style="height:120px; text-align:center;"><img src="icons/Salon_55x55.png" /><h5 >Hair Salons</h5></div></a></div> 
            <div class="ui-block-c"><a href="#service"><div style="height:120px; text-align:center;"><img src="icons/Service_55x55.png" /><h5 >Service</h5></div></a></div> 
            <div class="ui-block-a"><a href="#golf"><div style="height:120px; text-align:center;"><img src="icons/Golf_55x55.png" /><h5 >Golf</h5></div></a></div> 
            <div class="ui-block-b"><a href="#spas"><div style="height:120px; text-align:center;"><img src="icons/Spas_55x55.png" /><h5 >Spas</h5></div></a></div> 
            <div class="ui-block-c"><a href="#dentists"><div style="height:120px; text-align:center;"><img src="icons/Dentist_55x55.png" /><h5 >Dentists</h5></div></a></div> 
            <div class="ui-block-a"><a href="#fitness"><div style="height:120px; text-align:center;"><img src="icons/Fitness_55x55.png" /><h5 >Fitness</h5></div></a></div> 
            <div class="ui-block-b"><a href="#rx"><div style="height:120px; text-align:center;"><img src="icons/RX_55x55.png" /><h5 >Pharmacies</h5></div></a></div> 
            <div class="ui-block-c"><a href="#general"><div style="height:120px; text-align:center;"><img src="icons/MQ_55x55.png" /><h5 >Dining</h5></div></a></div> 
        </div><!-- /grid-c -->
    </div><!-- /page -->
</div>
<!-- End of New Q -->

<!-- Start of Favorites page -->
<div data-role="page" id="favorites">
<div data-role="header">
    <h1>Favorites</h1>
</div>
<div data-role="content">
<p>Come here to save time and book appointments at your bookmarked favorite restaurants, hair salons, golf courses, and more. </p>
</div>
</div>
<!-- End of Favorites page -->


<!-- Start of Offers page -->
<div data-role="page" id="offers">
<div data-role="header">
    <h1>Offers</h1>
</div>
<div data-role="content">
<p>This page will be updated with the hottest deals everywhere you like to go.</p>
</div>
</div>
<!-- End of Offers page -->


<!-- Start of Settings page -->
<div data-role="page" id="settings">
<div data-role="header">
    <h1>Settings</h1>
</div>
<div data-role="content">
<p>This screen is where you will change your geographical location, application preferences, etc.</p>
</div>
</div>
<!-- End of Settings page -->


<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- New Q's ----------------->
<!-- Restaurants -->
<div data-role="page" id="restaurants">
<div data-role="header">
    <h1>Restaurants</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Restaurants -->

<!-- Salons -->
<div data-role="page" id="salons">
<div data-role="header">
    <h1>Hair Salons</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Salons -->

<!-- Service -->
<div data-role="page" id="service">
<div data-role="header">
    <h1>Service Technicians</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Service -->

<!-- Golf -->
<div data-role="page" id="golf">
<div data-role="header">
    <h1>Golf Courses</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Golf -->

<!-- Spas -->
<div data-role="page" id="spas">
<div data-role="header">
    <h1>Spas</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Spas -->

<!-- Dentists -->
<div data-role="page" id="dentists">
<div data-role="header">
    <h1>Dentists</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Dentists -->

<!-- Fitness -->
<div data-role="page" id="fitness">
<div data-role="header">
    <h1>Fitness</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- Fitness -->

<!-- RX -->
<div data-role="page" id="rx">
<div data-role="header">
    <h1>Pharmacies</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<!-- RX -->




</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

故事未完 2024-12-07 02:05:09

您期望在页面加载之前由 jquery mobile 应用 CSS 和绑定。因为您稍后要创建其他 DOM 元素，所以需要在附加后重新初始化元素，

$('#something').append(data).trigger('create');

请参阅 JQM 常见问题更多的。

我深入研究了您的来源请发布您自己的代码！！，看起来您还有其他问题。 Jquery 追加并不像您想象的那样工作。当您执行此操作时：

$("#my_qs_listview").append('<ul data-role="listview">');
$.each(result.d.Reservations, function (i, Res) {
    $("#my_qs_listview").append('<li>...');
});

UL 在附加 LI 之前关闭，您会得到：

<ul data-role="listview"></ul>
<li>...</li>
...

当我假设您想要的是：

<ul data-role="listview">
  <li>...</li>
  ...    
</ul>

构建字符串，然后附加整个字符串。我建议阅读append。

You're expecting CSS and bindings which are applied by jquery mobile before page load. Because you're creating additional DOM elements later you need to reinitialize the elements after append using

$('#something').append(data).trigger('create');

See the JQM FAQs for more.

I dug into your source PLEASE POST YOUR OWN CODE!! and it looks like you've got other problems. Jquery append doesn't work the way you think it does. When you do this:

$("#my_qs_listview").append('<ul data-role="listview">');
$.each(result.d.Reservations, function (i, Res) {
    $("#my_qs_listview").append('<li>...');
});

The UL is closed before the LIs are appended and you get:

<ul data-role="listview"></ul>
<li>...</li>
...

When I assume what you want is:

<ul data-role="listview">
  <li>...</li>
  ...    
</ul>

Build your string and then append the whole thing. I recommend reading up on append.

回复 原文
天暗了我发光 2024-12-07 02:05:09

如果您使用 CSS 样式表和 jQuery addClass() 方法，则应该显示实际的格式。

由于您使用 jQuery 将 CSS 应用到 HTML 元素，因此在使用

$(function(){
    //apply css to html elements
});

动态列表加载网页后将不会收到这些 CSS 属性。元素尚未写入页面，并且由于该函数在页面加载后运行，因此您的动态列表将永远不会收到这些 CSS 属性。

我建议创建一个 CSS 样式表，然后使用此处指定的 addClass() 方法：

http://api.jquery。 com/addClass/

If you are using a CSS stylesheet and the jQuery addClass() method, the actual formatting should show through.

Since you are using jQuery to apply CSS to HTML elements after the webpage loads using

$(function(){
    //apply css to html elements
});

the dynamic list will not receive those CSS attributes. The elements haven't yet been written to the page and since the function runs after the page loads, your dynamic list will never receive those CSS attributes.

I would recommend creating a CSS stylesheet and then use the addClass() method specified here:

http://api.jquery.com/addClass/

回复 原文
百合的盛世恋 2024-12-07 02:05:09

我的猜测是，append() 很好，但是您需要在附加项目后重新初始化可折叠，以便它可以发挥其所有魔力。

$('#updated-element').collapsible('refresh');

My guess is that append() is fine, but you need to re-initialize collapsible after appending items so it can work all its magic.

$('#updated-element').collapsible('refresh');
回复 原文
~没有更多了~

关于作者

但可醉心

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

隔纱相望

文章 0 评论 0

昵称有卵用

文章 0 评论 0

梨涡

文章 0 评论 0

蓝咒

文章 0 评论 0

白芷

文章 0 评论 0

樱娆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文