1

我在下面用 Jquery 创建了一个移动列表视图，它的渲染效果很好。当您单击特定列表元素时，我需要一些帮助 - 现在我将其设置为进入新页面并显示餐厅 ID。我想要尝试做的是，单击的特定列表视图条目的相同信息将呈现在新页面上，这意味着我之前在单击的列表元素中拥有的所有信息将仅在新页面上呈现简单的段落。是我试图弄清楚这个动态列表视图是我遇到麻烦的地方。有人可以帮忙吗？我真的很感激 - 数据库信息正在完美读取！

<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
        </style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/json3.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.restaurantid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.restaurantid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        listObject.itemID = $(this).attr('id'); 
                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
    });

    var listObject = {
        itemID : null
    }    
</script>
</head>     
<body>    
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Current Deals</h1>
    </div>

    <div data-role="content">
        <div class="content-primary">
            <ul id="list" data-role="listview" data-filter="true"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
                <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
            </ul>
        </div>
    </div>
</div>

<!--New Page --> 

<div data-role="page" id="index2">
<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">
        <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a>
    </div>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="#index" data-icon="grid">My Deals</a></li>
            </ul>
        </nav>
    </footer>   
</div>
</body>
</html>
4

2 回答 2

0

在下面基于您发布的代码的示例中，选定的 id 从页面索引传递到页面 index2。

<html>
    <head>
        <meta charset="utf-8" />
        <title>Find A Deal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            img.fullscreen {
                max-height: 100%;
                max-width: 100%;
            }
        </style>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#index', function () {
                $("#list").empty();
                for (var i = 0; i < 5; i++) {
                    $("#list").append (
                        $(["<li><a id='id_",i ,"'><h1>H1_label_",i,"</h1><p>P_label_",i,"</p></a></li>"].join("")).
                        on('click', ['#id_',i].join (""), function(e){  
                            if(e.handled !== true) {
                                listObject.itemID = this.id;                                
                                $.mobile.changePage( "#index2", { transition: "slide"} );
                                e.handled = true;
                            }
                        })
                    );
                }
                $("#list").listview('refresh');
            });

            $(document).on('pagebeforeshow', '#index2', function () {

                //selected id on page transition
                alert(['selected id: ',listObject.itemID].join(""));
            });

            var listObject = {
                itemID: null
            }
        </script>
    </head>

    <body>
        <div data-role="page" id="index">
            <div data-role="header" data-position="fixed">
                 <h1>Current Deals</h1>

            </div>
            <div data-role="content">
                <div class="content-primary">
                    <ul id="list" data-role="listview" data-filter="true"></ul>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="http://localhost/findadeal/index.html" data-icon="home">Home</a>
                        </li>
                        <li>
                            <a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--New Page -->
        <div data-role="page" id="index2">
            <div data-role="header">
                 <h1> Find A Deal </h1> 
            </div>
            <div data-role="content">
                <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal</a>
                <p></p>
            </div>
            <footer data-role="footer" data-position="fixed">
                <nav data-role="navbar">
                    <ul>
                        <li>
                            <a href="index.html" data-icon="home">Home</a>
                        </li>
                        <li>
                            <a href="#index" data-icon="grid">My Deals</a>
                        </li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>
</html>
于 2013-02-13T20:04:15.433 回答
0

在 Listview 中渲染数据，并在列表的每次单击/触摸开始时，在另一个页面上显示数据。

// 第一个函数

function render(){        
    var html="";
    html +=   "<li id="+index+"><a href='#'><img src='images/new-iaav-72.png' class='ui-   corner-none' style='width:50px;height:56px'>";

    html +=   "<div style='margin-left:-10%;margin-top:-2%'><h1>"+title +"</h1>  </div>";         
    html +=   "</a></li>";                         
    $("#xyz div:jqmData(role=content) #ul1").append (html);

   func1 = function() {showDetails(index,title,descrp,image_large);};
   document.getElementById(index).addEventListener("click", func1);

}

// 在第二页上呈现数据的第二个函数。

 function showDetails(){

   if(image_large!="")
    $('#setDetailImage').attr("src",image_large);
else        
    $('#setDetailImage').attr("src",'images/defaultDog.png');

$('#setDetailTitle').text(title);   
$('#setDetailDescription').html(descrp).text();

 }
于 2013-10-14T17:51:59.163 回答