DIV CSS 佈局教程網

 　　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);

　　}