jquery-ui之dialog的使用
来源:互联网 发布:单片机红绿灯电路图 编辑:程序博客网 时间:2024/05/16 13:04
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/
阅读全文
0 0
- jquery-ui之dialog的使用
- jQuery UI dialog 的使用
- jQuery UI dialog 的使用
- jQuery UI dialog 的使用
- jQuery UI dialog 的使用
- jQuery UI dialog 的使用
- jQuery UI dialog 的使用
- jQuery UI之对话框(dialog)的使用
- 使用 jQuery UI Dialog
- 使用 jQuery UI Dialog
- jQuery UI dialog 的使用总结
- Jquery UI 中的dialog的简单使用
- 转:jQuery UI dialog 的使用
- 使用jquery ui创建dialog
- jQuery UI Dialog 参数使用
- jQuery UI之dialog中各属性的详解
- jQuery UI全教程之一(dialog的使用教程)
- jQuery UI全教程之一(dialog的使用教程)
- 《Advanced Bash-scripting Guide》学习(七):描述、列表和确定是否可以安装一个rpm包
- 2017.6.26 学习记录 MyEclipse的基础复习及代码
- Java中的阻塞队列
- HTML标签的使用
- java项目命名规范
- jquery-ui之dialog的使用
- 最大数
- mybatis批量插入clob,ORA-01461-仅能绑定要插入LONG列的LONG值
- Swing 的java文件写好之后显示不全的问题
- 个人开发环境搭建 ubuntu
- object detection目标检测,Image classification图片分类,Instance Segmentation 和 Semantic Segmentation
- Python 刷题日记:LeetCode: 1&15&16-Two Sum and 3Sum
- RecyclerView ItemTouchHelper源码分析扩展
- 微软云Centos byobu安装