2012-06-27 25 views
6

Tôi có một vài html mục, mỗi trang chứa một trang JQM. Tôi cũng có một trang chỉ mục. Nó là một html đa trang JQM, với mỗi trang JQM như một danh mục liệt kê các mục.Cách ghi đè ajax = false để chuyển sang trang dom được tải nếu tồn tại

index.html     item1.html   item2.html 
    +------------------+  +--------+--------+ +-------- 
    |+-------+   |  +--|Cat. | Next|->|Cat. 
    ||.cont- |   |  | +--------+--------+ |-------- 
    ||ent |+-------+|<----+ |     | | 
    |+-------+|#cat1 ||  |     | | 
    |   |  ||  |bla bla bla  | |bla bla 
    |   |link1+---------->|     | | 
    |   |link2 ||  |     | | 
    |   +-------+|  +-----------------+ +-------- 
    |+-------++-------+| 
    ||#cat2 ||#cat3 || 
    ||  ||  || 
    ||link4 ||link3 || 
    ||  ||  || 
    |+-------++-------+| 
    +------------------+ 

Hiện tại tôi có thể liên kết từ chỉ mục đến mục, với tải ajax trơn tru. Tuy nhiên tôi nhận ra rằng nếu tôi muốn liên kết ngược từ mục này đến chỉ mụC# cat1, tôi cần sử dụng data-ajax='false' làm chỉ mục là một html nhiều trang. (Tôi không thể sử dụng data-rel='back' vì trang trước không phải lúc nào cũng là index.html).

Nếu tôi sử dụng ajax='false', tôi mất chuyển tiếp suôn sẻ nếu tôi chuyển đổi giữa danh sách và các mục thường xuyên (mỗi lần chuyển trở lại danh sách là tải lại đầy đủ). ví dụ:

-full-tải-> index # cat1 -ajax-tải-> ITEM2 -full-load (một lần nữa) -> index # cat1

Câu hỏi

tôi muốn:

-full-tải-> index # cat1 -ajax-tải-> ITEM2 -ajax-switch-to-already-loaded-> index # cat1

Làm cách nào để ghi đè liên kết di động jquery sao cho khi liên kết data-ajax='false' được nhấp, đầu tiên tìm kiếm để xem liệu chỉ mụC# cat1 đó đã trong dom? Nếu có, thì chỉ cần chuyển sang trang JQM đó. Nếu nó không tồn tại, hãy tải đầy đủ chỉ mụC# cat1 mà không có ajax (như hành vi mặc định).

Hãy nhớ rằng người dùng có thể bắt đầu từ item1.html và điều hướng đến index.html # cat1.

Tôi biết mình cần đánh dấu từng trang JQM với một số thuộc tính tùy chỉnh, như data-full-url="index.html#cat1" để giúp tìm kiếm các trang hiện có dễ dàng hơn. Tuy nhiên điểm yếu chính của tôi là làm thế nào tôi có thể thay đổi logic liên kết Jquery Mobile hiện tại.

+0

+1 cho vẽ đẹp :) –

+3

không thể làm điều đó mà không http://www.asciiflow.com/ – lulalala

+0

Tại sao không chỉ tách từng giả trang vào tài liệu HTML khác nhau? Bạn đang đạt được gì bằng cách tạo ra logic phức tạp này? Nếu đó là về thời gian tải cảm nhận thì tôi khuyên bạn nên sử dụng các tài liệu riêng biệt và sử dụng thuộc tính 'data-prefetch' để tránh trễ điều hướng không mong muốn. – Jasper

Trả lời

0

Tôi đã tạo tình huống của bạn trong các câu đố sau.

trang 1) chỉ số: http://jsfiddle.net/nachiket/RpZW7/
trang 2) mục chi tiết: http://jsfiddle.net/nachiket/cHmhW/ (cái này đã được liên kết trong trang index fiddle)

tôi đã không sử dụng dữ liệu ajax = 'false', Liệu nó giải quyết vấn đề của bạn? Nếu không, hãy cập nhật câu đố này cho tình huống chính xác của bạn, để có thể giúp đỡ tốt hơn.

+0

cảm ơn. Vì vậy, vấn đề của tôi là, nếu người dùng của tôi bắt đầu từ trang mục, tôi muốn cho phép nó liên kết trở lại chỉ mụC# cat1. Phiên bản hiện tại của tôi là tại http://jsfiddle.net/lulalala/nuL6h/2/ – lulalala

+0

tốt, tôi không nghĩ rằng, nó sẽ dễ dàng để đạt được quá trình chuyển đổi mà không có Ajax. Những gì tôi làm là tôi giữ một ứng dụng trang duy nhất, và điều hướng thông qua ajax và duy trì lịch sử/làm mới bằng cách sử dụng thay đổi băm. vì vậy, nếu mục tải 1 và mục 2 dễ dàng hơn chỉ sử dụng Ajax. bạn vẫn có thể yêu cầu máy chủ tải nội dung của item1 và item2, nhưng nó sẽ chỉ cung cấp một phần nội dung, chứ không phải là trang HTML đầy đủ. – Nachiket

+0

chỉ số thời gian linh hoạt được tải, rõ ràng nó sẽ không phải là một tải ajax. Một trường hợp sẽ là: item1 - full-load-> index # cat1 --ajax-load-> item2 --js-switch-> index # cat1 – lulalala

0

jsfiddle có vẻ không hoạt động, điều này có gần với ví dụ của bạn không?

tôi đặt rằng trong một máy chủ địa phương

Đối với nút quay lại của item1 bạn có thể đặt toàn bộ url: http://localhost/home.html#cat1, nó cũng sẽ làm việc

home.html:

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>home</h3> 
    </div> 
    <div data-role="content"> 
     hello home 
     <a href="home.html#cat1" type="button">cat1</a> 
     <a href="home.html#cat2" type="button">cat2</a> 
    </div> 
</div> 

<div data-role="page" id="cat1"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>cat1</h3> 
    </div> 
    <div data-role="content"> 
     hello cat1 
     <a href="#home" type="button">home</a> 
     <a href="item1.html" type="button">see item1</a> 
    </div> 
</div> 

<div data-role="page" id="cat2"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>"cat2</h3> 
    </div> 
    <div data-role="content"> 
     hello cat2 
     <a href="#home" type="button">home</a> 
    </div> 
</div> 

    </body> 
</html>​​​​​​​​​​​​ 

item1.html

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="item1Home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>item1's home</h3> 
    </div> 
    <div data-role="content"> 
     hello item1 
     <a href="home.html#cat1" type="button" rel="external">back?</a> 
    </div> 
</div> 


    </body> 
</html>​​​​​​​​​​​​ 
+0

có đây là giải pháp hiện tại của tôi, nhưng những gì tôi muốn là để tránh tải lại toàn bộ home.html nếu nó đã được tải trước đây – lulalala

+0

trình duyệt sẽ sử dụng bộ nhớ cache của nó, dễ dàng hơn nếu bạn giữ điều hướng ajax –

+0

ngay cả với bộ nhớ cache chậm đáng chú ý, vì trang chỉ mục của tôi khá lớn . Và cố gắng điều hướng ajax là vấn đề tôi muốn giải quyết, không phải thứ tôi cố tránh. – lulalala

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