jquery蒙版控件實(shí)現(xiàn)代碼
更新時(shí)間:2010年12月08日 15:47:15 作者:
jquery蒙版控件實(shí)現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。
樣式代碼:
#div_maskContainer
{
display: none;
}
/*蒙版樣式*/
#div_Mask{
z-index:1000;
filter:alpha(opacity=40);
position: absolute;
left:0px;
top:0px;
background-color: #D4D0C8;
}
/*顯示信息樣式*/
#div_loading{
width:300px;height: 60px;position: absolute;
border: 1px outset #B4E0F2;
padding-top: 40px;
text-align: center;
background-color: #CCE9F9;
z-index: 10000;
filter:alpha(opacity=100);!important
}
js控件代碼:
/**
蒙版信息控件
用法:
1.引用 mask.css
2.引用 mask.js
3.調(diào)用方法
var obj=new MaskControl();
//顯示蒙版提示信息
obj.show("顯示的提示信息");
//隱藏蒙版提示信息
obj.hide();
//顯示提示信息,并隔timeOut(1000代表1秒)自動(dòng)關(guān)閉
obj.autoDelayHide=function(html,timeOut)
*/
function MaskControl(){
this.show=function(html){
var loader=$("#div_maskContainer");
if(loader.length==0){
loader=$("<div id='div_maskContainer'><div id='div_Mask' ></div><div id='div_loading' ></div></div>");
$("body").append(loader);
}
self.loader=loader;
var w=$(window).width();
var h=$(window).height();
var divMask=$("#div_Mask");
divMask.css("top",0).css("left",0).css("width",w).css("height",h);
var tipDiv=$("#div_loading");
if(html==undefined)
html="";
tipDiv.html(html);
loader.show();
var x=(w-tipDiv.width())/2;
var y=(h-tipDiv.height())/2;
tipDiv.css("left",x);
tipDiv.css("top",y);
},
this.hide=function(){
var loader=$("#div_maskContainer");
if(loader.length==0) return ;
loader.remove();
},
this.autoDelayHide=function(html,timeOut){
var loader=$("#div_maskContainer");
if(loader.length==0) {
this.show(html);
}
else{
var tipDiv=$("#div_loading");
tipDiv.html(html);
}
if(timeOut==undefined) timeOut=3000;
window.setTimeout(this.hide,timeOut);
}
}
復(fù)制代碼 代碼如下:
#div_maskContainer
{
display: none;
}
/*蒙版樣式*/
#div_Mask{
z-index:1000;
filter:alpha(opacity=40);
position: absolute;
left:0px;
top:0px;
background-color: #D4D0C8;
}
/*顯示信息樣式*/
#div_loading{
width:300px;height: 60px;position: absolute;
border: 1px outset #B4E0F2;
padding-top: 40px;
text-align: center;
background-color: #CCE9F9;
z-index: 10000;
filter:alpha(opacity=100);!important
}
js控件代碼:
復(fù)制代碼 代碼如下:
/**
蒙版信息控件
用法:
1.引用 mask.css
2.引用 mask.js
3.調(diào)用方法
var obj=new MaskControl();
//顯示蒙版提示信息
obj.show("顯示的提示信息");
//隱藏蒙版提示信息
obj.hide();
//顯示提示信息,并隔timeOut(1000代表1秒)自動(dòng)關(guān)閉
obj.autoDelayHide=function(html,timeOut)
*/
function MaskControl(){
this.show=function(html){
var loader=$("#div_maskContainer");
if(loader.length==0){
loader=$("<div id='div_maskContainer'><div id='div_Mask' ></div><div id='div_loading' ></div></div>");
$("body").append(loader);
}
self.loader=loader;
var w=$(window).width();
var h=$(window).height();
var divMask=$("#div_Mask");
divMask.css("top",0).css("left",0).css("width",w).css("height",h);
var tipDiv=$("#div_loading");
if(html==undefined)
html="";
tipDiv.html(html);
loader.show();
var x=(w-tipDiv.width())/2;
var y=(h-tipDiv.height())/2;
tipDiv.css("left",x);
tipDiv.css("top",y);
},
this.hide=function(){
var loader=$("#div_maskContainer");
if(loader.length==0) return ;
loader.remove();
},
this.autoDelayHide=function(html,timeOut){
var loader=$("#div_maskContainer");
if(loader.length==0) {
this.show(html);
}
else{
var tipDiv=$("#div_loading");
tipDiv.html(html);
}
if(timeOut==undefined) timeOut=3000;
window.setTimeout(this.hide,timeOut);
}
}
相關(guān)文章
jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-07-07
將鼠標(biāo)焦點(diǎn)定位到文本框最后(代碼分享)
本文主要分享了將鼠標(biāo)焦點(diǎn)定位到文本框最后的實(shí)例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。?/a>
本篇文章主要對jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。┑氖褂米隽撕喴治稣f明。需要的朋友來看下吧2016-12-12
基于jQuery制作小圖標(biāo)上下滑動(dòng)特效
一個(gè)小圖標(biāo)特效,非常有趣的,下面給大家分享基于jquery制作的小圖標(biāo)上下滑動(dòng)特效,代碼簡單易懂,需要的朋友參考下2017-01-01
JavaScript和JQuery實(shí)用代碼片段(一)
JavaScript和JQuery實(shí)用代碼片段,喜歡學(xué)習(xí)jquery的朋友可以參考下。2010-04-04
基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果的方法,實(shí)例分析了jQuery中hide、show、toggle等函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
Javascript 使用ajax與C#獲取文件大小實(shí)例詳解
本文章向碼農(nóng)們介紹了js ajax獲取文件大小的實(shí)例,涉及JavaScript調(diào)用ajax交互及后臺(tái)C#文件操作的相關(guān)技巧,需要的朋友可以參考下2017-01-01

