對(duì)話框插件——dialog
對(duì)話框插件可以用動(dòng)畫的效果彈出多種類型的對(duì)話框，實(shí)現(xiàn)JavaScript代碼中alert()和confirm()函數(shù)的功能，它的調(diào)用格式為：
$(selector).dialog({options});
selector參數(shù)為顯示彈出對(duì)話框的元素，通常為<div>，options參數(shù)為方法的配置對(duì)象，在對(duì)象中可以設(shè)置對(duì)話框類型、“確定”、“取消”按鈕執(zhí)行的代碼等。
例如，當(dāng)點(diǎn)擊“提交”按鈕時(shí)，如果文本框中的內(nèi)容為空，則通過dialog插件彈出提示框，提示輸入內(nèi)容不能為空，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)文本框的內(nèi)容為空時(shí)，調(diào)用自定義的sys_Alert函數(shù)，在該函數(shù)中再調(diào)用dialog插件的dialog()方法，彈出帶模式的顯示信息對(duì)話框。
任務(wù)
我來試試，親自調(diào)用dialog插件彈出帶模式的詢問信息對(duì)話框
在下列代碼的第30行，調(diào)用對(duì)話框插件的dialog()方法，彈出詢問對(duì)話框。
- ?不會(huì)了怎么辦
-
- 首先，通過選擇器獲取需要彈出對(duì)話框的頁面元素，本示例中該元素為Id號(hào)為“dialog-modal”的指定元素，然后，通過該元素再調(diào)用
dialog()方法。
- 在
dialog()方法中，通過“buttons”屬性設(shè)置彈出對(duì)話框中按鈕的顯示文本和點(diǎn)擊時(shí)執(zhí)行的代碼，通過“open”屬性設(shè)置彈出對(duì)話框中顯示的內(nèi)容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>對(duì)話框插件</title>
<link href="http://yifanck.cn/data/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://yifanck.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://yifanck.cn/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="content">
<span id="spnName" class="fl">張三</span>
<input id="btnDelete" type="button" value="刪除" class="fr"/>
</div>
<div id='dialog-modal'></div>
</div>
<script type="text/javascript">
$(function () {
$("#btnDelete").bind("click", function () { //詢問按鈕事件
if ($("#spnName").html() != null) { //如果對(duì)象不為空
sys_Confirm("您真的要?jiǎng)h除該條記錄嗎？");
return false;
}
});
});
function sys_Confirm(content) { //彈出詢問信息窗口
?({
height: 140,
modal: true,
title: '系統(tǒng)提示',
hide: 'slide',
buttons: {
'確定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}
</script>
</body>
</html>
body
{
font-size: 62.5%;
}
#divtest
{
width: 282px;
}
#divtest .content
{
background-color: #eee;
padding: 8px;
height: 23px;
line-height: 23px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
