Làm thế nào để có được Anchor Links hoạt động trong Jquery Mobile?

Question

Jquery Mobile đã quyết định xử lý các liên kết anchor dưới dạng yêu cầu trang sắp xếp. Tuy nhiên, điều này là không tốt nếu bạn có một tải các bài đăng trên blog có liên kết anchor đến cùng một trang (tức là href = "# specs").

Có cách nào để vô hiệu hóa việc sử dụng liên kết neo của điện thoại di động trên một trang cụ thể mà tôi biết tôi sẽ không sử dụng nó để tôi có thể sử dụng liên kết cố định như họ đã định, để thả xuống một phần của trang ?

Tôi chỉ cần một giải pháp cho liên kết anchor trên cùng một trang (ví dụ: href = "# specs").

cảm ơn

Answer 1

Bạn có thể thử thêm data-ajax="false" vào thẻ liên kết.

Linking mà không Ajax

Liên kết trỏ đến các lĩnh vực khác hoặc có rel =, mục tiêu "bên ngoài" dữ liệu ajax = "false" hoặc thuộc tính sẽ không được nạp với Ajax. Thay vào đó, các liên kết này sẽ làm mới toàn bộ trang mà không cần chuyển đổi hoạt ảnh . Cả hai thuộc tính (rel = "external" và data-ajax = "false") đều có cùng tác dụng, nhưng ý nghĩa ngữ nghĩa khác: rel = "external" nên được sử dụng khi liên kết đến một trang hoặc miền khác, trong khi data- ajax = "false" rất hữu ích khi chỉ cần chọn một trang trong miền của bạn để được tải qua Ajax. Do các hạn chế về bảo mật, khung làm việc luôn chọn liên kết tới các miền bên ngoài ra khỏi hành vi Ajax .

Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

Answer 2

Bạn có thể thêm đoạn mã sau vào cuối trang của bạn:

<script type="text/javascript"> 
    $('a.native-anchor').bind('click', function(ev) { 
     var target = $($(this).attr('href')).get(0).offsetTop; 
     $.mobile.silentScroll(target); 
     return false; 
    }); 
</script> 

Và thêm lớp "bản địa-neo" để liên kết anchor của bạn.

Nó không phải là một tổng số sollution, bởi vì nút quay lại của trình duyệt của bạn sẽ chuyển bạn đến trang trước đó và không đến vị trí của liên kết, nhưng nó là tốt hơn so với các liên kết không làm việc ở tất cả.

tôi thấy sollution này ở đây: jQuery Mobile Anchor Linking

Answer 3

$(document).bind("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
}); 

Answer 4

Nếu bạn đang như tôi, chuyển đổi một trang web hiện và bạn không muốn phải đi qua mỗi trang ngay bây giờ. Bạn có thể thêm một dòng mã vào tiêu đề của bạn và tất cả các tiêu đề của bạn và tất cả các liên kết neo nội bộ hiện tại của bạn sẽ nhận được thẻ data-ajax = "false" được thêm vào.

Tất nhiên, điều này giả định bạn đang bao gồm tệp javascript của riêng bạn trong tiêu đề đã có. Nếu bạn không phải là bạn sẽ phải chạm vào mọi trang. Nhưng tôi có một tệp javascript duy nhất được bao gồm trong mọi trang nên tôi đã thêm dòng này ...

$("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 

Điều này đi vào khối $ (tài liệu) .ready() của bạn. Nếu bạn chưa có khối đó, đây là toàn bộ khối.

$(document).ready(function() { 
    $("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 
}); 

Hy vọng điều này sẽ hữu ích. Đó là cùng một giải pháp user700284 cung cấp nhưng theo cách tự động.

Answer 5

Cảm ơn bạn giải pháp này làm việc cho tôi

<script> 
    $(document).ready(function() { 
    $("a").each(function() { 
     if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false); 
    }); 
    }); 
</script> 

tôi thay # với index.php đó là gốc tài liệu của tôi. Tuy nhiên, nó không làm việc cho nút hình thức tức là input type="submit"

Answer 6

Trước tiên, bạn phải đặt mã này vào một tập tin custom.js

$(document).bind('mobileinit', function() { 
    $.mobile.loader.prototype.options.disabled = true; 
    $.mobile.ajaxEnabled = false; 
    $.mobile.linkBindingEnabled = false; 
    $.mobile.loadingMessage = false; 
}); 

Sau đó thêm tập tin này vào trang web của bạn trước khi jquery js di động là nạp vào. do sự kiện 'mobilinit' được kích hoạt ngay lập tức