2010-04-09 3 views
11

Tôi đang làm việc trên hệ thống vé, có yêu cầu sau:
Trang chủ được chia thành hai phần:
Sec-1. Một số tùy chọn lọc được hiển thị ở đây (như vé đóng, vé mở, vé tất cả, vé được giao cho tôi, v.v.). Bạn có thể chọn một hoặc nhiều bộ lọc này.
sec-2. Danh sách vé đáp ứng các bộ lọc ở trên sẽ được hiển thị tại đây.Gmail như lược đồ URL

Bây giờ đây là những gì tôi muốn: Khi tôi thay đổi bộ lọc
-> thay đổi sẽ được phản ánh trong URL, để người dùng có thể đánh dấu trang đó.
-> yêu cầu ajax sẽ đi và danh sách vé thỏa mãn các bộ lọc đã chọn sẽ được cập nhật trong giây lát.

Tôi muốn cùng mã được sử dụng để tải các vé ở cả ways-
(a) bằng cách chọn bộ lọc và
(b) bằng cách sử dụng các bookmark để tải lại trang.

Tôi có chút ý tưởng về làm thế nào để làm điều đó:
URL sẽ chứa các bộ lọc được lựa chọn (nối sau #)
thay đổi bộ lọc trên trang sẽ thay đổi một phần băm của URL và gọi một chức năng (nói. ajaxHandler()) để phân tích URL để nhận các bộ lọc và sau đó thực hiện một yêu cầu ajax để có được danh sách các vé được hiển thị trong phần 2.

Tôi sẽ gọi cùng chức năng ajaxHandler() trong window.onload.

Tôi cảm thấy đây là những gì Yahoo maps thực hiện.

Cách tốt nhất để triển khai sơ đồ URL như vậy là gì?
Tôi có đi đúng hướng không?

+0

Gmail là một trong những dịch vụ như vậy bằng cách sử dụng tính năng này. Bất kỳ ví dụ nào khác? – Varun

Trả lời

7

Vâng - bạn đang đi đúng hướng direciton, và có rất nhiều công việc đã làm điều này một cách chính xác trên tất cả các trình duyệt và hệ điều hành. Một trong những phần khó nhất để có được quyền là cho phép các nút quay lại và tiến trình của trình duyệt hoạt động chính xác khi bạn đang sử dụng cú pháp #urlfragment đó.

Một thư viện cung cấp sự hỗ trợ cho một điều như vậy: http://developer.yahoo.com/yui/history/

+0

Tôi đang sử dụng http://www.asual.com/jquery/address/ và nó hoạt động như một sự quyến rũ :) – Varun

0

Sử dụng thư viện yui cho lịch sử là một tùy chọn được đề cập trong nhận xét của sblom. Bạn có thể muốn xem xét việc chỉ cung cấp dấu trang hoặc nút liên kết trên trang của mình mà người dùng có thể nhấp vào để chuyển đến url nếu bạn không muốn xử lý các vấn đề tương thích với trình duyệt chéo.

Chúng tôi thực hiện tại đây http://connect.garmin.com/explore#sortField=relevance&currentPage=1 Có một liên kết ở trên cùng của bản đồ.

1

Đây là một câu trả lời đơn giản, nhưng những gì bạn muốn xem là sử dụng một phương pháp iframe ẩn cho AJAX của bạn, trái với XHR (đối tượng XMLHttpRequest). Điều này sẽ cho phép trình duyệt duy trì lịch sử, vì vậy các nút quay lại của bạn sẽ tiếp tục hoạt động.

Một số chi tiết: http://ajaxpatterns.org/IFrame_Call

2

Vâng, nếu bạn đang sử dụng jQuery có này thư viện đáng yêu bởi Asual: jQuery Address cho liên kết sâu. Họ có một tham chiếu API tốt và các ví dụ. Nó sẽ cung cấp cho bạn tất cả các công cụ bạn cần để triển khai ứng dụng của bạn.

+0

Tôi đang sử dụng cái này ngay bây giờ. Cảm ơn. – Varun

0

Trong Chrome, Safari và Firefox, bạn có thể sử dụng HTML5 history.pushStatehistory.replaceState() phương pháp

Một số tài liệu herehere.

1

Ben Alman đã tạo một plugin jQuery đầy đủ tính năng cho điều này được gọi là BBQ. IMO, nó tốt hơn nhiều so với plugin Địa chỉ.