DIV CSS 佈局教程網

js鎖屏
編輯:JavaScript綜合知識     

   jquery插件源碼:

  /**

  * 對jquery中$.ajax進行封裝,以便加入鎖屏功能

  * isAsync 是否為異步請求,默認為true

  * isLock 是否鎖屏,默認是true

  * isCache 是否從浏覽器緩存中加載信息,默認是fasle

  ***/

  ;(function($) {

  $.fn.doPost = function(settings) {

  settings = jQuery.extend({

  isAsync:true,

  type : "post",

  url : null,

  dataType : null,

  data : null,

  success : null,

  error : toError,

  isLock : true,

  isCache : false

  }, settings);

  $(this).each(function(){

  if(settings.isLock){

  lockSrc();

  }

  $.ajax({

  async:settings.isAsync,

  type:settings.type,

  url:settings.url,

  dataType:settings.dataType,

  data:settings.data,

  cache:settings.isCache,

  success:function(msg){

  if(settings.isLock){

  unlockSrc();

  }

  settings.success(msg);

  },

  error:settings.error

  });

  });

  //鎖屏方法

  function lockSrc(){

  $(".lockDiv").css({"opacity":"0.5"}).fadeIn('normal');

  var scrollWidth = document.documentElement.clientWidth;//document.body.clientWidth;

  var scrollHeight =document.documentElement.clientHeight; // document.body.clientHeight;

  var divWidth = $(".lockDivInfo").width();

  var divHeight = $(".lockDivInfo").height();

  var divLeft = scrollWidth/2-divWidth/2;

  var divTop = scrollHeight/2-divHeight/2;

  //console.log("bodyWidth="+scrollWidth+",bodyHeight="+scrollHeight+",divHeight="+divHeight+",divWidth="+d

ivWidth+",left="+divLeft+",top="+divTop);

  $(".lockDivInfo").css({"position":"absolute","top":divTop,"left":divLeft}).fadeIn('normal');

  }

  //解屏方法

  function unlockSrc(){

  $(".lockDivInfo").fadeOut('normal');

  $(".lockDiv").fadeOut('normal');

  }

  function toError(){

  alert("操作失敗!");

  }

  };

  })(jQuery);

  鎖屏樣式:

  /*

  鎖屏

  */

  .lockDiv {

  width: 100%;

  height: 100%;

  display: none;

  z-index: 10;

  background-color: #DFE8F6;

  position: absolute;

  top: 0px;

  left: 0px;

  }

  .lockDivInfo {

  width: 50px;

  height: 2px;

  display: none;

  position: absolute;

  left: 0px;

  top: 0px;

  z-index: 11

  }

  #CloseDiv {

  float: right;

  width: 100px;

  height: 100px;

  margin-top: 10px;

  margin-right: 10px;

  }

加載中...

  使用方法

  //查詢

  $("#queryBtn").click(function(){

  selecCheckByRegionApp.query();

  });

  var selecCheckByRegionApp={};

  selecCheckByRegionApp.query=function(){

  var settion={

  type:"post",

  url: 'selfCheckStatisticAction!findByRegion' ,

  dataType:"text",

  data:$("#searchForm").formSerialize(),

  success:function(msg){

  $("#contentDiv").html(msg);

  }

  };

  $("#queryBtn").doPost(settion);

  }

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved