Các trang động với jQuery Mobile

Tôi đã sử dụng jQuery trong một thời gian dài và thực hiện các bước đầu tiên với jQuery Mobile.Các trang động với jQuery Mobile

Tôi sử dụng index.html làm thiết kế jQuery Mobile & của ứng dụng, gọi nội dung từ content.php (chế độ xem danh sách tất cả các trang) ngay sau khi tải.

tôi sử dụng page.php cho một mẫu nội dung trang, hiển thị nội dung tùy thuộc vào một biến, như vậy:?? page.php id = 01 page.php id = 02 page.php id = 03 ... Và cứ thế.

Tôi đã nghĩ cách tốt nhất để đi từ đây là có hai trang jQm 'trên index.html, một trang cho trang chủ của ứng dụng và một trang tải động nội dung từ page.php? Id = xx. Bằng cách này, tôi không phải tải tất cả nội dung của mình ngay khi ứng dụng của tôi được tải.

Việc này nên được thực hiện như thế nào? Làm thế nào tôi có thể làm cho danh sách xem các mục đi đến trang tiếp theo và tải nội dung phù hợp vào nó?

Nguồn

2011-01-30 Adam Tal

công tác nhận xét ví dụ:

Tạo một trang trắng tinh jqMobile (div với dữ liệu vai trò thích hợp, và một id id = "dynamicPage")
Nhận id liên kết trình đơn của bạn và chèn nó làm thuộc tính tiêu đề của trang trống.

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

dữ liệu tải như vậy:

 
    $('#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. Câu hỏi?

Nguồn

2011-02-21 17:41:32

Tôi đang sử dụng JQM beta2, $ ('# dynamicPage'). Trang() không hiển thị trang. Giao diện người dùng có thể được hiển thị lại với $ ('# ... "). Listview (' refresh '), v.v. Các cuộc thảo luận khác [ở đây] (https://forum.jquery.com/topic/page-no-longer-rerenders -e-page) –

Chỉ cần tạo liên kết với <a href="... và hoạt động. JQM tải chúng bằng AJAX

Ứng dụng bạn tạo bằng JQM sẽ hoạt động trong bất kỳ trình duyệt cũ nào không có javascript. Phần còn lại được JQM tự chăm sóc.

[sửa]

Để có được URL và đặt chúng ở bất cứ đâu bạn muốn chỉ cần sử dụng đồng bằng cũ .load() hoặc .get() từ jquery kho vũ khí và khi bạn nhận được nội dung vào một div bạn muốn -

bị phản đối: sử dụng .page() từ jquery mobile

hiện: gọi .trigger('create')

(sự kiện này thêm kiểu và điều khiển). hướng dẫn chi tiết là trong FAQ của tôi: http://jquerymobiledictionary.pl/faq.html

Nguồn

2011-01-31 08:07:04 naugtur

Trong khi điều này thường hoạt động, tải trang không có phong cách. Những gì tôi đang cố gắng làm là tải nội dung từ page.php? Id = 01 vào hiện tại

trong index.html của tôi đã được tạo kiểu. –

Chỉ điều bạn muốn thực hiện theo cách đó là phá vỡ chức năng lịch sử cho các trang bạn tải. Nhưng điều này có thể được thực hiện chỉ với một cuộc gọi AJAX bình thường. Tôi sẽ chỉnh sửa bài đăng. – naugtur

Nhưng trước khi bạn sử dụng điều này ... xin vui lòng xem làm thế nào các tài liệu tại jquerymobile.com được thực hiện. Đó là một ví dụ tốt. Bạn không nên hack jqm để làm việc theo cách này. Chỉ cần tạo một trang và liên kết các trang khác. jqm sẽ tải chúng bằng AJAX và thêm vào DOM. Bạn nhận được những gì bạn mô tả ở phần cuối của câu hỏi và nhiều hơn nữa. Và chỉ trang chủ mới được tải lúc đầu. Bạn có thể (và trong thực tế nên) tạo ra toàn bộ trang mà không cần viết bất kỳ javascript mình. Đó là ý tưởng chính khi làm việc với jqm. – naugtur

Đây là những gì tôi đã đưa ra để giải quyết này cho trang của tôi

$("#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);

Đối với detailPage tôi đã sử dụng xử lý sự kiện pageshow để lấy đối tượng JSON sử dụng id và nạp mục chi tiết dựa trên các id trong detailId attribute - một cái gì đó như loadDetail ($ ("# detailPage"). attr ("detailId")) và hàm loadDetail của tôi đã làm phần còn lại.

Thật không may điều này sẽ phá vỡ chiến lược URL cho điện thoại di động jQuery. Vì mục đã chọn được lưu trữ trong chính trang - điều này không tốt. Tôi sẽ thử sử dụng một liên kết bên ngoài là một trang HTML và chuyển id như là một arg.

Nguồn

2011-03-10 06:36:40

Điều này thường không phải là một ý tưởng hay để gây rối với điện thoại di động jquery như thế. – naugtur

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>

Nguồn

2012-03-24 04:21:28

Các trang động với jQuery Mobile

Trả lời

Các vấn đề liên quan