artDialog组件应用学习(一)
个人觉得artDialog是一组很不错的对话框组件。写的是artDialog_v6应用。
官方称其兼容性测试通过:IE6~IE11、Chrome、Firefox、Safari、Opera。
官网:http://aui.github.io/artDialog/
一.artDialog特点:
1.支持普通和气泡形式对话框;
2.支持标准和模态对话框;
3.自适应内容尺寸;
4.可以自定义皮肤。
二.网页中使用artDialog需要seajs或RequireJS加载。我用的是seajs。
从官网可以下载artDialog相关组件和seajs。
应用实例:1.在自己的专案里引入artDialog相关文件;

2.在网页中引入seajs;
<script type="text/javascript" src="/Scripts/Arale/sea-modules/sea.js"></script>
<script type="text/javascript">
seajs.config({
alias: {
"jquery": "jquery-1.10.2"
}
});
</script>
三.属性与方法
- 方法
- show([anchor])
- showModal([anchor])
- close([result])
- remove()
- content(html)
- title(text)
- width([value])
- height([value])
- reset()
- button(args)
- focus()
- blur()
- addEventListener(type, callback)
- removeEventListener(type, callback)
- dialog.get(id)
- dialog.getCurrent()
- 选项
- 内容
- title
- content
- statusbar
- 按钮
- ok
- okValue
- cancel
- cancelValue
- button
- 外观
- width
- height
- skin
- padding
- align
- 交互
- fixed
- quickClose
- autofocus
- zIndex
- 事件
- onshow
- onbeforeremove
- onremove
- onclose
- onfocus
- onblur
- onreset
- 高级
- id
- 内容
- 属性
- open
- returnValue
以上属性和方法在各种对话框中基本通用,可自行试用。
artDialog组件应用学习(一)的更多相关文章
- artDialog组件应用学习(五)
一.artDialog事件应用 对话框编写代码 function DialogEvent() { seajs.use(['jquery', '/Scripts/arale/artDialog/src/ ...
- artDialog组件应用学习(四)
一.在对话框自定义操作按钮 预览: html调用代码: var btnArray = [ { value: '同意', callback: function () { this.content('你同 ...
- artDialog组件应用学习(三)
一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...
- artDialog组件应用学习(二)
一.没有操作选项的对话框 预览: html前台引入代码:(之后各种效果对话框引入代码致,调用方法也一样,就不一一写入) <script type="text/javascript&qu ...
- DocX开源WORD操作组件的学习系列四
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- DocX开源WORD操作组件的学习系列三
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- DocX开源WORD操作组件的学习系列二
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- DocX开源WORD操作组件的学习系列一
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- Vue学习—组件的学习
1.什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能 ...
随机推荐
- 洛谷P3711 仓鼠的数学题(伯努利数+多项式求逆)
题面 传送门 题解 如果您不知道伯努利数是什么可以去看看这篇文章 首先我们把自然数幂和化成伯努利数的形式 \[\sum_{i=1}^{n-1}i^k={1\over k+1}\sum_{i=0}^k{ ...
- ubtuntu 如何查看内存用量 mongostat详解
free -h top free或者top或者cat /proc/meminfo mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态, ...
- Flink学习笔记:Connectors之kafka
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- SDUT OJ 数据结构实验之链表一:顺序建立链表
数据结构实验之链表一:顺序建立链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...
- ob系列函数归纳
输出控制函数(output control函数) flush — 刷新输出缓冲ob_clean — 清空(擦掉)输出缓冲区ob_end_clean — 清空(擦除)缓冲区并关闭输出缓冲ob_end_ ...
- 忘记commit也会造成select查询的性能问题
今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据,但是耗费了几分钟的时间.让我检查分析一下原因,分析解决过后 ...
- 最小生成树 & 洛谷P3366【模板】最小生成树 & 洛谷P2820 局域网
嗯... 理解生成树的概念: 在一幅图中将所有n个点连接起来的n-1条边所形成的树. 最小生成树: 边权之和最小的生成树. 最小瓶颈生成树: 对于带权图,最大权值最小的生成树. 如何操作? 1.Pri ...
- angularJs路由的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css grid学习笔记
仅为自己用而收藏罢了 w3c官方文档 https://www.w3.org/TR/css-grid-1/#grid-items w3cplus(zhongwenban ) 大漠博主的系列文章 基础知识 ...
- 【Leetcode】Divide Two Integers
Divide two integers without using multiplication, division and mod operator. class Solution { public ...