jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
功能:zhou en ce同學(xué)最近寫了個(gè)基于jquery的信息彈出插件showInfoDialog,該插件對(duì)背景進(jìn)行遮罩,然后彈出信息顯示框,信息顯示種類包括:
一、信息種類說明:
1.1、操作成功信息
1.2、錯(cuò)誤信息
1.3、警告信息
1.4、通知信息
二、使用說明
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="style/showInfoDialog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-showInfoDialog.js"></script>
</head>
<body style="background-color:#4ed">
<div id = "test" style="width:1000px;height:800px;background-color:#fff">
</div>
<script type="text/javascript">
var options = {
'dialogType' : 'info',
'theme' : 'info',
'message' : '數(shù)據(jù)加載完成!',
'refresh' : false
};
$("#test").showInfoDialog(options);
</script>
</body>
</html>
該例中對(duì)id為test的標(biāo)簽進(jìn)行遮罩,然后顯示信息
簡單設(shè)置:
除包含必要的js,css文件外,另外需設(shè)置dialogType,theme屬性,dialogType有四種方式:success,error,warning,info; 對(duì)應(yīng)于四種主題(theme)設(shè)置:success,error,warning,info
message是需要顯示的數(shù)據(jù);
refresh代表關(guān)閉彈出框后是否需要重新加載頁面
擴(kuò)展:你可以添加自己的主題,格式如下:
.info {border: 3px solid #2FADD7; background: #92D6ED repeat-x top;}
.info span {color: #0E7A9F;}
.info .closestatus a {background: #2FADD7;}
.info .closestatus a:hover {background: #228DB0;}
- jQuery+css+html實(shí)現(xiàn)頁面遮罩彈出框
- jquery實(shí)現(xiàn)一個(gè)簡單好用的彈出框
- jquery彈出框的用法示例(一)
- 基于jQuery的彈出框插件
- 基于jquery的彈出提示框始終處于窗口的居中位置(類似于alert彈出框的效果)
- jquery彈出框插件jquery.ui.dialog用法分析
- jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
- js彈出框輕量級(jí)插件jquery.boxy使用介紹
- JQuery 彈出框定位實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)消息彈出框效果
相關(guān)文章
jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面,并分享了源碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10鼠標(biāo)拖動(dòng)實(shí)現(xiàn)DIV排序示例代碼
鼠標(biāo)拖動(dòng)實(shí)現(xiàn)DIV排序的教程有很多,在本文將為大家詳細(xì)介紹個(gè)不錯(cuò)的示例,對(duì)比傳統(tǒng)的排序,這是一個(gè)很不錯(cuò)的嘗試2013-10-10jquery(live)中File input的change方法只起一次作用的解決辦法
jquery中File input的change方法只起一次作用的解決辦法,需要的朋友可以參考下。2011-10-10jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
本文給大家分享的是一個(gè)使用jQuery插件windowScroll實(shí)現(xiàn)的單屏滾動(dòng)的特效,主要參考搜狗瀏覽器4.2版本首頁的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯,非常的實(shí)用。2015-07-07JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱為模塊測(cè)試,是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來檢驗(yàn)程式的內(nèi)部邏輯,也稱為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。2010-02-02jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07