个人觉得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. nginx负载均衡tomcat和配置ssl

    目录 tomcat 组件功能 engine host context connector service server valve logger realm UserDatabaseRealm 工作流 ...

  2. 再谈VS2010编译更高平台vs2012(v110),vs2015(v140)的objectARX程序

    前段时间我贴了一篇vs2010批量编译vc6~vs2008的ARX版本,实际上那一篇是我在研究vs2010编译v110,v140平台的附带收获,正应了那句话,有心栽花花不开,无心插柳柳成荫,因为vs2 ...

  3. java学习笔记之位运算符

    java的位运算符主要针对二进制数的位进行逻辑运算,主要包括以下几种的位运算符 1.与运算符(&) 与运算符的使用规律是两个操作数中位为1的时候结果为1,否则都是0,例如  3&5=1 ...

  4. php 镜像richarvey/nginx-php-fpm的ngnix配置

    1.遇到错误option error_page 405 =200 $request_uri; location ~ ^/(json)/ { # root /data/website/xxxx.com/ ...

  5. php Tp5下mysql的增删改查

    // 增 public function insert(){ $data = array( "username"=>"user121", "pa ...

  6. 最短路径SPFA算法(邻接表存法)

    queue <int> Q; void SPFA (int s) { int i, v; for(int i=0; i<=n; i++) dist[i]=INF; //初始化每点i到 ...

  7. 控制台解析命行C#

    //---------------------------------------------------------------------   /// <summary> /// Co ...

  8. 对于自我管理 ObjectContextManager的测试

    书接上文, 把代码改为多线程, public class Threads {   public static void allStart() { for (int i = 0; i < 10; ...

  9. python pika简单实现RabbitMQ通信

    Windows上安装及启动RabbitMQ https://blog.csdn.net/hzw19920329/article/details/53156015 安装python pika库 pip ...

  10. 搭建svn管理平台

    安装svn服务器:yum -y install subversion 创建svn的目录:mkdir -p /data/svn 初始化svn目录:svnadmin create /data/svn co ...