jQuery-UI真是个好东西。。好用的小部件很多,autocomplete、dialog等
官网地址:http://jqueryui.com/
部件api地址:http://api.jqueryui.com/category/widgets/
1、引入文件:
jquery-ui.min.css
jquery-ui.min.js
注意:需要把下载的jquery-ui目录下的images目录放到项目中,其中有一些图标文件
2、定义一个div用来做dialog
<div id="my-dialog" title="dialog test add" hidden>
...
</div>
3、在js里定义dialog
var myDialog = $("#my-dialog").dialog({
title:'dialog test add',
autoOpen: false,
modal: true,
width: 800,
height: 600,
open: function(){
console.log("dialog open");
},
close: function () {
console.log("dialog close");
},
buttons: [
{
text: "save",
click: function() {
window.alert("save");
}
},
{
text: "cancel",
click: function() {
$(this).dialog("close");
}
}
]
});
4、打开dialog,修改名称:
myDialog.dialog("option","title", "dialog test update ").dialog("open");
说明:
就是定义一个div元素,配置dialog的一些选项,绑定dialog的一些事件,操作dialog的一些方法,这些配置项就是简单的英文意思
dialog具体的一些选项、事件、方法请参考dialog官方api文档:
http://api.jqueryui.com/dialog/