Dynamic pages with jQuery Mobile

后端未结

关注

 4  2110

一生所求

I\'ve been using jQuery for quite a while, and taking my first steps with jQuery Mobile.

I use index.html as the jQuery Mobile & design of my app, which calls the co

相关标签:

4条回答

遇见更好的自我

2021-02-08 11:08
Here's what I came up to solve this for my page
```
$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
    listItems += "<li><div><a href='#messageData' onclick='$(" +   // Use a click handler to set the attr of detailPage div
             '"#detailPage").attr("detailId", "'+ item.Id +       // my JSON item has an ID
             '")' + "'>";                                         // note the crazy quoting

    listItems += "Test about the item</a></li>";

}
$("#masterList").append(listItems);
```
For the detailPage I used the pageshow event handler to fetch the JSON object using the id and loaded the detail item based on the id in the detailId attribute - something like loadDetail($("#detailPage").attr("detailId")) and my loadDetail function did the rest.

Unfortunately this will break the URL strategy for jQuery mobile. Since the selected item is stored in the page itself - this is no good. I am going to try using an external link that is an HTML page and passing the id as an arg.
0 讨论(0)
发布评论:

提交评论
- 加载中...

小蘑菇

2021-02-08 11:14

Working commented example:

Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")
Get your menu link's id, and insert it as the title attribute of the empty page.

    $("#appMainMenu a").live("click", function(evt){
    var whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});

Load data like so:

    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // animate while we're loading data
        var whatpage = $(this).attr('title'); // get the page's title we changed earlier
        var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id.
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file
        $.get(whatpage2, function(data) { // load content from external file
          $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div).
          $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled.
        });
});

Hope this helps. Questions?

0 讨论(0)

孤街浪徒

2021-02-08 11:21

Just create links with <a href="... and it works. JQM loads them with AJAX

The app that you create with JQM should work in any old browser without javascript. The rest is taken care of by the JQM itself.

[edit]

To get URLs and put them anywhere you want just use plain old .load() or .get() from jquery arsenal and when you get the content to a div you wanted -

deprecated: use .page() from jquery mobile

current: call .trigger('create')

(this event adds styles and controls). Detailed instruction is in my FAQ: http://jquerymobiledictionary.pl/faq.html

0 讨论(0)
发布评论:

提交评论
- 加载中...

死守一世寂寞

2021-02-08 11:26

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>

0 讨论(0)