2011-11-23 2 views
17

Tôi đang cố gắng chuyển một số tham số tới một id trang được tạo trong jQuery Mobile.Chuyển tham số tới một id trang trong jQuery Mobile

Trang web này bao gồm danh sách-quan điểm với các liên kết, mỗi người trong số họ có băm mã hóa trong nó, như thế này:

<li><a href="#pronostico?region=12&ciudad=0">Puerto Natales</a></li> 

Tôi đã binded pagebeforechange để bắt băm trong URL, làm phát hiện thông số và thực hiện hành động tùy thuộc vào lượng thông số được truyền.

Bây giờ, với các tập tin cookie, tôi đã cố gắng này:

$(document).one("pageinit", function(event, data) { 
    if (location.hash.search(/^(#ciudades|#pronostico)/) === -1) { 
    if ($.cookie("recordar")) { 
     $.mobile.changePage($("#pronostico"), { 
     data: "region=" + $.cookie("region") + "&ciudad=" + $.cookie("ciudad") 
     }); 
    } 
    } 
}); 

Nhưng nó chỉ đưa tôi đến #pronostico trang-id, không có tham số trong băm. Kết quả là, tôi nhận được một trang mà không có thông tin được cho là hiển thị.

Xin cảm ơn trước.

Trả lời

31

Có, thông số trên băm không được hỗ trợ theo mặc định. Tôi đã sử dụng các plugin sau để cho tôi đó, và nó đã làm việc khá tốt cho đến nay ;-)

jqm.page.params

CẬP NHẬT - CÁCH SỬ DỤNG:

Tôi đã thêm đoạn mã sau sau đó có jqm.page.params.js:

$(document).bind("pagebeforechange", function(event, data) { 
    $.mobile.pageData = (data && data.options && data.options.pageData) 
     ? data.options.pageData 
     : null; 
}); 

vì vậy, ví dụ, một trang bị gọi như: # tìm kiếm index.html id = mysearchkeyword Bây giờ có thể truy cập vào thông tin này trong mọi trường hợp trang tôi cảm thấy thích:

$(document).on("pagebeforeshow", "#firstpage", function(e, data){ 
        if ($.mobile.pageData && $.mobile.pageData.id){ 
            console.log("Parameter id=" + $.mobile.pageData.id); 
        } 
 }); 

Sẽ in "mysearchkeyword" vào bảng điều khiển ghi nhật ký của bạn.

Hy vọng điều này sẽ hữu ích!

PS: Lưu ý rằng tôi không có cách nào liên kết với các plugin hoặc đó là tác giả

Biên tập Lưu ý: Tác giả đã có điều này là khối mã thứ hai. Trong Jquery 1.9, live được loại bỏ vì vậy tôi đã cập nhật mẫu của mình ở trên bằng một cú pháp .on thay vào đó. Đây là bản gốc:

$("#firstpage").live("pagebeforeshow", function(e, data){ 
    if ($.mobile.pageData && $.mobile.pageData.id){ 
     console.log("Parameter id=" + $.mobile.pageData.id); 
    } 
}); 
+0

Điều này có vẻ hữu ích và tôi nghĩ rằng tôi cần mẫu của bạn để biết cách hoạt động của tính năng này. Tôi có cần thay đổi 'pagebeforechange' mà tôi đã triển khai trong trang web của mình khi sử dụng plugin này không? – noquierouser

+0

mã mẫu của tôi được thêm dưới dạng bản cập nhật ở trên, hãy đánh dấu là câu trả lời nếu điều này phù hợp với bạn! Cảm ơn – Leon

+0

Tôi đã có một vấn đề tương tự và thấy câu trả lời này rất hữu ích. http://stackoverflow.com/questions/10354455/jquery-mobile-url-parameter-not-updating-in-browser-but-getting-correct-one-wit –

2

Plugin không hỗ trợ đánh dấu trang. Nếu bạn thêm một handler pagechange, bạn có thể khắc phục điều đó bằng cách đặt params trở lại vào url sau jQM được thực hiện với nó:

// list of inner pages where you want to support params AND bookmarking 
// maybe better to use a CSS class name to mark them 
var $paramPages; 
$(document).ready(function() { 
    $paramPages = $('#book, #order'); 
}); 

// put the params back into the location once jQM is done 
// 
$(document).bind("pagechange", function(e, data) { 
    if (data.toPage.is($paramPages) && data.absUrl) { 
     window.location.replace(data.absUrl); 
    } 
}); 
0

Nó trông giống như một cách để đạt được thông qua các thông số URL giữa các trang là sử dụng băm cách tiếp cận xử lý trong ví dụ này từ tài liệu jQuery Mobile: http://demos.jquerymobile.com/1.4.1/navigation-hash-processing/

Giải pháp này có vẻ lý tưởng vì, không giống như các giải pháp khác, nó cập nhật URL trong thanh địa chỉ trình duyệt để bao gồm các thông số URL khi thay đổi giữa các trang. Cách tiếp cận này cũng giúp loại bỏ nhu cầu sử dụng bất kỳ plugin nào như 'jqm.page.params'.