在实际开发项目中经常会用到对话框组件,提示一些信息。其实有很多,例如:在项目中常用到的“Jquery-UI、Jquery-EasyUI”的.Dialog,他们也很强大,Api文档也很多。今天就介绍一款轻量级的对话框组件artDialog,以下分别为Jquery-UI、Jquery-EasyUI、artDialog的对话框。

   

一、“artDialog”介绍:

artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。       

1、自适应内容
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
完善的接口
它的接口完善,可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
2、细致的体验
如果不是在输入状态,它支持Esc快捷键关闭;可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应……
3、跨平台兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。
二、快速入门、简答易用                  

简单介绍一下artDialog的配置参数:

名称 类型 默认值 描述
 
title String '消息' 标题内容
content String 'loading..' 消息内容。
1、如果传入的是HTMLElement类型,如果是隐藏元素会给其设置display:block以显示该元素,其他属性与绑定的事件都会完整保留,对话框关闭后此元素又将恢复原来的display属性,并且重新插入原文档所在位置
2、如果没有设定content的值则会有loading的动画
HTMLElement
按钮
ok Function null 确定按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮
Boolean
cancel Function null 取消按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮
对话框标题栏的关闭按钮其实就是取消按钮,只不过视觉不同罢了,点击同样触发cancel事件
Boolean
okVal String '确定' "确定按钮"文字
cancelVal String '取消' "取消按钮"文字
button Array null 自定义按钮。
配置参数成员:
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态(后续可使用扩展方法让其恢复可用状态)
 
示例:
参数如:[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作,需要阻止触发关闭请让回调函数返回false
尺寸
width Number 'auto' 设置消息内容宽度,可以带单位。一般不需要设置此,对话框框架会自己适应内容。
如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整
String
height Number 'auto' 设置消息内容高度,可以带单位。不建议设置此,而应该让内容自己撑开高度。
如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整

1、使用传统的参数

art.dialog(content, ok, cancel)

art.dialog('简单愉悦的接口,强大的表现力,优雅的内部实现', function(){alert('yes');});

2、使用字面量传参

var dialog = art.dialog({
title: '欢迎',
content: '欢迎使用artDialog对话框组件!',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time();
return false;
}
});

两秒后关闭



3、扩展方法(它们并没有整合在artDialog主文件里面)

         (1)、实现摇头效果、以及调用示例。(如果回答不正确,一直“摇头”)
                  摇头效果 扩展方法

var dialog = art.dialog({
content: '<p>"己所不欲"下一句是?</p>'
+ '<input id="demo-labs-input" style="width:15em; padding:4px" />',
fixed: true,
id: 'Fm7',
icon: 'question',
okVal: '回答',
ok: function () {
var input = document.getElementById('demo-labs-input'); if (input.value !== '勿施于人') {
this.shake && this.shake();// 调用抖动接口
input.select();
input.focus();
return false;
} else {
art.dialog({
content: '恭喜你,回答正确!',
icon: 'succeed',
fixed: true,
lock: true,
time: 1.5
});
};
},
cancel: true
}); dialog.shake && dialog.shake();// 调用抖动接口

调用示例

(2)、右下角滑动通知

artDialog.notice = function (options) {
var opt = options || {},
api, aConfig, hide, wrap, top,
duration = ; var config = {
id: 'Notice',
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false,
follow: null,
lock: false,
init: function(here){
api = this;
aConfig = api.config;
wrap = api.DOM.wrap;
top = parseInt(wrap[].style.top);
hide = top + wrap[].offsetHeight; wrap.css('top', hide + 'px')
.animate({top: top + 'px'}, duration, function () {
opt.init && opt.init.call(api, here);
});
},
close: function(here){
wrap.animate({top: hide + 'px'}, duration, function () {
opt.close && opt.close.call(this, here);
aConfig.close = $.noop;
api.close();
}); return false;
}
}; for (var i in opt) {
if (config[i] === undefined) config[i] = opt[i];
}; return artDialog(config);
};

“右下角滑动通知"扩展方法

art.dialog.notice({
title: '万象网管',
width: ,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩
content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',
icon: 'face-sad',
time:
});

