弹出层_artDialog基于javascript编写的对话框组件

最新推荐文章于 2016-05-09 14:08:55 发布

原创最新推荐文章于 2016-05-09 14:08:55 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

JAVASCRIPT 同时被 2 个专栏收录

19 篇文章

订阅专栏

下载-源码

7 篇文章

订阅专栏

本文介绍了一个基于JavaScript编写的对话框组件，提供精致的界面与友好的接口。通过研究其最新版本V4.1.2，了解如何在HTML中引入并自定义组件功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个偶然的机会，看到一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

有时间可以研究下现在已经到最新版本：V 4.1.2 发布时间：2011-09-04

主页地址：http://www.planeart.cn/demo/artDialog/index.html

文件下载

引用方法：

在Head中加入 <script src="artDialog.source.js?skin=default" ></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>###</title>  
<script src="artDialog.source.js" ></script>

<style>
 body {font-size:12PX; } 
</style> 
 
 <script>
 function doTest()
 { 
		 var dialog = art.dialog({
			title: '警告',
			content: '点击管理按钮将让删除按钮可用',
			width: '20em',
			button: [{
				name: '管222理',
				callback: function () {
					this.content('我更改了删除按钮').button({
						name: '删除',
						disabled: false
					});
					return false;
				},
				focus: true
			}]
		});
		
		dialog.button(
			{
				name: '删除',
				callback: function () {
					alert('remove')
				},
				disabled: true
			}
		)
 }
 
 </script>

 
</head>

<body>
<input type="button" name="Submit" value="按钮"  onclick="doTest()"/>
</body>
</html>

修改部分代码：

artDialog.source.js 1738 行

// 无阻塞载入CSS (如"artDialog.js?skin=aero")
_skin = _thisScript.src.split('skin=')[1];

if (true) {
 if(_skin==null)
 { 
     _skin='default';
 } 
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.href = _path + '/skins/' + _skin + '.css?' + artDialog.fn.version;
 _thisScript.parentNode.insertBefore(link, _thisScript);
};