easyui dialog的用法

最新推荐文章于 2024-04-11 16:55:56 发布
最新推荐文章于 2024-04-11 16:55:56 发布
阅读量1w 收藏 5
点赞数 2
分类专栏： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uotail/article/details/84947490
版权

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Basic Dialog - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>
    <h2>基本对话窗体组件</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>点击下面按钮打开或者关闭对话窗体.</div>
    </div>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="dialog()">打开</a>
    <!-- <div style="margin:10px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
    </div> -->
    <!-- <div id="dlg" class="easyui-dialog" title="基本对话框" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
        对话窗体内容。
    </div> -->
</body>

<script>

function dialog() {
    var div = document.createElement('div');
    div.setAttribute('id', 'div')
    var element= document.getElementsByTagName('body')[0];
    element.appendChild(div);
    //
    //Failed to load https://www.baidu.com/?_=1545205422040: 
    //No 'Access-Control-Allow-Origin' header is present on the requested resource. 
    //Origin 'null' is therefore not allowed access.跨越问题
    $('#div').dialog({
        href: 'https://www.baidu.com/',
        title: 'My Dialog',
        width: 400,
        height: 200,
        left:'20%',
        right: '20%',
        closed: false,
        cache: false,
        zIndex:10000,
        modal: true,
        title:"Toolbar and Buttons",
        iconCls: 'icon-save',
        buttons: [{
            text: 'Ok',
            iconCls: 'icon-ok',
            handler: function () {
                alert('ok');
            }
        }, {
            text: 'Cancel',
            handler: function () {
                alert('cancel');;
            }
        }],
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function () {
                alert('add')
            }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function () {
                alert('save')
            }
        }],
        // 居中
        onResize: function () {
            $(this).dialog('center');
        }
    });
}
</script>
</html>

 

题外话

http://www.cnblogs.com/henw/archive/2011/09/30/2196255.html

jQuery 引用地址{包括jquery和google提供的地址}

你可以使用这句代码读取jQuery的最新版本的代码文件。

jquery官方的引用地址:

示例:

1

<script src="http://code.jquery.com/jquery-latest.js"></script>

有效地址:

1

2

http://code.jquery.com/jquery-1.4.1.min.js

http://code.jquery.com/jquery-1.4.1.js

其中:1.4.1是版本信息

latest: 表示最新

Google引用地址:

可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

示例:

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>

有效地址:

1

2

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

其中:1.4.2是版本信息

 

easy ui的引用

http://www.jeasyui.com/documentation/index.php

最简单的方法   ---------来源java1234

<head>
	<meta charset="UTF-8">
	<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>

接下来就是正文

看看dialog 对话框组件的使用

http://www.jeasyui.com/documentation/dialog.php

先说几个常用的属性和方法

Properties

The properties extend from window, below is the overridden properties for dialog. 它的属性继承于windows，下面的属性是重写了的

NameTypeDescriptionDefault
title 标题stringThe dialog title text.New Dialog
collapsiblebooleanDefines if to show collapsible button.  是否显示可折叠按钮false
minimizablebooleanDefines if to show minimizable button. 是否显示可最小化按钮false
maximizablebooleanDefines if to show maximizable button.是否显示可最大化按钮false
resizablebooleanDefined if the dialog can be resized.  是否可调整大小false

toolbar

这个属性不常用，我开发中是没有遇到过

array,selectorThe top toolbar of dialog, possible values:
1) an array, each tool options are same as linkbutton.
2) a selector that indicating the toolbar.

The dialog toolbar can be declared within a <div> tag:

<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>

The dialog toolbar can also be defined via array:

<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,selectorThe bottom buttons of dialog, possible values:
1) an array, each button options is same as linkbutton.
2) a selector that indicating the button bar.

The buttons can be declared within a <div> tag:

<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>

The buttons can also be defined via array:

<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

Events

The events extend from window.   监听事件继承于window

Methods

The methods extend from window, below is the added methods for dialog. 方法也是都继承与windows

