jQuery dialog組件的使用(1.7以上版本)

時間 2019-11-09

標籤 jquery dialog 組件使用 1.7 以上版本欄目 JQuery 简体版

原文原文鏈接

jquery ui組件的使用通常都是包括兩個部分：

定義標籤;
初始化組件

dialog組件的使用

首先定義標籤，例「<div id="dd">你好</div>」,標籤裏的內容「你好」就是未來彈出對話框的內容，標籤元素的內容可隨意擴展,在定義標籤時,必定要給個ID,目的就是將此元素標籤與dialog對話框關聯起來。注意：所定義的標籤元素是隱藏的，只有在觸發事件時，纔會彈出標籤訂義的內容。
初始化dialog組件
$("#dd").dialog({
title:"消息",//對話框標題
autoOpen:false,//是否自動彈出，通常爲false,不自動彈出
width:300,//對話框的寬度
height:200,//對話框的高度
minWidth:290,//對話框最小寬度
minHeight:160,//對話框最小高度
maxWidth:390,//對話框最大寬度
maxHeight:260,//對話框最大高度
position:["left","top"],//彈出對話框的位置
draggable:true,//是否能夠拖動
resizable:true,//是否能夠改變對話框的大小
closeOnEscape:false,//是否激活ESC關閉
modal:true //是否屏蔽窗口
});

觸發對話框
觸發對話框可使任意一個事件，在此我以單擊事件爲例
例，「<div id='da'></div>」
在單擊此元素是，觸發對話框
$("#da").click(function(){
$("#dd").dialog("open");//打開對話框
}

<html>
<head>
 <script src="jquery.ui.core.js"></script>
 <script src="jquery.ui.widget.js"></script>
 <script src="jquery.ui.mouse.js"></script>
 <script src="jquery.ui.position.js"></script>
 <script src="jquery.ui.resizable.js"></script>
 <script src="jquery.ui.draggable.js"></script>
 <script src="jquery.ui.sortable.js"></script>
 <script src="jquery.ui.dialog.js"></script>
</head>
<body>
<div id="dd"><span>你好</span></div>
<div id="da"></div>
<script type="text/javascript">
$(function(){
$("#dd").dialog({
title:"",
autoOpen:false,
width:300,
height:200,
closeOnEscape:false,
draggable:true,
resizable:false,
modal:true,
position:["center","center"]
});

$("#da").click(function(){
$("#dd").dialog("open");
});
});
</script>
<body>
</html>

);