个人觉得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组件应用学习(一)的更多相关文章

  1. artDialog组件应用学习(五)

    一.artDialog事件应用 对话框编写代码 function DialogEvent() { seajs.use(['jquery', '/Scripts/arale/artDialog/src/ ...

  2. artDialog组件应用学习(四)

    一.在对话框自定义操作按钮 预览: html调用代码: var btnArray = [ { value: '同意', callback: function () { this.content('你同 ...

  3. artDialog组件应用学习(三)

    一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...

  4. artDialog组件应用学习(二)

    一.没有操作选项的对话框 预览: html前台引入代码:(之后各种效果对话框引入代码致,调用方法也一样,就不一一写入) <script type="text/javascript&qu ...

  5. DocX开源WORD操作组件的学习系列四

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  6. DocX开源WORD操作组件的学习系列三

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  7. DocX开源WORD操作组件的学习系列二

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  8. DocX开源WORD操作组件的学习系列一

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  9. Vue学习—组件的学习

    1.什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能 ...

随机推荐

  1. 单元测试unittest

    unittest.TestSuite():用例集合 uinttest.defaultTestLoader.discover():寻找测试用例,去哪个目录下寻找测试用例,加载测试用例

  2. VS2013安装及破解教程

    https://blog.csdn.net/qq_33742119/article/details/80075352 软件下载的百度云链接,也可以在官网直接下载 链接:https://pan.baid ...

  3. [译文]Casperjs1.1.0参考文档-安装

    安装 Casperjs能被安装在mac osx,windows 和大多数linux版本 依赖项 PhantomJS1.82及以上 Python2.6及以上(很多人忘了安装python导致安装失败) 1 ...

  4. P3596 [POI2015]MOD

    $ \color{#0066ff}{ 题目描述 }$ 给定一棵无根树,边权都是1,请去掉一条边并加上一条新边,定义直径为最远的两个点的距离,请输出所有可能的新树的直径的最小值和最大值 \(\color ...

  5. zbar

    源码下载链接:http://sourceforge.net/projects/zbar

  6. php中magic_quotes_gpc的作用 解决日文数据提交后多出来反斜杠的问题

    magic_quotes_gpc发生作用是在传递$_GET,$_POST,$_COOKIE时 1.条件: magic_quotes_gpc=off写入数据库的字符串未经过任何过滤处理.从数据库读出的字 ...

  7. JavaWeb学习笔记(四)—— response

    一.response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServletResponse.在客户端发出每个请求时,服 ...

  8. python用字典实现switch..case类似的函数调用

    python中没有swich..case,若要实现一样的功能,又不想用if..elif来实现,可以充分利用字典进行实现 主要是想要通过不同的key调用不同的方法,在学习过程中,发现不管输入的key是什 ...

  9. flask总结01

    一:Flask的基本介绍和小案例 01:flask的基本介绍 Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开 ...

  10. css样式继承经验记录

    与元素(文字颜色.字体等)相关的样式默认会被继承: 与元素在页面上的布局相关的样式默认不会被继承: <body> <p>I like <span>aplles< ...