调用示例

三、说了这么多,有人会问“开源不”??

   官方是这么说的:artDialog 采用LGPL开源协议(如下)
    • 如果您不对 artDialog 程序代码进行任何修改,直接调用组件,可以以任意方式自由使用:开源、非开源、商业及非商业。
    • 如果您对 artDialog 程序代码进行任何的修改或者衍生,涉及修改部分的额外代码和衍生的代码都必须采用 LGPL 协议开放源代码。
    • 无论您对 artDialog 程序代码如何修改,都必须在程序文件头部声明版权信息的注释(包括压缩版)

四、总结:好用的插件有很多,同时也方便了我们的开发,如果大家还有比较好用的“dialog”插件,欢迎推荐!

    

        源码下载:前面有一篇文章中用到这个组件

介绍一款“对话框”组件之 “artDialog”在项目中的使用的更多相关文章

  1. rbac权限组件整合到实际项目的全过程详述

    rbac简介 项目的GitHub地址 欢迎Download&Fork&Star:https://github.com/Wanghongw/CombineRbac 另外,本文只简单介绍一 ...

  2. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  3. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  4. JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  5. 《介绍一款开源的类Excel电子表格软件》续:七牛云存储实战(C#)

    两个月前的发布的博客<介绍一款开源的类Excel电子表格软件>引起了热议:在博客园有近2000个View.超过20个评论. 同时有热心读者电话咨询如何能够在SpreadDesing中实现存 ...

  6. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. [Python] wxPython 状态栏组件、消息对话框组件 学习总结(原创)

    1.状态栏组件 1.基本介绍 上图: 红框框内的就是状态栏. 他可以分成若干个区块,比如上者分为了两个区块,并且比例是固定的,创建时可以指定 每个区块都能够显示 信息,一般通过 绑定事件 实时更新 各 ...

  8. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  9. C#组件系列———又一款日志组件:Elmah的学习和分享

    前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...

随机推荐

  1. 2.HelloWorld程序

    1.流程图 2./itcast0711/src/main/java/cn/itcast/a_helloworld/HelloWorld.java package cn.itcast.a_hellowo ...

  2. Spark- 数据清洗

    输入输出转化工具类 package com.rz.mobile_tag.log import org.apache.spark.sql.Row import org.apache.spark.sql. ...

  3. Struts 2简单实例

    Struts 2简单实例 参考: [java开发系列]—— struts2简单入门示例 - xingoo - 博客园https://www.cnblogs.com/xing901022/p/39616 ...

  4. 浏览器对应的selenium版本问题

    在selenium+python环境下查看selenium版本方法: cmd下输入:pip show selenium 卸载selenium版本: cmd下输入:pip uninstall selen ...

  5. JavaUtil_01_MD5加密

    一.百度翻译MD5工具类 昨天做java微信开发,引用百度翻译API给公众号添加翻译功能时,需要使用MD5生成签名.注意,使用MD5生成签名后一定要转成小写,不然百度翻译后台不会认你这个签名的,会报无 ...

  6. 2018.5.29 从layout 到 PCBA

    1 Gerber 这个网上有现成的教程:(不要写网上能找到的资料-敏捷开发) AD 导出Gerber :https://jingyan.baidu.com/article/3c48dd3494181c ...

  7. 9th

    2017-2018-2 20179212<网络攻防实践>第9周作业 视频学习 KaliSecurity压力测试工具 压力测试通过确定一个系统的瓶颈或者不能接受的性能点,来获得系统能够提供的 ...

  8. jqgrid--api,官网demo,编辑

    api参考: http://blog.csdn.net/hurryjiang/article/details/7551477 官网demo: http://www.trirand.com/blog/j ...

  9. Brunch with a Friend 与朋友共进午餐

    brownies 核仁巧克力饼 toast 烤面包 dining room 餐厅 practical 实用的 meal 一餐 combination 组合 pancake 薄煎饼 waffle 华夫饼 ...

  10. keil5编译时出现 MDK-Pro middleware is not allowed with this license

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51700961 最近在用MDK编译一个别人的工程时,有如上提示: 1.原因是没有注册 ...