jquery蒙版控件實現(xiàn)代碼
更新時間:2010年12月08日 15:47:15 作者:
jquery蒙版控件實現(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秒)自動關(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秒)自動關(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 validation驗證身份證號,護照,電話號碼,email(實例代碼)
jquery validation驗證身份證號,護照,電話號碼,email(實例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11Jquery簡單實現(xiàn)GridView行高亮的方法
這篇文章主要介紹了Jquery簡單實現(xiàn)GridView行高亮的方法,實例分析了jQuery頁面元素的選擇與屬性操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06jQuery 追加元素的方法如append、prepend、before
jQuery - 追加元素的方法有很多如append、prepend、before等等,下面為大家詳細介紹下2014-01-01Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中功能的實現(xiàn)代碼,需要的朋友可以參考下。2011-10-10