Với jQuery, làm thế nào tôi có thể tô xám và vô hiệu hóa một trang web và sau đó hiển thị một số loại spinner trên đó?

Question

Tôi vẫn khá "xanh" khi nói đến phát triển web và lập trình javascript/jQuery, vì vậy mọi trợ giúp đều được đánh giá cao. Đây là những gì tôi muốn làm.

1. Tôi muốn làm điều tương tự như hộp thoại giao diện người dùng jQuery nơi nó đặt hình bán trong suốt trên toàn bộ trang và vô hiệu hóa nhấp vào bất kỳ điều khiển nào bên dưới.

2. Tôi muốn biết cách tôi có thể đặt một số loại lớp phủ spinner lên trên để cho biết rằng trang web đang hoạt động ở chế độ nền. Nếu tôi có thể sử dụng một tập tin GIF động mà sẽ là tốt, nhưng tôi không hoàn toàn chắc chắn về cách tiếp cận tốt nhất cho điều này.

Đây là ví dụ về hiệu ứng chuyển sang màu xám với hộp thoại: jQuery UI Example. Tôi muốn biết làm thế nào để tạo ra hiệu ứng này mà không có hộp thoại trên đầu trang. Tôi không có một ví dụ tốt về hành vi quay vòng.

Tất cả đề xuất, giới thiệu trang web và mã được đánh giá cao.

EDIT: Tôi không có nghĩa là "điều khiển spinner". Tôi sẽ cố gắng tìm một ví dụ về những gì tôi đang nghĩ đến bởi spinner.

EDIT: Những gì tôi có nghĩa là bởi "vòng xoay" là một gif tải của một số loại như "Chỉ số Big" gif trên trang web này: http://ajaxload.info/

Answer 1

Một cách để thực hiện là có một div bị ẩn theo mặc định và có thuộc tính để đặt màu nền thành màu xám (ví dụ # 666) và độ trong suốt được đặt thành 0,8.

Khi bạn muốn hiển thị sử dụng jQuery để có kích thước của cửa sổ trình duyệt/màn hình, hãy đặt kích thước div của bạn và hiển thị nó bằng zindex cao, do đó nó hiển thị ở trên cùng. Bạn cũng có thể cung cấp cho div này đồ họa gif spinner của bạn (không lặp lại, và tập trung).

Code:

#json-overlay { 
    background-color: #333; 
    opacity: 0.8; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 100; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background-image: url('ajax-loader.gif'); 
    background-position: center; 
    background-repeat: no-repeat; 
} 

Chỉ điều cần xem ra cho là chọn các yếu tố trong IE6, vì chúng sẽ hiển thị thông qua các div, vì vậy bạn có thể sử dụng jQuery bgframe để giải quyết đó, hoặc những gì tôi có thực hiện trong quá khứ chỉ ẩn các yếu tố được chọn khi hiển thị div và hiển thị lại chúng khi ẩn div

Answer 2

Tôi luôn luôn thích sử dụng các plugin jQuery BlockUI: http://malsup.com/jquery/block/

Xem bản trình diễn, có thể bạn sẽ tìm thấy nội dung nào đó mà bạn đang tìm kiếm ở đó.

Answer 3

Tại sao bạn không chỉ sử dụng "phương thức: đúng"?

$(function() { 
     $("#dialog").dialog($.extend({}, dialogOptions, { 
      autoOpen: false, 
      width: 500, 
      modal: true, 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "fade", 
       duration: 1000 
      } 
     })); 

     $("#profile_edit").click(function() { 
      $("#dialog").dialog("open"); 
     }); 

     $("#save_and_close").click(function() { 
      $("#dialog").dialog("close"); 
     }); 
    }); 

Answer 4

Bạn có thể sử dụng mã như mã jquery này.Vượt qua id của phần tử mà bạn muốn ở lại trên đầu trang:

function startModal(id) { 
    $("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>"); 
    $("#PopupMask").css('opacity', 0.5); 
    $("#"+id).data('saveZindex', $("#"+id).css("z-index")); 
    $("#"+id).data('savePosition', $("#"+id).css("position")); 
    $("#"+id).css("z-index" , 11); 
    $("#"+id).css("position" , "fixed"); 
} 
function stopModal(id) { 
    if ($("#PopupMask") == null) return; 
    $("#PopupMask").remove(); 
    $("#"+id).css("z-index" , $("#"+id).data('saveZindex')); 
    $("#"+id).css("position" , $("#"+id).data('savePosition')); 
} 

Answer 5

bạn có thể sử dụng đơn giản div và sau đó ajaxstart và ajaxstop kiện

<div id="cover"></div> 

$('#cover') 
    .hide() 
    .ajaxStart(function() { 
     $(this).fadeIn(100); 
    }) 
    .ajaxStop(function() { 
     $(this).fadeOut(100); 
    });