<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>
相关推荐
"jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能，使其具备最大化和最小化的操作，这对于创建更灵活且类似于桌面应用的网页交互体验至关重要。 jQuery UI Dialog组件默认情况...
总的来说，jQuery UI Dialog的扩展性非常强，开发者可以根据项目需求对其进行深度定制，结合Ajax实现动态内容加载，或是添加自定义事件和行为，以构建出更加丰富、交互性强的前端应用。理解并掌握Dialog的扩展技巧，...
引入jqueryui、ztree 的js和css文件 <body> <button value=”点击弹出树的dialog对话框” onclick =”getTree()”/> ”ztree” class=”ztree”/> </body> [removed] function getTree(){ var url...
在使用 Dialog 之前，确保你的页面已经引入了 jQuery 和 jQuery UI 的 CSS 和 JS 文件。你可以从 jQuery 官方网站下载，或者使用 CDN 链接。例如： ```html <script src="https://code.jquery....
JQuery UI Dialog 是一个功能强大且灵活的对话框组件，它提供了许多有用的属性和方法来帮助开发者快速创建自定义的对话框。在本文中，我们将详细介绍 JQuery UI Dialog 的一些重要属性和方法，并提供实践中常见的...
需要注意的是，使用jQuery UI的Dialog需要引入jQuery库和jQuery UI库的相关资源，包括CSS和JavaScript文件。标签中的"源码"可能指的是获取和理解jQuery UI Dialog的内部工作原理，而"工具"可能是指使用在线代码编辑...
本文档将详细介绍 Jquery UI Dialog 的各项属性及其用法，并通过实例代码帮助读者更好地理解和掌握这一组件。 #### 二、Jquery UI Dialog 属性详解 ##### 1. `autoOpen` - **说明**：`autoOpen` 属性控制对话框...
总结来说，"jqueryUI_dialog实例"主要涉及了如何使用jQuery UI库中的Dialog组件创建交互式的对话框，并通过添加按钮和配置参数来实现特定的功能。掌握这些知识，能够帮助开发者构建更具有吸引力和用户体验友好的Web...
`jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例，它提供了丰富的交互式对话框功能，包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开（open）模式。这个插件使得在...
在web开发中，jQuery UI...首先，要使用jQuery UI的dialog组件，必须确保已经正确引入了jQuery库以及jQuery UI库。根据提供的内容，我们了解到引入jQuery库的方式是通过在HTML文档的部分插入标签，如下所示： ```html ...
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
本文将对jQuery Dialog进行深入探讨，并结合实践应用，帮助读者掌握其核心知识点。 一、jQuery Dialog基础 1. 初始化Dialog：创建Dialog的第一步是选择一个HTML元素，并通过`.dialog()`方法将其转化为对话框。例如...
总的来说，“Best jQuery UI”是一个全面介绍和展示jQuery UI功能的资源集合，它涵盖了从基础到高级的各种用例，对于开发者来说，无论是初学者还是有经验的程序员，都是一个极好的学习和参考资源。通过实践这些案例...
jQuery UI Frame Dialog则是这个库的一个特定组件，专为构建具有边框和自定义样式的对话框而设计。在网页开发中，对话框通常用于显示警告、确认信息，或者作为轻量级的窗口来展示内容或进行交互。 该插件的主要功能...
这个中文帮助文档是针对jQuery UI的详细指南，旨在帮助开发者更好地理解和使用这个强大的工具集。 ### 1. jQuery UI 的主要功能 jQuery UI 包含了多种功能模块，包括但不限于： - **TABS（选项卡）**: 提供了一种...
里面是经过修改的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
五、Dialog与其他jQuery UI组件的结合使用 jQuery UI提供了一系列组件，如DatePicker、Accordion等，它们可以与Dialog组件无缝集成。例如，将DatePicker放入Dialog中，创建一个带有日期选择功能的对话框： ```html...
在本文中，我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能，包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先，让我们了解...
jQuery UI 包含了大量的预设样式和功能，这些组件易于定制且兼容性广泛，支持多种浏览器，包括IE6及以上版本。 ### 主要组件 1. **Tabs（选项卡）**：jQuery UI 提供了方便的选项卡组件，可以将内容分隔成多个部分...