NameParameterDescription
dialognoneReturn the outer dialog object.

那就看下windows的事件和方法

http://www.jeasyui.com/documentation/window.php

Properties

The properties extend from panel, below is the overridden and added properties for window.

NameTypeDescriptionDefault
titlestringThe window title text.New Window
collapsiblebooleanDefines if to show collapsible button.true
minimizablebooleanDefines if to show minimizable button.true
maximizablebooleanDefines if to show maximizable button.true
closablebooleanDefines if to show closable button.  是否显示可关闭按钮true
closedbooleanDefined if to close the window.     是否关闭window窗口false
zIndexnumber

Window z-index,increase from it.  是number值，类比于Photoshop中的图层，它的值越大，就在页面的最前面显示，不会被其他组件覆盖，建议越大越好

https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index，这个很重要

 可见 黄色的z-index值最大

 

9000
draggablebooleanDefines if window can be dragged.true
resizablebooleanDefines if window can be resized.true
shadowbooleanIf set to true,when window show the shadow will show also. 是否展示阴影true
inlinebooleanDefines how to stay the window, true to stay inside its parent, false to go on top of all elements.false
modalbooleanDefines if window is a modal window.  是否定义为模态窗口，true则是只能操作当前窗口的元素，除非关闭这个窗口false
borderboolean,stringDefines the window border style. Possible values are: true,false,'thin','thick'. 边框样式true
constrainbooleanDefines if to constrain the window position. Available since version 1.5. 是否定于位置约束false

Events

The events extend from panel. 它的监听事件又继承于panel

Methods

The methods extend from panel, below is the added methods for window.方法也是如此

NameParameterDescription
windownoneReturn the outer window object.
hcenternoneCenter the window only horizontally. Available since version 1.3.1.  水平居中
vcenternoneCenter the window only vertically. Available since version 1.3.1.   垂直居中
centernoneCenter the window on screen. Available since version 1.3.1.   居中

 还得看下panel，这是最后一个

Properties

NameTypeDescriptionDefault
idstringThe id attribute of this panel.null
titlestringThe title text to display in panel header.null
iconClsstringA CSS class to display a 16x16 icon in panel.null
widthnumberSet the panel width.auto
heightnumberSet the panel height.auto
leftnumberSet the panel left position. 左边的绝对位置，一般写百分数，如   left: '85%',null
topnumberSet the panel top position.null
clsstringAdd a CSS class to the panel.null
headerClsstringAdd a CSS class to the panel header.null
bodyClsstringAdd a CSS class to the panel body.null
styleobjectAdd a custom specification style to the panel.

Code example to change the panel border width:

<div class="easyui-panel" style="width:200px;height:100px"
		data-options="style:{borderWidth:2}">
</div>
{}
fitboolean

When true to set the panel size fit it's parent container.

大小适应父容器

The example below shows a panel which can be auto resized to max inner dimensions of its parent container

<div style="width:200px;height:100px;padding:5px">
	<div class="easyui-panel" style="width:200px;height:100px"
			data-options="fit:true,border:false">
		Embedded Panel
	</div>
</div>
false
borderbooleanDefines if to show panel border.true
doSizebooleanIf set to true,the panel will be resize and do layout when created.true
noheaderbooleanIf set to true, the panel header will not be created.false
contentstring

The panel body content.

这个最重要，一般是一个页面的url，格式如下

content: "url:terminalResourceInfoController/goMaterialSelection",
null
halignstringThe panel header alignment. Possible values are: 'top','left','right'. Available since version 1.5.2.top
titleDirectionstringThe header title direction. Possible values are: 'up','down'. This property is valid only when the 'halign' property is set to 'left' or 'right'. Available since version 1.5.2.down
collapsiblebooleanDefines if to show collapsible button.false
minimizablebooleanDefines if to show minimizable button.false
maximizablebooleanDefines if to show maximizable button.false
closablebooleanDefines if to show closable button.false
toolsarray,selectorCustom tools, possible values:
1) an array, each element contains iconCls and handler properties. 
2) a selector that indicating the tools

