前端常用插件之artDialog弹出框-程序员宅基地
前端常用插件之artDialog弹出框
最近，发现一个插件——好看精致的页面弹出框，个人觉得有必要与大家分享一下，它就是artDialog弹出框。
引用上一篇文章《前端常用插件之art-template模板引擎》。
1. 准备环境：
① Bootstrap文件：bootstrap.min.css和bootstrap.min.js
② jQuery文件：jquery-1.11.3.min.js
③ Template文件：template.min.js
④ artDialog文件：artDialog.min.js
⑤ 自己封装的artDialog文件：artDialogWrap.js
这里文件网上都有（尽量用最新版本），大家可以自行下载。
2. 代码实现：
需求：修改用户信息。
自己封装的artDialog文件：
function openDialog(options){
var defaults = {
title:"弹出窗口",
fixed:true,
max: false,
min: false,
lock: true,
resize:false,
cache:false,
esc:false,
okVal:'保存',
dblclick:false, //双击不关闭对话框
data:{}
};
var options = $.extend(defaults, options);
//支持模版引擎
if(options.tpl && window.template) {
options.content = window.template(options.tpl, options.tplData|| {});
return art.dialog(options);
}
var dialog = art.dialog(options);
return dialog;
}
Html代码：
<!DOCTYPE html>
<head>
<title>修改用户信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./artDialog/skins/default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<button type="button" id="updateUser">修改用户</button>
<!-- 修改用户信息template -->
<script type="text/html" id="update-user-tpl">
<form id="update-user-frm" class="form-horizontal">
<div class="control-group">
<div class="control-label">用户名：</div>
<div class="controls text-nowrap">
<input type="text" name="loginName" value="{
{userInfo && userInfo.loginName}}" placeholder="请输入用户名" autocomplete="off" />
</div>
</div>
<div class="control-group">
<div class="control-label">密码：</div>
<div class="controls text-nowrap">
<input type="text" name="pwd" value="{
{userInfo && userInfo.pwd}}" placeholder="请输入密码" autocomplete="off" />
</div>
</div>
<div class="control-group">
<div class="control-label">角色：</div>
<div class="controls text-nowrap">
{
{each roles as role i}}
<label class="radio">
<input type="radio" value="{
{role.id}}" name="roleIds"/> {
{role.name}}
</label>
{
{/each}}
</div>
</div>
</form>
</script>
<!-- 引用的js文件 -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!-- artTemplate -->
<script src="./js/template.min.js"></script>
<!-- artDialog -->
<script src="./artDialog/artDialog.min.js"></script>
<script src="./artDialog/plugins/iframeTools.min.js"></script>
<script src="./artDialog/artDialogWrap.js"></script>
<script src="./js/updateUser.js"></script>
</body>
</html>
Js代码：
(function(){
// 绑定"修改用户信息"点击事件
updateUser();
function updateUser() {
var userInfo = {
'loginName': '张三',
'pwd': '123456'
};
var roles = [
{
id: '1', name: '普通用户'},
{
id: '2', name: '开发管理员'},
{
id: '3', name: '测试管理员'},
{
id: '4', name: '超级管理员'},
{
id: '5', name: '业务管理员'}
];
$('#updateUser').on("click", function() {
// 初始化"添加仓单"弹出框
openDialog({
title: '修改用户信息',
width: 700,
tpl: 'update-user-tpl',
tplData: {
userInfo: userInfo, roles: roles},
ok: function(){
var form = $('#update-user-frm');
console.log("修改成功！");
},
cancel: true
});
});
}
}());
执行结果：
3. artDialog功能介绍：
（1）artDialogWrap.js文件：
添加了一个扩展-支持模板引擎：两个属性tpl和tplData
（2）页面代码模板：
从上面代码可知，html里面定义了一个template模板：<script type="text/html" id="update-user-tpl">......</script>，这样在js文件里面openDialog()里面的tpl和tplData属性，就可以渲染弹出框页面。
（3）artDialog基本属性：
title：标题
width：宽度
height：高度
ok：确定按钮，若值为false则不显示确定按钮。回调函数function，执行完毕默认关闭对话框，若返回false则阻止关闭。
cancel：关闭弹出框按钮，取消按钮也等同于标题栏的关闭按钮，若值为false则不显示关闭按钮。回调函数function，执行完毕默认关闭对话框，若返回false则阻止关闭。
（4）扩展属性：
tpl：模板ID
tplData：模板数据
具体就不一一介绍了，大家自行网上查看吧。
最近有一些小伙伴需要这个示例，我就上传了一下，在我的资源里面《前端弹出框插件art-dialog-test》。
智能推荐
Andriod studio格式化代码_android studio 代码格式化-程序员宅基地
文章浏览阅读778次。使用快捷键：默认情况下，可以使用快捷键Ctrl + Alt + L (在Windows和Linux下) 或者 Command + Option + L (在Mac OS下) 来格式化选定的代码块或整个文件。使用自动保存功能：可以在Android Studio的设置中启用"Editor | General | Auto Save"选项，这样当你修改代码时，代码会在一定时间内自动格式化。无论使用哪种方式，Android Studio都会根据你的代码风格设置自动为你格式化代码，保持统一的代码风格和可读性。_android studio 代码格式化
300套Java微信小程序项目实战-程序员宅基地
文章浏览阅读531次，点赞23次，收藏6次。博主介绍：程序员陈师兄、8年大厂程序员经历。csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 精彩专栏推荐订阅 不然下次找不到哟。
Linux与Gvim常用命令_gvim grep命令-程序员宅基地
文章浏览阅读1.1k次。一、LINUX常用命令文件管理类命令：pwd 打印当前目录 cd 改变目录 cd / 转到根目录 cd ~ 转到用户目录 cd /XX/XX 转到绝对路径 cd XX 转到当前目录下的相对路径 ls 查看目录内容 ls -a 列举全部文件，包括隐藏文件 ls -l 列举目录中的细节(权限，所有者等) ls -l XX 列举某一文件信息 ls -R 递归列举该目录所有子目录内容 ls -s 按文件大小排序 cat XX 显示..._gvim grep命令
LNK1179: 无效或损坏的文件: 重复的 COMDAT "_IID_IDispatchEx"_无效或损坏的文件:重复的comdat-程序员宅基地
文章浏览阅读2.6k次。fatal error LNK1179: invalid or corrupt file: duplicate comdat "XXX" 解决方法，找到(ocx和dll都是类似的）#import "Flash.ocx" named_guids改为#import "Flash.ocx" named_guids, exclude("IFlashObject_无效或损坏的文件:重复的comdat
Word Search（C++单词搜索）_c++ccc word hunt-程序员宅基地
文章浏览阅读300次。Word Search（C++单词搜索）_c++ccc word hunt
如何使用DISM对Windows系统映像进行修复_dism修复受损需要挂载映像-程序员宅基地
文章浏览阅读537次，点赞5次，收藏10次。在前些天我更新电脑驱动的时候，更新程序报错了。我检查后发现是系统映像完整性的问题。在我解决完问题后，我决定把这个解决的过程记录下来，希望能帮到别人。_dism修复受损需要挂载映像
随便推点
Windows下深度学习环境配置(超详细跟李沐学Ai)_window如何搭建深度学习环境-程序员宅基地
文章浏览阅读1.6k次。安装的软件有miniconda，CUDA，Pycharm，需要安装的包有Pytorch，jupyter，d2l_window如何搭建深度学习环境
Python中对象可变的（mutable）和不可变的（immutable）介绍_immutable in python-程序员宅基地
文章浏览阅读958次。Python中对象可变的（mutable）和不可变的（immutable）介绍_immutable in python
CSDN如何转载他人文章_csdn 创作中心 设置禁止转载-程序员宅基地
文章浏览阅读5.0k次，点赞2次，收藏13次。利用Markdown可以解析html的特点，我们可以很方便的转载他人的文章。_csdn 创作中心 设置禁止转载
【Rust日报】 2019-03-02-程序员宅基地
文章浏览阅读63次。本文转载自：https://rust.cc/article?id=9356a7eb-c4b4-4e4d-b43c-abefaea209e9用Rust重写Node.js实现的接口之后所带来的震惊#node.js作者用Rust重写了Node.js实现的一个小接口，但是流量很大，每秒180个请求。之前Node.js版本技术栈：koa，框架pino，日志request，转..._rust animation
Angular构建Library报错：error NG3001: Unsupported private class_but is not exported from the top-level library ent-程序员宅基地
文章浏览阅读318次，点赞6次，收藏3次。通过将需要导出的组件、服务或指令集中在顶层入口文件中，可以更好地管理这些依赖关系，并确保任何使用你的库的开发人员都能够正确地安装和配置这些依赖项。总之，将组件、服务或指令导出到顶层入口文件中是为了确保其他模块或应用程序能够访问并正确使用你的库中的功能。这样可以提供良好的可见性、统一的访问点和更好的依赖关系管理。统一访问点：通过将所有需要被其他模块或应用程序使用的内容导出到顶层入口文件中，可以提供一个统一的访问点。可见性：如果你想让其他模块或应用程序能够使用你的组件、服务或指令，你必须将它们导出。_but is not exported from the top-level library entrypoint
document对象和window的常用事件_分别在window上和document上绑定事件-程序员宅基地
文章浏览阅读636次。documentreadystatechange当document.readyState的值发生变化时就会触发以上事件readyState的值有：1. loadingDOM还在加载中（此时貌似js还没开始执行，js里捕获不到这个状态）2. interactiveDOM已经加载完毕，css，图片，iframe里的页面还没加载完（$(document).ready()就是指这个时候即触..._分别在window上和document上绑定事件