EasyUI中Dialog对话框的简单使用

最新推荐文章于 2023-05-09 08:40:54 发布

霸道流氓气质

最新推荐文章于 2023-05-09 08:40:54 发布

阅读量641

点赞数

分类专栏： EasyUI EasyUI入门学习教程文章标签： dialog

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92849503

版权

EasyUI 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

EasyUI入门学习教程

24 篇文章 3 订阅

订阅专栏

场景

效果

属性

该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。

名称	类型	描述	默认值
title	string	对话框的标题文本。	New Dialog
collapsible	boolean	定义是否显示折叠按钮。	false
minimizable	boolean	定义是否显示最小化按钮。	false
maximizable	boolean	定义是否显示最大化按钮。	false
resizable	boolean	定义对话框是否可调整尺寸。	false
toolbar	array,selector	对话框的顶部工具栏，可能的值： 1、数组，每个工具的选项都与链接按钮（linkbutton）一样。 2、选择器，指示工具栏。对话框工具栏可以在 <div>标签中声明： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',toolbar:'#tb',modal:true"> Dialog Content. </div> <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 对话框工具栏也可以通过数组定义： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, toolbar:[{ text:'Edit', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'Help', iconCls:'icon-help', handler:function(){alert('help')} }]"> Dialog Content. </div>	null
buttons	array,selector	对话框的底部按钮，可能的值： 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。 2、选择器，指示按钮栏。按钮可以在 <div>标签中声明： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',buttons:'#bb',modal:true"> Dialog Content. </div> <div id="bb"> <a href="#" class="easyui-linkbutton">Save</a> <a href="#" class="easyui-linkbutton">Close</a> </div> 按钮也可以通过数组定义： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',modal:true, buttons:[{ text:'Save', handler:function(){...} },{ text:'Close', handler:function(){...} }]"> Dialog Content. </div>	null

事件

该事件扩展自面板（panel）。

方法

该方法扩展自窗口（window），下面是为对话框（dialog）添加的方法。

名称	参数	描述
dialog	none	返回外部对话框（dialog）对象。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>
</body>
</html>

霸道流氓气质

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI中Dialog对话框的简单使用

场景效果属性该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。名称类型描述默认值 title string 对话框的标题文本。 New Dialog collapsible boolean 定义是否显示折叠按钮。 false minimizable boolean 定义是...
复制链接

扫一扫