The panel tools can be declared with exists <div> tag:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
	<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

The panel tools can also be defined via array:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>
[]
headerselectorThe panel header. Available since version 1.4.2.

Code example:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel">
	<header>Panel Header</header>
</div>
null
footerselectorThe panel footer. Available since version 1.4.1.

Code example:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="footer:'#ft'">
</div>
<div id="ft">Footer Content</div>
null
openAnimationstringThe opening animation. Available since version 1.4.1.
Available values are: 'slide','fade','show'.		 
openDurationnumberThe opening duration. Available since version 1.4.1.400
closeAnimationstringThe closing animation. Available since version 1.4.1.
Available values are: 'slide','fade','hide'.		 
closeDurationnumberThe closing duration. Available since version 1.4.1.400
collapsedbooleanDefines if the panel is collapsed at initialization.false
minimizedbooleanDefines if the panel is minimized at initialization.false
maximizedbooleanDefines if the panel is maximized at initialization.false
closedbooleanDefines if the panel is closed at initialization.false

href

这个和content有一拼，但是我们常用content

stringA URL to load remote data and then display in the panel. Notice that the content will not be loaded until the panel is open and expand. This is useful to create a lazy loading panel: 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href:'get_content.php',closed:true">
</div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cacheboolean

True to cache the panel content that loaded from href.

是否缓存url链接，即href属性请求的数据，默认为true，一般需要设为false

true
loadingMessagestringWhen loading remote data show a message in the panel.Loading…
extractorfunctionDefines how to extract the content from ajax response, return extracted data. 
extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}
 
methodstringThe http method to load content page. Available since version 1.3.6.get
queryParamsobjectThe additional parameters that will be sent when loading a content page. Available since version 1.3.6.{}
loaderfunctionDefines how to load content page from remote server. Available since version 1.3.6. This function takes following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.		 

Events

NameParametersDescription
onBeforeLoadparamFires before loading a content page, return false to ignore this action. Available since version 1.3.6.
onLoadnoneFires when remote data is loaded.
onLoadErrornoneFires when some errors occur to load content page. Available since version 1.3.6.
onBeforeOpennoneFires before panel is opened, return false to stop the open.
onOpennoneFires after panel is opened.
onBeforeClosenoneFires before panel is closed, return false to cancel the close. The panel declared below cannot be closed. 
<div class="easyui-panel" style="width:300px;height:200px;"
		title="My Panel" data-options="onBeforeClose:function(){return false}">
	The panel cannot be closed.
</div>
onClosenoneFires after panel is closed.
onBeforeDestroynoneFires before panel is destroyed, return false to cancel the destroy.
onDestroynoneFires after panel is destroyed.
onBeforeCollapsenoneFires before panel is collapsed, return false to stop the collapse.
onCollapsenoneFires after panel is collpased.
onBeforeExpandnoneFires before panel is expanded, return false to stop the expand.
onExpandnoneFires after panel is expanded.
onResizewidth, heightFires after panel is resized.
width: the new outer width
height: the new outer height
onMoveleft,topFires after panel is moved.
left: the new left postion
top: the new top position
onMaximizenoneFires after the window has been maximized.
onRestorenoneFires after the window has been restored to its original size.
onMinimizenoneFires after the window has been minimized.

Methods

NameParameterDescription
optionsnoneReturn options property.
panelnoneReturn the outer panel object.
headernoneReturn the panel header object.
footernoneReturn the panel footer object. Available since version 1.4.1.
bodynoneReturn the panel body object.
setTitletitleSet the title text of header.
openforceOpenWhen forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
closeforceCloseWhen forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
destroyforceDestroyWhen forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
clearnoneClear the panel content. Available since version 1.4.
refreshhrefRefresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property.

Code example:

// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resizeoptionsSet panel size and do layout. The options object contains following properties:
width: the new panel width
height: the new panel height
left: the new panel left position
top: the new panel top position

Code example:

$('#pp').panel('resize',{
	width: 600,
	height: 400
});
doLayoutnoneSet the sizes of child components within the panel. Available since version 1.4.
moveoptionsMove the panel to a new position. The options object contains following properties:
left: the new panel left position
top: the new panel top position
maximizenoneFits the panel winthin its container.
minimizenoneMinimizing the panel.
restorenoneRestores the maximized panel back to its original size and position.
collapseanimateCollapses the panel body. The 'animate' parameter value indicates if to use animation effect.
expandanimateExpand the panel body. The 'animate' parameter value indicates if to use animation effect.



实例演示

基本对话窗体组件

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Dialog - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本对话窗体组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击下面按钮打开或者关闭对话窗体.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
	</div>
	<div id="dlg" class="easyui-dialog" title="基本对话框" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
		对话窗体内容。
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Toolbar and Buttons - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>工具栏和按钮</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>工具栏和按钮可以添加到对话框体里去.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
	</div>
	<div id="dlg" class="easyui-dialog" title="工具栏和按钮" style="width:400px;height:200px;padding:10px"
			data-options="
				iconCls: 'icon-save',
				toolbar: [{
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
						alert('添加')
					}
				},'-',{
					text:'保存',
					iconCls:'icon-save',
					handler:function(){
						alert('保存')
					}
				}],
				buttons: [{
					text:'确定',
					iconCls:'icon-ok',
					handler:function(){
						alert('确定');
					}
				},{
					text:'关闭',
					handler:function(){
						alert('关闭');;
					}
				}]
			">
		对话窗体内容.
	</div>
	
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Complex Toolbar on Dialog - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>对话窗体上的复杂工具栏</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>这个示例教你如何在对话窗体上创建复杂工具栏.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
	</div>
	<div id="dlg" class="easyui-dialog" title="对话窗体上的复杂工具栏" style="width:400px;height:200px;padding:10px"
			data-options="
				iconCls: 'icon-save',
				toolbar: '#dlg-toolbar',
				buttons: '#dlg-buttons'
			">
		对话窗体内容.
	</div>
	<div id="dlg-toolbar" style="padding:2px 0">
		<table cellpadding="0" cellspacing="0" style="width:100%">
			<tr>
				<td style="padding-left:2px">
					<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
					<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a>
				</td>
				<td style="text-align:right;padding-right:2px">
					<input class="easyui-searchbox" data-options="prompt:'请输入...'" style="width:150px"></input>
				</td>
			</tr>
		</table>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('保存')">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
	</div>

</body>
</html>

 

