artDialog对话框组件使用心得

官方API非常详细,地址在底部,以下我只结合自己的使用情况写下笔记,加深记忆,便于日后再次使用。

JS引入:

  1. 单独引入:(通过 art.dialog 使用)

     <script src="artDialog/artDialog.js?skin=default"></script>
    
  2. 作为JQuery组件:(通过 $.dialog 使用)

     <script src="artDialog/jquery.artDialog.js?skin=default"></script>
    

    skin=xxxxx表示采用的皮肤,支持

    • default
    • aero
    • chrome
    • opera
    • simple
    • idialog
    • twitter
    • blue
    • black
    • green

    结合官方API预览各皮肤后自行选择即可。

  3. 若采用iframe来填充弹出层,加载iframeTools插件将可以进行更多交互操作

     <script src="artDialog/plugins/iframeTools.js"></script>
    

全局默认参数定义:

(function (config) {
    config['content'] = '<div class="aui_loading"><span>loading..</span></div>';   //默认内容
    config['title'] = '\u6d88\u606f';       // 标题. 默认'消息'
    config['button'] = null;                // 自定义按钮
    config['ok'] = null;                    // 确定按钮回调函数
    config['cancel'] = null;                // 取消按钮回调函数
    config['init'] = null;                  // 对话框初始化后执行的函数
    config['close'] = null;                 // 对话框关闭前执行的函数
    config['okVal'] = '\u786E\u5B9A';       // 确定按钮文本. 默认'确定'
    config['cancelVal'] = '\u53D6\u6D88';   // 取消按钮文本. 默认'取消'
    config['width'] = 'auto';               // 内容宽度
    config['height'] = 'auto';              // 内容高度
    config['minWidth'] = 96;                // 最小宽度限制
    config['minHeight'] = 32;               // 最小高度限制
    config['padding'] = '20px 25px';        // 内容与边界填充距离
    config['skin'] = '';                    // 皮肤名(预留接口,尚未实现)
    config['icon'] = null;                  // 消息图标名称
    config['time'] = null;                  // 自动关闭时间
    config['esc'] = true;                   // 是否支持Esc键关闭
    config['focus'] = true;                 // 是否支持对话框按钮自动聚焦
    config['show'] = true;                  // 初始化后是否显示对话框
    config['follow'] = null;                // 跟随某元素(即让对话框在元素附近弹出)
    config['path'] = _path;                 // artDialog路径
    config['lock'] = false;                 // 是否锁屏
    config['background'] = '#000';          // 遮罩颜色
    config['opacity'] = .7;                 // 遮罩透明度
    config['duration'] = 300;               // 遮罩透明度渐变动画速度
    config['fixed'] = false;                // 是否静止定位
    config['left'] = '50%';                 // X轴坐标
    config['top'] = '38.2%';                // Y轴坐标
    config['zIndex'] = 1987;                // 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
    config['resize'] = true;                // 是否允许用户调节尺寸
    config['drag'] = true;                  // 是否允许用户拖动位置
})(art.dialog.defaults);

个人使用实例:

  1. json提交指令,artDialog显示等待,接收返回指令完成刷新

     var waiting=$.dialog({
         id: 'Waiting',
         title: '系统正在处理您的请求  ',
         lock: true,
         background: '#fff',
         opacity: 0.5
     });
     $.getJSON(url,function(data){
         if (1*data.Result === 0){
             waiting.close();
             $.dialog({
                 title: '失败',
                 icon: 'error',
                 content: data.Message,
                 lock: true,
                 background: '#fff',
                 opacity: 0.5
             });
         }
         else if(1*data.Result === 1){
             waiting.close();
             var tempMsg=(!data.Message)?'操作成功!':data.Message;
             $.dialog({
                 title: '成功',
                 icon: 'succeed',
                 content: tempMsg+' <b id="BTiming">3</b>秒后自动刷新',
                 lock: true,
                 background: '#fff',
                 opacity: 0.5,
                 init: function(){
                     var i = 3;
                     var fn = function () {
                         !i && location.reload();
                         $('#BTiming').text(i);
                         i --;
                     };
                     timer = setInterval(fn, 1000);
                     fn();
                 },
                 button: [
                     {
                         name: '立即刷新',
                         callback: function () {
                             location.reload();
                             return false;
                         },
                         focus: true
                     }
                 ]
             });
         }
     });
    
  2. 链接进行确定询问

     $("a").click(function(){
         $this=$(this);
         $.dialog.confirm('确认要'+$(this).text()+'?', function(){
             location.href=$this.prop('href');
         },
         function(){
         });
         return false;
     });
    
  3. 审核操作,若不通过,填写审核不通过的原因

     $("a").click(function(){
         $this=$(this);
         $.dialog({
             title: '审核',
             content: '请选择审核结果?',
             icon: 'question',
             button: [
                 {
                     name: '通过',
                     focus: true,
                     callback: function(){
                         location.href=$this.prop('href')+"?audit=1";
                     }
                 },
                 {
                     name: '不通过',
                     callback: function(){
                         this.content('不通过原因: <input type="text" name="auditreason" value=""/>');
                         this.button({
                             name: '通过',
                             focus: false,
                             disabled: true
                         });
                         this.button({
                             name: '不通过',
                             focus: true,
                             callback:function(){
                                 location.href=$this.prop('href')+"?audit=0&reason="+$('input[name="auditreason"]').val();
                             }
                         });
                         return false;
                     }
                 }
             ]
         });
         return false;
     });
    

官方API:http://www.planeart.cn/demo/artDialog/_doc/API.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