个人觉得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. python中局部变量和全局变量

    局部变量,就是在函数内部定义的变量 不同的函数,可以定义相同的名字的局部变量,但是各用个的不会产生影响 局部变量的作用,为了临时保存数据需要在函数 在函数外边定义的变量叫做全局变量 全局变量能够在所有 ...

  2. 单元测试unittest

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

  3. Django模板—-自定义过滤器和标签

    一.filter和simple_tag 1.在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建template ...

  4. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  5. django 部署到Ubuntu安装MYSQL56

    阿里云 Ubuntu 14.04 安装mysql 5.6 1.升级apt-get sudo apt-get update 2. 安装mysql5.6版本 apt-get install mysql-s ...

  6. 【AT2434】JOI 公園 (JOI Park) 最短路+贪心

    题解 我的歪解 我首先想的是分治,我想二分肯定不行,因为它是没有单调性的. 我想了一下感觉它的大部分数据应该是有凸性的(例如\(y=x^2\)的函数图像),所以可以三分. 下面是我的三分代码(骗了不少 ...

  7. SQL 判断Null

    字段 is null 这是多久没写SQL 了啊....................

  8. angularJs表格效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  9. CentOS 中安装 mysql 5.7+

    参考:https://www.cnblogs.com/jimboi/p/6405560.html 1.下载rpm文件 wget https://dev.mysql.com/get/mysql57-co ...

  10. CSS column 布局总结

    有时候 第一列 底部会跑到顶部那里一部分.这时候应该这样. 在 每个 div前加上 display:inline-block