神奇小白
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui dialog 一文读懂dialog基本使用方法
前端小白
12-05 1万+
easyui dialog 打开方法，默认关闭。设置模态框
EasyUI的基本运用
05-27 624
1.将文档和依赖文件下载之后，打开你创建的Javaweb项目，先将依赖文件导入项目（直接将文件夹导入），如下图。可通过蓝奏云盘下载：https://yfyp.lanzoub.com/b00eery9vg。
easyUI dialog 弹窗 居中显示
gtlishujie的博客
02-08 6399
自从使用了jquery easyUI 以来对于dialog弹出框的显示位置一直是块心病，想了多种办法处理。总是觉得不是最好的，今天看见网上一博客局的挺有道理的，就运用到自己的项目中试了试，觉的挺好就记录下来分享下，具体如下：默认情况下应该是在屏幕居中显示的。但是有的时候没有居中只要重新纠正下就可以了$('#add_dialog').dialog('open'); //打开添加对话框 $('#add...
EasyUI Dialog 学习总结
bcbobo21cn的专栏
03-08 1743
Basic Dialog http://www.jeasyui.net/demo/519.html Basic Dialog - jQuery EasyUI Demo Basic Dialog Click below button to open or close dialog. Open Close The dialog content...
EasyUI中Dialog对话框的简单使用
BADAO_LIUMANG_QIZHI的博客
06-19 644
场景 效果 属性 该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。 名称 类型 描述 默认值 title string 对话框的标题文本。 New Dialog collapsible boolean 定义是否显示折叠按钮。 false minimizable boolean 定义是...
easyui—Dialog对话框窗口
m0_67771087的博客
05-08 586
Dialog（对话框窗口） 一.概述: 1.扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。 2.该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 二.用法: <div id="dd" class="easyui-dialog" title="My Dia.
EasyUI Dialog 对话框 关闭事件总结
乔的博客
06-22 4157
// 第一种 $(".panel-tool-close").click(); $(".panel-tool-close")相当于弹出框右上角的 “×”。当你想用ajax等方法关闭dialog弹出层，这个就可以用。 // 第二种 $(function(){ $("#×××").dialog({ onClose: function () { // 想要执行的内容; } }); }) 在 $(’#×××’).dialog(‘close’);
easyUI——Dialog（对话框窗口）
ys_chy的博客
05-08 2044
easyUI——Dialog
easyUI之dialog控件和form控件的使用
m0_60666841的博客
04-11 693
在book.js中增加一列来放操作，在操作列的每一行放入单元格放修改的a标签代码如下：field : ‘操作’,title : ‘操作’,return ‘效果如下：一，dialog（对话框窗口）控件的使用在userManage.jap中添加如下代码为修改添加点击事件：当点击人员信息维护时对话框窗口会自动弹出，因此添加closed属性为true，默认为关闭closed：定义是否可以关闭的窗口同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口。
EasyUI Dialog组件
qq_31781327的博客
04-23 315
**1.对话框常用属性介绍** 1.1dialog组件定义：jQuery EasyUI 对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图仅与窗口的效果图相差几个按钮，该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。 1.2dialog对话框组件常用属性 属性名 属性值类型 描述
Easyui通过Dialog打印.rar
12-21
这种方法有效地实现了在EasyUI中通过Dialog打印DataGrid内容的目标。 需要注意的是，实际项目中可能还需要处理各种兼容性和样式问题，确保打印效果符合预期。同时，对于服务器端返回的数据，可能需要根据实际情况...
Easyui使用Dialog行内按钮布局的实例
08-29
easyui中Dialog控件的使用方法 * 创建Dialog控件：使用easyui-dialog控件创建对话框。 * 设置Dialog控件的标题：使用title属性设置对话框的标题。 * 设置Dialog控件的按钮：使用buttons属性设置对话框的按钮。 * ...
Jquery Easyui对话框组件Dialog使用详解（14）
10-20
主要为大家详细介绍了Jquery Easyui对话框组件Dialog的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
easyui详细笔记02之[如何使用easyui_dialog案例]
06-21
在本笔记中，我们将深入探讨如何使用 EasyUI 的 Dialog 组件，这是一款功能强大的弹出窗口组件，可用于显示信息、提示、确认对话等。 一、EasyUI 的准备与引入 在使用 EasyUI 之前，你需要先从官方网站...
在次封装easyui-Dialog插件实现代码
09-05
3. **实例化 Dialog**：使用 `$(self).dialog()` 创建 Dialog 实例，这里 `self` 是指代当前 jQuery 对象（即被调用 `hDialog` 方法的元素）。Dialog 的属性（如标题、高度、宽度、图标样式）和按钮配置都来自合并后...
【创新未发表】Matlab实现白冠鸡优化算法COOT-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现淘金优化算法GRO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
数据结构，顺序表，链表整理
最新发布
07-29
数据结构，顺序表，链表整理
easyui dialog 如何修改title
05-25
你可以使用 `setTitle` 方法来修改 EasyUI Dialog 的标题。示例代码如下： ```javascript $('#dlg').dialog('setTitle', 'New Title'); ``` 其中，`#dlg` 是你的 EasyUI Dialog 的 jQuery 选择器，`'setTitle'` 是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值