easyui dialog的用法

最新推荐文章于 2024-05-27 12:07:42 发布
最新推荐文章于 2024-05-27 12:07:42 发布
阅读量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（对话框窗口）
Lzxccas的博客
06-28 3994
Dialog（对话框窗口）Dialog（对话框窗口）+Window（窗口）+Panel（面板）Dialog属性Dialog事件+方法Window属性,事件,方法Panel属性,事件,方法案列 实现过程 Dialog（对话框窗口）+Window（窗口）+Panel（面板） 今天我们涉及到的内容较多 我们一个一个整理 但我们着重学习的还是Dialog 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collaps
jQuery-EasyUI学习（十四）Dialog（对话框窗口）
quge_name_harder的博客
11-26 514
一、Dialog（对话框窗口）           该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 二、例子 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans...
EasyUI的基本运用
最新发布
05-27 570
1.将文档和依赖文件下载之后，打开你创建的Javaweb项目，先将依赖文件导入项目（直接将文件夹导入），如下图。可通过蓝奏云盘下载：https://yfyp.lanzoub.com/b00eery9vg。
easyUI-Dialog（对话框窗口）
weixin_34267123的博客
05-03 149
2019独角兽企业重金招聘Python工程师标准>>> ...
前台框架EasyUI的弹出框dialog，样式调整总结
热门推荐
u014746965的专栏
04-01 3万+
项目开发使用到了前台框架EasyUI进行开发，因为它开发简单，容易入手，有详细的api支持，能够加快项目的开发进度，降低项目开发成本。   下面对最近使用到的关于EasyUI的弹出框dialog，样式调整进行简单总结：   1.设置弹出框可以最小化，最大化，可折叠，可缩放      2.在datagrid中设置，点击某一条数据进行操作时，设置蒙版效果
jQuery UI全教程之一(dialog的使用教程)
每天进步一点点，坚持！！！
10-14 4919
jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。也方面没接触jQuery UI的人能早日使用jQuery UI套件 (一)
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 的属性（如标题、高度、宽度、图标样式）和按钮配置都来自合并后...
EasyUI_Icon_图标扩展样式（1775个）
02-09
花积分下载的,免费共享.. 原下载地址:http://download.csdn.net/download/miracle98/7579723
easy ui dialog 关闭之后的怪异问题
weixin_33842304的博客
07-11 160
最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师!事故现场:增加页面和修改页面是分离的两个jsp文件.在页面加载时会用jquery去控制一些数据加载和一些逻辑.理论上来说不希望增加页面和修改页面互相干扰.单独拿增加模块测是正常的.加载修改页面后再使用增加页面就会发现增加页面功能不正常.之后通...
jQueryEasyUI Dialog动态改变标题(title)
ljz9425的专栏
05-16 1704
方式1： html代码 <div id="maindlg" tabIndex="-1" ></div> js代码 $('#maindlg').maindlg.dialog({title:'new title'}); 缺点：dialog会重新加载 方式2： 分析创建dialog后的html代码 html代码： <div id="maindlg" tabIndex="-1" ></div> js代码： //声明标题对应的html对
Easyui中dialog对话框访问执行两次href中的链接
weixin_39620206的博客
06-21 933
在使用Easyui的dialog时，若要使用以下JavaScript代码来创建dialog对话框，会访问两次“record.jhtml”链接。&lt;div id="dd"&gt;Dialog Content.&lt;/div&gt;$('#dd').dialog({ title: 'My Dialog', width: 400, height: 200, closed: ...
使用Font Awesome替换EasyUI的图标
m0_48169194的博客
06-05 1019
使用Font Awesome替换EasyUI的图标 用过EasyUI的朋友都知道，大部分组件都有一个iconCls属性，用于显示一个图标。但是EasyUI自带图标数量少、不美观，于是想到了使用Font Awesome来更换和拓展这些图标。 先看看EasyUI的图标用法，下面定义了一个LinkButton。 <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a> 其中 i
vue学习笔记-侦听器
杨威的博客
05-02 670
1、侦听器用于监听变量值是否发生变化，从而针对数据的变化而做特定的操作。 基本语法： watch:{ userName(newVal,oldVal)//方法名必须跟监听的变量名称一致。 { //数据发生变化后执行的代码段，newVal和oldVal分别代表变化 前的值和变化后的值。 } } 2、默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器在页面渲染完成
java 商城 商品查询_SSH框架网上商城项目第8战之查询和删除商品类别功能实现...
weixin_39603609的博客
02-25 100
上一节我们完成了使用DataGrid显示所有商品信息，这节我们开始添加几个功能：添加、更新、删除和查询。首先我们实现下前台的显示，然后再做后台获取数据。1. 添加、更新、删除和查询功能的前台实现DataGrid控件里有个toolbar属性，是添加工具栏的，我们可以在toolbar属性中添加这些按钮来实现相应的功能。先看一下官方文档对toolbar的定义：我们使用数组的方式定义工具栏，在query....
easyui中dialog的使用
weixin_44508223的博客
05-28 932
今日份总结： 一开始学习使用easyui中的dialog实在toolbar中： 效果图： 选中一行，然后点击toolbar中的修改，会弹出一个dialog，并且把datagrid中的信息传到dialog中， 其实不用toolbar也可以实现，将数据传入dialog是用的dialog自己的东西，不必非和toolar捆绑，也是我学的太死了，后面实现别的功能时用到了a链接的onclick事件，一想这...
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、付费专栏及课程。

余额充值