cách hiển thị 'tải' trước khi nội dung từ các tab jquery được tải

Question

Tôi đang sử dụng các tab giao diện người dùng jquery và nội dung được tải vào tab nằm trên một trang khác. vì vậy nó đang tải thông qua ajax. Có một số độ trễ giữa quá trình tải trang trong đó phần màn hình trong đó nội dung của tab sẽ tải hoàn toàn trống. Có cách nào tôi có thể hiển thị một số thông báo như 'tải ....' cho đến khi nội dung tải không?

Mã của tôi là:

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

      <div id="tabs"> 
       <ul> 
        <li><a href="/failedPrescreenReport.jsp</a></li> 
        <li><a href="/failedverificationreport.jsp</a></li> 
        <li><a href="VerificationReport.action</a></li> 
       </ul> 
      </div> 

Tôi đã thử bằng cách sử dụng tùy chọn spinner của plugin này nhưng điều đó dường như không làm việc cho tôi ... (có thể css của tôi là sai lầm)

Answer 1

tôi sẽ khuyên bạn nên nghe các sự kiện jquery ajaxStart, ajaxStop và ajaxError, hiển thị cửa sổ bật lên "loading" của bạn trên ajaxStart, ẩn nó trên AjaxStop và ajaxError. Bằng cách này, cửa sổ bật lên tải của bạn sẽ hiển thị bất cứ khi nào yêu cầu ajax đang chờ xử lý mà không cần bất kỳ chương trình bổ sung nào.

Ví dụ:

$(function() { 
    $(this).ajaxStart(function() { 
    $("#ajaxLoading").show(); }); 
    $(this).ajaxStop(function() { 
    $("#ajaxLoading").hide(); }); 
}); 

Answer 2

Chỉ cần viết jquery plugin thời gian gần đây mà có thể hữu ích. Nó đặt một mặt nạ với một spinner trên một phần tử, vì vậy cho các cuộc gọi ajax của bạn, bạn có thể hiển thị mặt nạ trước khi các cuộc gọi của bạn và unmask nó trong một chức năng gọi lại ví dụ.

Answer 3

jquery blockui hoàn hảo cho việc này. Một giải pháp rất nhanh chóng, thanh lịch.

Answer 4

blockUI là tuyệt vời, nhưng tôi đặt cược http://plugins.jquery.com/project/loading phù hợp hơn với tình huống.

Answer 5

Không cần phải làm thêm nội dung, chỉ cần thêm span gắn thẻ neo của bạn. tôi nghĩ rằng nó bị mất trong tài liệu của jQuery.

dụ:

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li> 
     <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li> 
     <li><a href="VerificationReport.action"><span>Tab 3</span></a></li> 
    </ul> 
</div> 

khoảng thẻ là một phần quan trọng.

Answer 6

Thing tốt nhất tôi làm là chỉ này cho các tab ajax điều khiển ... Hy vọng bạn sẽ thích câu trả lời này

$ ("# facilityTabContainer") tab ({panelTemplate:. "Loading ..." , được chọn: 0, có thể cuộn: đúng, bộ nhớ cache: sai});

và thậm chí bạn có thể sửa đổi panelTemplate trong jquery.ui.tabs cũng để tất cả các tab trong ứng dụng của bạn sẽ tự động nhận được 'tải văn bản hoặc hình ảnh'. và đoán điều gì cũng giải quyết vấn đề tải tab đầu tiên của bạn quá ..