网页前端artdialog对话框控件的说明和常见操作

在做网页前端设计的时候经常会要用到对话框,有的框架自带对话框功能,有的则自己写对话框代码,这里我们介绍一款轻量级对话框插件artdialog的基本使用方法。这个对话框是基于JS编写并且需要Jquery的支持才能运行,而且这个插件非常小简单压缩后只有10多KB的样子所以非常便捷。!


一般运行环境配置
首先要导入的是JQuery.js文件,这里我建议使用1.11.0以上版本,然后导入art5Dialog.js这个文件。把这些文件放到head标签之间,具体代码如下:


<script type="text/javascript" src="../scripts/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../scripts/artdialog/dialog-plus-min.js"></script> 



artdialog常见配置参数
title: {对话框上显示的标题.默认:'提示'}
content: {消息体内容,可以加入自己的HTML}
lock: {是否锁定屏幕. 默认:false}
height: {高度,支持px像素等单位. 默认:'auto'}
width: {宽度,支持px像素等单位. 默认:'auto'}
url: {iframe地址,存在content参数时候,此参数无效}
y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中,而是使用的黄金比例)}
x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
fixed: {是否启用静止定位. 默认:false}
time: {自动关闭的时间,单位是秒}
style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
yesText: {确定按钮文本. 默认:'确定'}
noText: {取消按钮文本. 默认:'取消'}
id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2',则内容容器id为'my2Content'}
yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}


常见的操作
首先在网页的head标签中对插件进行配置,常见配置代码如下;
 (function(){//定义一个JS函数,在里面设置对话框全局变量  
    var d = art.dialog.defaults;  //声明一个变量d用来存放配置
    //可以根据你自己的要求加载不同的皮肤,在数组第一个为默认皮肤,可以不用填写
    d.skin = ['default', 'chrome', 'facebook', 'aero'];  
    d.drag = true;  //是否支持支持对话框拖动
      
    // 超过此面积大小的对话框使用替身拖动  
    d.showTemp = 100000;  
})();


其次在下面以一个简单的网页弹出框范例讲解下,把HTML网页上需要的必要资源文件导入后。在JAVASCRIPT标签中编辑如下代码。

artDialog(
        {    
            content:'欢迎你来到对话框世界!',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);

本文由作者自行上传并发布,牛人技术博客仅提供信息发布平台。文章仅代表作者个人观点,不代表本博客立场。如需转载,必须声明出处。

网友评论 comments

发表评论

电子邮件地址不会被公开。必填项已用 *标注

暂无评论

牛人技术博客 | AboutUS | 湘ICP备13000282号-8 |
Copyright © 2009 - 2018 NRJS Corporation, All Rights Reserved
添加图标到手机桌面
扫二维码
扫二维码
返回顶部