1

私はjqueryモバイルを初めて使用し、AJAXを介して動的に作成されたリストとともに、ホームページとサブページ（「bible_studies」というラベルが付けられた）を正常に作成する方法をどうにかして理解しました。

リストは見栄えがよく、1 つのことを除いてすべてが機能しています... data-filter を true に設定しているにもかかわらず、フィルターがまったく表示されません。直視できないほど多くのことを試しました...誰か助けてくれますか？

<!DOCTYPE html>
<html>
<head>
<title>Tetelestai Church Mobile | Home</title>    
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link href="styles/mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
    .ui-li-thumb, .ui-li-icon {
        left: 1px;
        max-height: 125px; 
        max-width: 125px;
        position: absolute;
        top: 0;
    }
    #wrap{margin-left:50px;}
</style>
</head>
<body id="home">

<!-- Start of first page -->
<div data-role="page" id="home"> 

<h2 id="banner">Tetelestai Church Mobile</h2>
<div data-role="content">   
    <ul data-role="listview" data-inset="true">
        <li><a href="#bible_studies"><img src="../images/star.png" alt="Bible Studies" class="ui-li-icon">Bible Studies</a></li>
        <li><a href="#events"><img src="../images/events.png" alt="Events" class="ui-li-icon">Events</a></li>
        <li><a href="#news"><img src="../images/news.png" alt="Announcements" class="ui-li-icon">Announcements</a></li>
        <li><a href="#map"><img src="../images/map.png" alt="Times And Directions" class="ui-li-icon">Directions</a></li>
        <li><a href="#contact"><img src="../images/contact.png" alt="Contact Us" class="ui-li-icon">Contact Us</a></li>
    </ul>



    <ul data-role="listview" data-inset="true" data-theme="e">
        <li>
            <a href="http://www.tetelestai.org" data-ajax="false" rel="external"><img src="../images/full_screen.png" alt="Full Site" class="ui-li-icon">Full Site</a>
        </li>
    </ul>
    </p>
</div><!-- /content -->

</div><!-- /page -->

<div data-role="page" id="bible_studies">
<header data-role="header" data-theme="b">
    <h1>Tetelestai Bible Studies</h1>
</header>
<article data-role="content" id="bs">
</article>

</div>

 <script type="text/javascript">

//On document ready
$(document).ready(function(){

    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
        url: "../data/series.php",                  //the script to call to get data          
        data: "",                        //you can insert url argumnets here to pass
                                       //for example "id=5&parent=6"
        dataType: 'json',                //data format      
        success: function(data)          //on recieve of reply
        {

            //--------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------
            var list = $('<ul data-role="listview"  data-filter="true" id="series"/>');

            //Loop through each series
            $.each(data, function(key, val) {

                //Create list item
                $('<li><a href="#'+val.series+'"><img src="../assets/video/'+val.series+'/mobile_list_image.jpg" alt="'+val.name+'" /><div id="wrap"><h1>'+val.name+'</h1><p>'+val.description+'</p></div></a></li>').appendTo(list);

            })

            //Add list
            list.listview();
            list.appendTo('#bs');

        }
    });
});

4

1 に答える 1

2

技術的なエラーがあります。次のようなリスト変数を作成すると:

var list = $('<ul data-role="listview"  data-filter="true" id="series"/>');

次のように、すぐに #bs コンテンツに追加する必要があります。

var list = $('<ul data-role="listview"  data-filter="true" id="series"/>').appendTo('#bs');

Final Filter 要素は ul listview の一部ではありません。コンテンツに追加する前に .listview() でスタイルを設定したため、ファイラー要素は追加されません。

私が話していることを示すために例を作りました: http://jsfiddle.net/Gajotres/67dst/

または、これも機能すると思います。これを次の行に変更するだけです。

        list.listview();
        list.appendTo('#bs');

これに：

        list.appendTo('#bs');
        list.listview();

.listview() が適用される前に listviev がコンテンツに追加されるため、これも機能するはずです。

于 2013-03-21T19:05:26.803 に答える