Dialog 对话框
简单使用
对按钮使用axDialog属性，同时使用content属性即可实现一个简单的dialog弹窗。content可是文本或ID。
当然可以用JS参数创建窗口实例，而且在JS参数中的content不仅可以是文本、ID，也可以是函数。
-
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人"'>直接写上文本</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text"'>通过id调取内容</a>
<a href="###" class="ax-btn ax-primary" id="js">从JS参数创建实例</a>
<a href="###" class="ax-btn ax-primary" id="func">从函数获得内容</a>
-
document.querySelector("#js").onclick = function(){
new axDialog({
title:'伟大的中国',
content:'中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
}).show();
}
document.querySelector("#func").onclick = function(){
new axDialog({
content:function(){
let obj={ "country": "中国", "name": "CHINA", }
let html = '';
for(let k in obj){html+='- '+obj[k]+'
';}
html+='
';
return html;
}
}).show();
}
异步内容
异步内容是指窗口内容通过ajax形式从同域的其他页面获取的内容，使用异步内容的方式有三种：
- 1.使用type:'async'和url:''属性。填入页面地址即可获取该页面的html内容，比如：url="ajax/about.html"表示从about.html页面中获取所有html内容。
- 2.使用type:'async'和url:''属性。使用格式
url#id，比如：url="ajax/about.html#china"表示从about.html页面中id=china的标签中读取内容。
- 3.使用js参数。必填type,url和content参数，其中content可用回调函数重新组织内容。回调函数有一个参数“data”，是异步内容。
-
<a href="###" class="ax-btn ax-primary" axDialog='type:"async",url:"ajax/article.html"'>简单异步内容</a>
<a href="###" class="ax-btn ax-primary" axDialog='type:"async",url:"ajax/article.html#post02"'>从ID获取异步内容</a>
<a href="###" class="ax-btn ax-primary" id="ajax">JS异步获取JSON</a>
-
document.querySelector("#ajax").onclick = function(){
new axDialog({
type:'async',
asyncUrl:'ajax/axui.json',
content:function(data){
let html = '';
for(let k in data.content){html+='- '+k+':'+data[k]+'
';}
html+='
';
return html;
}
}).show();
}
更新内容
使用this.updateContent(data,callback)方法可更新窗口内容，支持三个参数。data可以是#id、.className等选择器，详细点击这里，也可是是DOM节点；第二个值是回调函数，可不填；其中回调函数有3个参数：
- 第1个参数：是否更新了，true或false，可不填
- 第2个参数：更新之前的内容（HTML格式），可不填
- 第3个参数：更新之后的内容（HTML格式），可不填
以下演示，第一次点击“装入内容”按钮将创建一个实例并打开；关闭之后再点击“更新内容”按钮将改变之前窗口的内容；再次点击“装入内容”按钮发现内容已经改变了。
-
<a href="###" class="ax-btn ax-primary" id="content">装入内容</a>
<a href="###" class="ax-btn ax-primary" id="update">更新内容</a>
-
let newContent = new axDialog({
title:'伟大的中国',
content:'中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
});
document.querySelector("#content").onclick = function(){
newContent.show();
}
document.querySelector("#update").onclick = function(){
newContent.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。',function(){
alert('更新了内容！');
})
}
结构变化
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text"'>使用标题</a>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",titleBreak:true'>使用标题分割线</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",overlay:false'>不要遮罩</a>
弹出位置
可通过placement参数设置弹出位置，默认center即窗口居中弹出。
left-top：左上角弹出center-top：中间居上弹出right-top：右上角弹出left-bottom：左下角弹出center-bottom：中间居下弹出right-bottom：右下角弹出center：居中弹出
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"left-top",overlay:false'>left-top</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"center-top",overlay:false'>center-top</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"right-top",overlay:false'>right-top</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"left-bottom",overlay:false'>left-bottom</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"center-bottom",overlay:false'>center-bottom</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"right-bottom",overlay:false'>right-bottom</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"我是中国人",placement:"center"'>center</a>
可拖拽窗口
当有窗口标题的时候可使用drag属性以实现拖拽窗口头部平移整个窗口。
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",drag:true'>拖拽窗口</a>
弹出和关闭动画
用户根据需要使用in和out属性设定打开和关闭动画样式
- in，打开动画，可选：fadeIn,fadeInUp,fadeInDown,slideDown,fadeInLeft,fadeInRight,springIn(默认),scaleIn等，更多详见动画页。
- out，关闭动画，可选：fadeOut,fadeOutUp,fadeOutDown,slideUp,fadeOutLeft,fadeOutRight,springOut,scaleOut(默认)等，更多详见动画页。
这几个常用动画已经能满足大多数场景，用户可自行引入第三方动画库以实现更多的动画效果。
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国"'>弹簧（默认）</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"fadeIn",out:"fadeOut"'>渐显渐隐</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"fadeInUp",out:"fadeOutDown"'>向上渐显向下渐隐</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"fadeInDown",out:"fadeOutUp"'>向下渐显向上渐隐</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"fadeInLeft",out:"fadeOutRight"'>向左渐显向右渐隐</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"fadeInRight",out:"fadeOutLeft"'>向右渐显向左渐隐</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"scaleIn",out:"scaleOut"'>放大打开缩小关闭</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"springIn",out:"springOut"'>弹出弹回</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国",in:"slideDown",out:"slideUp"'>逐步显示逐步隐藏</a>
弹窗表单
配合使用padding，titlebreak和footerType属性，将弹窗装入form表单元素，可适用所有风格的表单元素，并自适应手机。
本插件中确认按钮是放置在form标签之外，集成了两种提交方法。
第一种是同步提交。如果使用dialog装入表单，像普通表单那样页面跳转式提交表单，需要具备如下几个条件：
- 1、当页隐藏表单内容，并且必须使用
form元素包裹，通过content参数引用其ID
- 2、type参数设置为
form
- 3、confirm的
type参数设置为submit
- 3、form元素必须设置
action属性和method属性
点击确认按钮将首先执行axValidRepeat函数（函数用法），对表单内控件进行再次校验；如果全部通过将执行submit()事件以跳转的方式提交表单。
因隐藏节点的innerHMTL作为文本传入气泡当中，需要使用axInit函数做初始化设置，关于axInit用法请点击这里。
<a href="###" class="ax-btn ax-primary" axDialog='content:"#form01",type:"form",title:"同步校验表单",padding:false,titleBreak:true,footerBreak:true,footerType:"right",confirm:{type:"submit"}'>前端校验提交表单</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#form02",type:"form",title:"异步校验表单",padding:false,titleBreak:true,footerBreak:true,footerType:"right",confirm:{type:"submit"}'>异步校验提交表单</a>
<!--窗口-表单1-->
<div id="form01" style="display: none;">
<form action="https://www.axui.cn" method="post">
<div class="ax-emulate">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name01" placeholder="输入姓名" type="text" axValid='type:"required"'></div>
</div>
<span class="ax-form-txt ax-color-brief">必填校验</span>
</div>
</div>
<hr/>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">籍贯：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="name02" placeholder="填写..." value="" type="text"></div>
<span class="ax-bunch-txt">省</span>
<div class="ax-col ax-col-8"><input name="name03" placeholder="填写..." value="" type="text"></div>
<span class="ax-bunch-txt">市</span>
<div class="ax-col ax-col-8"><input name="name04" placeholder="填写..." value="" type="text"></div>
<span class="ax-bunch-txt">区/县</span>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">头像：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name05" placeholder="远程地址" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v2.0/public/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
</div>
</div>
<hr/>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">位置：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆" selected>重庆</option>
</select>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!--窗口-表单2-->
<div id="form02" style="display: none;">
<form action="https://www.axui.cn" method="post">
<div class="ax-border-tel ax-radius-tel ax-margin ax-response-tel ">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left" style="width:2.8rem;"><i class="ax-iconfont ax-icon-me-f"></i></span><input name="username" placeholder="输入登录名称" type="text" axValid='url:"ajax/name.php"'><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
<span class="ax-form-txt ax-color-brief">填“李雷”</span>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-hide-pad ax-hide-pc"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left" style="width:2.8rem;"><i class="ax-iconfont ax-icon-lock-f"></i></span><input name="password" class="ax-input" placeholder="输入密码" type="password"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-hide-pad ax-hide-pc"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block"><span class="ax-pos-left" style="width:2.8rem;"><i class="ax-iconfont ax-icon-shield-f"></i></span><input name="verify" placeholder="输入验证码..." value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span>
</div>
<a href="###" class="ax-form-img"><img src="https://src.axui.cn/v2.0/public/images/yanzhengma.jpg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
第二种是异步提交。异步提交表单不需要跳转页面即可完成表单提交，是目前前端开发中比较常见的表单提交方式。异步提交表单需要具备如下几个条件：
- 1、当页隐藏表单内容，并且必须使用
form元素包裹，通过content参数引用其ID
- 2、type参数设置为
form
- 3、confirm的
type参数设置为async
- 3、confirm的
url参数设置为异步提交地址
点击确认按钮将首先执行axValidRepeat函数（函数用法），对表单内控件进行再次校验；如果全部通过将执行axAjaxSubmit函数（函数用法）以非跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axDialog='content:"#form03",type:"form",title:"异步提交表单",padding:false,titleBreak:true,footerBreak:true,footerType:"right",confirm:{type:"async",url:"ajax/login.php"}'>异步提交表单</a>
<form>
<div class="ax-padding ax-outer-tel">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin">
<div class="ax-flex-block ax-title">账号</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">8</i>个文字</span>
</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入账号" type="text" axValid='type:"required"'></div>
</div>
<span class="ax-form-txt ax-color-brief">必填校验</span>
</div>
</div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin">
<div class="ax-flex-block ax-title">密码</div><span class="ax-color-ignore">忘记了密码？</span>
</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入账号" type="password"></div>
</div>
</div>
</div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-flex-row ax-form-origin">
<div class="ax-flex-block ax-title">验证码</div>
</div>
</div>
</div>
</div>
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<input name="verify" placeholder="输入验证码..." value="" type="text">
</div>
<span class="ax-form-img"><a href="###">显示验证码</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
自定义弹窗关闭
本框架弹窗的关闭方式有四种：一是点击右上角的关闭按钮；二是点击遮罩；三是点击底部关闭按钮；三是自定义关闭按钮，在内容中对dom元素添加close"属性即可。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
关闭窗口
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",overlay:false'>右上角关闭按钮</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",close:false'>点击遮罩关闭</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#diyClose",close:false,overlay:false'>自定义关闭按钮</a>
<div id="diyClose" style="display:none">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<a href="###" close class="ax-btn ax-primary">关闭窗口</a>
</div>
弹窗按钮
本框架的弹窗按钮有三种：一是居中结构，按钮都安排在中间排列，也是默认的按钮排列方式；二是左右结构，左侧文字，右侧按钮；三是底部线条按钮，简约风格。综合使用footerType属性，confirm:icon属性，confirm:icon属性和note属性可定义不同风格的底部按钮布局。
- center：实体按钮居中（默认）
- right：左右结构，按钮居右
- line：线性按钮铺满窗口底部
- none：不留底部
注意，如果给属性写html代码会遇到单引号和双引号混合使用问题，有必要请使用转义符，单引号：'，双引号："。
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",note:"你想了解更多么？"'>居中结构</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",footerType:"right",note:"你想了解更多么？"'>左右结构</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",footerType:"line"'>线条按钮</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",footerType:"line",confirm:{icon:"<i class='ax-iconfont ax-icon-seal'></i> ",cancel:{icon:"<i class='ax-iconfont ax-icon-slash-h'></i> "}}'>图标按钮</a>
窗口叠窗口
本插件可自动检测窗口中是否包含子窗口，子窗口弹出后将在父窗口的z-index值基础上自动+1，以确保永远浮在最前面。支持无限叠加。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。
打开窗口
通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
打开窗口
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
打开窗口
<a href="###" class="ax-btn ax-primary" axDialog='content:"#two"'>两层窗口</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#three"'>三层窗口</a>
<div id="two" style="display:none;">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。</p>
<a href="###" class="ax-btn" axDialog='content:"中国人民共和国万岁！",title:"伟大的中国",titleBreak:true,drag:true'>打开窗口</a>
</div>
<div id="three" style="display:none;">
<p> 通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<a href="###" class="ax-btn" axDialog='content:"#threeChild",title:"伟大的中国",titleBreak:true,drag:true'>打开窗口</a>
</div>
<div id="threeChild" style="display:none;">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<a href="###" class="ax-btn" axDialog='content:"全世界人民大团结万岁！",title:"伟大的中国",titleBreak:true,drag:true'>打开窗口</a>
</div>
自定义按钮
除了常用的confirm确认按钮和cancel取消按钮之外，还可以创建一个自定义按钮；使用diy属性创建自定义按钮，具体参数如下：
- diy:text：按钮文字
- diy:icon：按钮图标，举例：<i class='ax-iconfont ax-icon-seal'></i>
- diy:classname：按钮类名
- diy:url：按钮链接，设置之后点击会条状到其他页面
- diy:target：按钮页面打开方式，一般使用_blank或_self
- diy:callback：回调函数，支持参数button，即按钮本身
-
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"}'>自定义普通按钮</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"},footerType:"right"'>自定义居右按钮</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"},footerType:"line"'>自定义线性按钮</a>
<a href="###" class="ax-btn ax-primary" id="diy">自定义按钮函数</a>
-
document.querySelector("#diy").onclick = function(){
new axDialog({
diy:{
text:"自定义按钮",
callback:function(){
alert('自定义按钮执行函数！');
}
},
title:'伟大的中国',
content:'中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
}).show();
}
关闭按钮位置
在原插件基础上，本框架新增了关闭按钮的位置属性closePlace，参数如下：
inside 在窗口里，默认outside 在窗口外侧右上角bottom 在窗口外侧底部，圆形按钮
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",title:"伟大的中国"'>关闭按钮在里面</a>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",closePlace:"outside"'>关闭按钮在外面</a>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",closePlace:"bottom"'>关闭按钮在下方居中</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",overlay:false'>关闭按钮在里面(无遮罩)</a>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",closePlace:"outside",overlay:false'>关闭按钮在外面(无遮罩)</a>
<a href="###" class="ax-btn ax-primary" axDialog='title:"伟大的中国",content:"#text",closePlace:"bottom",overlay:false'>关闭按钮在下方居中(无遮罩)</a>
弹窗尺寸
本框架定义了四种尺寸，对size属性使用sm、md或lg。默认是md。
sm 宽300pxmd 默认宽500pxlg 全宽full 满屏
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",size:"md"'>md默认500px</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",size:"sm"'>sm300px</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",size:"lg"'>lg全宽</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#text",size:"full"'>full满屏</a>
多媒体弹窗
本插件不仅可以弹出纯文本，也可以弹出图片、视频、音频等多媒体文件。多媒体文件分别用各自的属性表示。
- 使用type:'picture'和url属性表示显示一张图片，请填入一个图片地址。
- 使用type:'video'和url属性表示显示一个视频，请填入一个视频地址。
- 使用type:'audio'和url属性表示显示一个音频，请填入一个音频地址。
- 使用type:'iframe'和url属性表示显示一个网址，请填入一个网址；使用iframe属性，请配合使用width、height和size属性。
- name：媒体文件的名称。
内容部分极限高度是760px（76rem），如果内容过多会产生滚动条，可通过设置width和height参数修改极限宽度和高度；如果需要禁止滚动窗口的滚动条，可设置preventScroll参数为true。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。
“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
| 情形 |
描述 |
回购和转让安排 |
操作 |
|
1、激励对象主动解除劳动关系
|
在劳动合同期内书面辞职
|
按照原始出资价格加每年6%利息回购
|
|
|
2、激励对象被解除劳动关系
|
因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的
|
按照原始出资价格回购，如果给公司造成损失，赔偿损失
|
|
|
3、丧失劳动能力并终止劳动关系
|
激励对象因伤病等非工伤的原因
|
按照原始出资价格加每年10%的利息回购
|
|
|
4、职务变更（仅限于高管）
|
职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少
|
增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加10%利率回购
|
|
|
5、退休
|
88退休且不签署《保密及竞业限制协议》
|
按照原始出资价格加每年12%的利息回购
|
|
|
6、死亡
|
公司股份不能在公开市场自由转让的
|
继承人与公司股东协商转让，如无人受让，则原始出资价格加每年12%的利息回购
|
|
<a href="###" class="ax-btn ax-primary" axDialog='content:"#article",preventScroll:true'>大段文字</a>
<a href="###" class="ax-btn ax-primary" axDialog='type:"picture",url:"https://src.axui.cn/v2.0/public/images/china01.jpg",name:"中国城市夜景",content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。"'>图片</a>
<a href="###" class="ax-btn ax-primary" axDialog='type:"video",url:"https://src.axui.cn/v2.0/public/media/video.mp4",name:"中国城市夜景",content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。"'>视频播放</a>
<a href="###" class="ax-btn ax-primary" axDialog='type:"audio",url:"https://src.axui.cn/v2.0/public/media/audio.mp3",name:"中国城市夜景",content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。"'>音频播放</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#table",size:"lg"'>大型表格</a>
<a href="###" class="ax-btn ax-primary" axDialog='content:"#search",footerType:"line",padding:false'>窗口搜索</a>
<a href="###" class="ax-btn ax-primary" axDialog='type:"iframe",url:"http://www.axui.cn",width:"800px",height:"400px",padding:false'>iframe</a>
<!--窗口-大段文字-->
<div id="article" style="display:none;">
<p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
<video controls="controls" >
<source src="
https://src.axui.cn/v2.0/examples/media/video.mp4" type="video/mp4">
您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
</video>
<p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
<audio src="
https://src.axui.cn/v2.0/examples/media/audio.mp3" controls="controls">
您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
</audio>
<p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
<p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
<p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
</div>
<!--窗口-表格-->
<div id="table" style="display:none;">
<table class="ax-table">
<thead>
<tr>
<th style="width: 240px;">情形</th>
<th>描述</th>
<th>回购和转让安排</th>
<th style="width: 100px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="ax-align-left">1、激励对象主动解除劳动关系</div></td>
<td><div class="ax-align-left">在劳动合同期内书面辞职</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-error">6%</span>利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">2、激励对象被解除劳动关系</div></td>
<td><div class="ax-align-left">因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的</div></td>
<td><div class="ax-align-left">按照原始出资价格回购，如果给公司造成损失，赔偿损失</div></td>
<td></td>
</tr>
<tr>
<td><div class="ax-align-left">3、丧失劳动能力并终止劳动关系</div></td>
<td><div class="ax-align-left">激励对象因伤病等非工伤的原因</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-error">10%</span>的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">4、职务变更（仅限于高管）</div></td>
<td><div class="ax-align-left">职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少</div></td>
<td><div class="ax-align-left">增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加<span class="ax-color-error">10%</span>利率回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">5、退休</div></td>
<td><div class="ax-align-left ax-more-ell">88退休且不签署《保密及竞业限制协议》</div></td>
<td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-error">12</span>%的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
</tr>
<tr>
<td><div class="ax-align-left">6、死亡</div></td>
<td><div class="ax-align-left">公司股份不能在公开市场自由转让的</div></td>
<td><div class="ax-align-left">继承人与公司股东协商转让，如无人受让，则原始出资价格加每年<span class="ax-color-error">12%</span>的利息回购</div></td>
<td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
</tr>
</tbody>
</table>
</div>
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<a href="###" class="ax-btn ax-primary" id="insDestroy">将要销毁的</a>
<a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
<a href="###" class="ax-btn ax-primary" id="btnReturn">再次启用</a>
-
let insDestroy = new axDialog({ content: '伟大的中国' }, '#insDestroy'),
btnDestroy = document.querySelector('#btnDestroy'),
btnReturn = document.querySelector('#btnReturn');
btnDestroy.onclick = function () {
insDestroy.destroy(function () {
alert('销毁了实例！')
});
}
btnReturn.onclick = function () {
insDestroy.init();
}
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
-
<a href="###" class="ax-btn ax-primary" axDialog='insName:"big",content:"big实例"'>name='big'的实例</a>
<a href="###" class="ax-btn ax-primary" axDialog='insName:"small",content:"small实例"'>name='small'的实例</a>
<a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a>
<a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a>
<a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a>
<a href="###" class="ax-btn ax-primary" id="returnAll">重新启用</a>
-
let destroyBig = document.querySelector('#destroyBig'),
destroySmall = document.querySelector('#destroySmall'),
viewAll = document.querySelector('#viewAll'),
returnAll = document.querySelector('#returnAll');
destroyBig.onclick = function () {
axInstance.destroy('big');
}
destroySmall.onclick = function () {
axInstance.destroy('small');
}
viewAll.onclick = function () {
//只查看有name的实例合集
console.log(axInstance.data.filter(i => i.name && i.type === 'dialog'));
}
returnAll.onclick = function () {
//重新初始化以启用
let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'dialog');
items.forEach(i => {
i.instance.init();
});
}
获取实例
如果在创建实例的时候填写了insName参数，那么使用axInstance的find方法可找到指定名称的实例，并可对实例进行初始化、修改、销毁等操作。
-
<a href="###" class="ax-btn ax-primary" axDialog='insName:"ins01",content:"我是中国人"'>创建带name的实例</a>
<a href="###" class="ax-btn ax-primary" id="nameOpen">打开</a>
<a href="###" class="ax-btn ax-primary" id="nameContent">更新内容并打开</a>
<a href="###" class="ax-btn ax-primary" id="nameSet">修改参数并打开</a>
<a href="###" class="ax-btn ax-primary" id="nameDestroy">销毁</a>
<a href="###" class="ax-btn ax-primary" id="nameReturn">重新启用</a>
-
let nameIns = axInstance.find('ins01'),
nameOpen = document.querySelector('#nameOpen'),
nameContent = document.querySelector('#nameContent'),
nameSet = document.querySelector('#nameSet'),
nameDestroy = document.querySelector('#nameDestroy'),
nameReturn = document.querySelector('#nameReturn');
nameOpen.onclick = function () {
nameIns.show();
}
nameContent.onclick = function () {
nameIns.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。').show();
}
nameDestroy.onclick = function () {
nameIns.destroy();
}
nameSet.onclick = function () {
nameIns.update({
title: '标题修改了！'
}, function (update, before, after) {
if (update) {
alert('更新了参数！');
} else {
alert('没有更新参数！');
}
}).show();
}
nameReturn.onclick = function () {
nameIns.init();
}
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.button：定位浮层的按钮节点this.form：浮层内的表单提交域节点this.state：浮层显示状态，shown、hidden或ingthis.destroyed：是否销毁状态，true或falsethis.targetDom：浮层节点this.wrapper：浮层内的.ax-dialog-wrapper节点this.content：浮层内的.ax-dialog-content节点this.body：浮层内的.ax-dialog-body节点this.header：浮层内的.ax-dialog-header节点this.footer：浮层内的.ax-dialog-footer节点this.duration：显示和关闭动画的持续时间，数字格式，单位msthis.overlay：浮层内的遮罩层节点
内部操作方法如下：
update(setting, callback)：更新所有参数，支持两个参数：
- setting：必填项，对象类型，用户自定义的参数
- callback：选填项，回调函数，支持三个参数：
- isUpdated：是否更新了参数，true或false
- before：更新前的参数
- after：更新后的参数
updateContent(html, callback)：更新文本内容，支持两个参数：
- html：必填项，字符串类型，更新的内容，支持html标签代码
- callback：选填项，回调函数，支持三个参数：
- isUpdated：是否更新了内容，true或false
- before：更新前的内容
- after：更新后的内容
show(callback)：显示浮层，支持一个参数即callback回调，回调函数无参数。hide(callback)：隐藏浮层，支持一个参数即callback回调，回调函数无参数。destroy(callback)：销毁实例，支持回调函数，回调无参数：
全局操作方法如下：
axInstance：每个new实例都会自动加入到全局实例合集当中，通过该方法可获取实例，继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里。
在回调函数中this均指向实例本身，所以在回调函数中通常可使用如下变量：
- this：实例本身
- this.targetDom：实例的Dom
- this.options：实例的参数
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onDrag/drag 开始拖拽执行，无参数onDragged/dragged 拖拽完成执行，无参数onInit 初始化后执行，无参数onShow/show 打开窗口前执行，无参数onShown/shown 打开窗口后执行，无参数onHide/hide 窗口隐藏前执行，无参数onHidden/hidden 窗口隐藏后执行，无参数onUpdate/update 内容或参数更新前执行，无参数onUpdated/updated 参数更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前参数）、after（更新后参数）onUpdateContent/updateContent 内容更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前内容）、after（更新后内容）onDestroy/destroy 销毁后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<a href="###" class="ax-btn ax-primary" id="ready">打开实例进行监听</a>
<a href="###" class="ax-btn ax-primary" id="updated">监听updated</a>
-
let instance = new axDialog({
title:'伟大的中国',
content:'中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。',
drag:true,
});
document.querySelector("#ready").onclick = function(){
instance.show();
}
document.querySelector("#updated").onclick = function(){
instance.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。')
}
instance.on('show',function(){
console.log('开始打开执行')
}).on('shown',function(){
console.log('已经打开执行')
}).on('drag',function(){
console.log('拖拽开始执行')
}).on('dragged',function(){
console.log('拖拽完成执行')
}).on('updated',function(){
console.log('完成更新执行')
}).on('hide',function(){
console.log('关闭前执行')
}).on('hidden',function(){
console.log('关闭后执行')
})
参数说明
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axDialog({
insName: '',//实例名称，对axInstance有用实例合集当中
title: '',//窗口标题，为空等于不显示
titleBreak: false,//标题分割线，默认不显示
overlay: true,//默认显示半透明遮罩
overlayClose: true,//点击遮罩是否关闭，默认可关闭
duration: 0,//弹出和关闭窗口动画的时间，如果为0则使用css中定义的动画时间，单位ms
placement: 'center',//对话框的位置，默认在居中弹出，可填left-top|center-top|right-top|left-bottom|center-bottom|right-bottom
in: 'springIn',//可填fadeIn,fadeInDown,fadeInUp,slideDown,fadeInLeft,fadeInRight,springIn,scaleIn
out: 'scaleOut',//可填fadeOut,fadeOutDown,fadeOutUp,slideUp,fadeOutLeft,fadeOutRight,springOut,scaleOut
multiple: true,//是否允许打开多个窗口，默认允许
size: 'md',//窗口尺寸，默认正常尺寸，可填sm,middle,large,full
padding: 'ax-padding',//窗口内边距，值可以是布尔值也可以是类名，默认带边距，可填false,true,ax-padding,ax-padding ax-xxl,...
drag: false,//是否能拖拽，默认不可拖拽；注意如果title为空时即使drag为true也不能拖拽
content: '',//窗口内容，可填#id或文本内容,
type: 'html',//内容的类型，默认是html，可填picture|video|audio|iframe|async|html|form
url: '',//内容的来源，该参数依赖type参数，除了html类型，其他几种类型均需要填入url，async的url可以是“地址+#id”
btnClass: 'ax-opened',//触发按钮在打开气泡后新增的样式名
rel: '',//可以触发本窗口的元素，可以是#id，节点对象，或数组（多个按钮均触发）
name: '',//内容名称，当type是picture|video|audio时有效
width: '',//内容宽度，当type是iframe的时候，有必要设置该参数，比如800px
height: '',//内容高度，当type是iframe的时候，有必要设置该参数，比如400px，但是不要超过600px否则会产生垂直滚动条
close: true,//关闭窗口的按钮，默认显示
closePlace: 'inside',//可选 inside,bottom,outside
footerShow: true,//是否显示底部，默认显示
footerType: 'center',//底部按钮风格，可选center,line,right
footerBreak: false,//底部分割线，默认不显示
note: '',//其他内容
ajaxType: 'post',//异步提交的方式，默认post，可填get
zIndex:0,//气泡层级，默认为0即不设置，如果与其他组件发生遮挡请自行设置
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onDrag: '',//回调函数，拖拽开始执行，无参数
onDragged: '',//回调函数，拖拽完成执行，无参数
onInit: '',//回调函数，初始化后执行，无参数
onShow: '',//回调函数，开始显示后执行，无参数
onshown: '',//回调函数，完成显示后执行，无参数
onHide: '',//回调函数，开始关闭后执行，无参数
onHidden: '',//回调函数，完全关闭后执行，无参数
onUpdate: '',//回调函数，参数/内容更新前执行，无参数
onUpdated: '',//回调函数，参数更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前参数）、after（更新后参数）
onUpdateContent: '',//回调函数，内容更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前内容）、after（更新后内容）
onDestroy: '',//回调函数，销毁后执行，无参数
confirm: {
text: '确定',//确认按钮文字
classname: '',//确认按钮的类名
icon: '',//确认按钮的图标，格式是
type: 'close',//按钮类型，可选择close关闭、async异步提交表单、submit直接提交表单、prevent阻止按钮默认事件什么事也不做
url: '',//提交的地址，如果type为async则必须使用该参数
callback: ''//确认按钮的回调函数，最终按函数方式使用，格式是function(button,content){}，button是按钮节点，content是返回内容
},
cancel: {
text: '关闭',//取消按钮文字
classname: '',//取消按钮的类名
icon: '',//取消按钮的图标
callback: ''//取消按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
},
diy: {
text: '',//自定义按钮文字
classname: '',//自定义按钮的类名
icon: '',//自定义按钮的图标
url: '',//自定义按钮的超链接
target: '',//自定义按钮的链接目标，一般是_blank或者_self
callback: ''//自定义按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
}
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
