1

日ごとの予定のリストを作成していますが、その日の予定は日付ヘッダーの下に折りたたむことができます。追加を使用してリストアイテムを挿入しています。リストが動的に作成される場合、フォーマットはありません。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”&gt;Terms of Use</a> and 
                    <a href='MobileQ_PrivacyPolicy.DOC.html' data-rel=”dialog” rel="external" data-transition=”pop”&gt;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": "' + "bruce@roamingq.com" + '","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>
4

3 に答える 3

2

ページの読み込み前にjquerymobileによって適用されるCSSとバインディングを期待しています。後で追加のDOM要素を作成するため、追加を使用して要素を再初期化する必要があります。

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

詳細については、JQMFAQを参照してください。

私はあなたのソースを掘り下げましたあなた自身のコードを投稿してください!! 他にも問題があるようです。Jqueryの追加は、思ったとおりに機能しません。これを行うとき：

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

ULが追加される前に閉じられ、次のLIsようになります。

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

私があなたが望むものを仮定するとき：

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

文字列を作成してから、すべてを追加します。付録を読むことをお勧めします。

于 2011-08-16T21:28:15.030 に答える
0

CSSスタイルシートとjQueryaddClass（）メソッドを使用している場合は、実際のフォーマットが透けて見えるはずです。

ウェブページが読み込まれた後、jQueryを使用してCSSをHTML要素に適用しているため

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

動的リストはそれらのCSS属性を受け取りません。要素はまだページに書き込まれていません。また、ページの読み込み後に関数が実行されるため、動的リストがこれらのCSS属性を受け取ることはありません。

CSSスタイルシートを作成してから、ここで指定されているaddClass（）メソッドを使用することをお勧めします。

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

于 2011-08-16T21:23:59.367 に答える
0

私の推測では、append（）は問題ありませんが、アイテムを追加した後で折りたたみ可能なものを再初期化して、すべての魔法を働かせる必要があります。

$('#updated-element').collapsible('refresh');
于 2011-08-16T21:21:01.393 に答える