<head> <meta charset="utf-8"> <title>jQuery UI Dialog - Modal form</title> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.min.js"></script> <script src="js/jquery.ztree.core-3.5.js"></script> <script src="js/jquery.ztree.excheck-3.5.js"></script> <script> $(function() { var setting = { check: { enable: true, chkStyle: "radio", radioType: "all" }, data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"随意勾选 1", open:true}, { id:11, pId:1, name:"随意勾选 1-1", open:true}, { id:111, pId:11, name:"随意勾选 1-1-1"}, { id:112, pId:11, name:"随意勾选 1-1-2"}, { id:12, pId:1, name:"随意勾选 1-2", open:true}, { id:121, pId:12, name:"随意勾选 1-2-1"}, { id:122, pId:12, name:"随意勾选 1-2-2"}, { id:2, pId:0, name:"随意勾选 2", checked:true, open:true}, { id:21, pId:2, name:"随意勾选 2-1"}, { id:22, pId:2, name:"随意勾选 2-2", open:true}, { id:221, pId:22, name:"随意勾选 2-2-1", checked:true}, { id:222, pId:22, name:"随意勾选 2-2-2"}, { id:23, pId:2, name:"随意勾选 2-3"} ]; $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "确定": function() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true); var result = ""; var tt = ""; for(var i=0;i<nodes.length;i++){ if(!nodes[i].isParent){ result += nodes[i].name + ","; tt = nodes[i].id; } } $("#deptList").html(result); $("#deptid").val(tt); $( this ).dialog( "close" ); }, "取消": function() { $( this ).dialog( "close" ); } }, close: function() { } }); $( "#create-user" ) .button() .click(function() { $.fn.zTree.init($("#treeDemo"), setting, zNodes); $( "#dialog-form" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog-form" title="部门结构" > <div style="z-index:990;"> <ul id="treeDemo" class="ztree"></ul> </div> </div> <button id="create-user">选择部门</button> <span id="deptList"></span> <input id="deptid" type="text" value=""> <div class="demo-description"> </body> </html>
相关推荐
引入jqueryui、ztree 的js和css文件 <body> <button value=”点击弹出树的dialog对话框” onclick =”getTree()”/> ”ztree” class=”ztree”/> </body> [removed] function getTree(){ var url...
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
JQuery UI 的对话框的一些属性的用法
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
jQuery UI dialog 的使用 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。 详情内容可以参考文档
NULL 博文链接:https://wufan0023.iteye.com/blog/1446334
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
添加按钮弹出层jqueryui实现,dialog
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
jQuery_UI全教程之一_dialog以及Datepicker使用说明 jQuery UI全教程之一(dialog的使用教程) 2011-03-15 17:41 jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可...
最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了。 运行插件,需要的环境如下 [removed][removed] [removed][removed] <link href=”CSS/themes/redmond/jquery.ui...
jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是: (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
JQuery UI Dialog 弹出框以及清楚数据
我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单。。。当然了,大家可以看到,我还有一个插入数据的功能,这...
jQuery UI Cookbook(2013.7) Adam Boduch (pdf + ePub) 出版时间:2013.7 Adam Boduch Packt 内容简介: jQuery UI is the quintessential framework for creating professional user interfaces. While jQuery ...
几天在做一个交互的原型,第一次大量采用jQueryUI,确实非常方便好用,其中一些功能点用到了弹出确认提示框,看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭
一个小的网站等待效果的例子,jquery做的,jquery的dialog,这里有div的z-index控制着div层的重叠顺序