POW之对话框

学习一个JS的面向对象!封装了一个简单的小对话框

使用基本法

首先需要包含以下几个文件

文件名 描述
jquery 比较偷懒的用了jquery来操作dom
dialog/dialog.js 封装的dialog类
dialog/dialog.css dialog基本的样式·

生成一个对话框

<script>
    var dialog = new Pow.Dialog();
</script>

就是这么easy!


初始化配置

Pow之对话框提供了很多自定义的属性,能够最大程度的满足需求,可是自行设置的属性如下所示

属性 描述 默认值
id 对话框最外层div的id属性,可直接用它操作dom元素
width 宽度(单位px) 600
height 高度(单位px) 400
closeButton 是否显示右上角的x true
buttonAlign 按钮对齐方式(left, right, center) right
title 标题(可资瓷html标签) hello!
content 内容(可资瓷html标签) I'm PowerPigger
buttons 数组,每个元素为json,资瓷包含text,click,css三个属性 [{'text': 'Ok'},{'text': 'Cancel'}]

细说一下buttons

buttons为一个数组,里面每个元素代表一个button,可以设置三个属性,它们的含义如下

text

text属性为button里面的内容,和上面的title,content不一样,这里不在资瓷在里面加标签

css

css属性可以自定义这个按钮的样式类,如果为空的话就是默认的样式

click

click属性应设置成一个函数,表示点击按钮时的事件响应,默认为关闭对话框

一个实例

<script>
    var dialog = new Pow.Dialog({
        'id': 'dialog-confirm',
        'width': 800,
        'height': 600,
        'buttons': [{
            'text': '关闭',
            'click': function() {
                dialog.width(dialog.width() / 2);
                dialog.height(dialog.height() / 2);
            }
        }],
        'title': '<div style="color: #ff8a00;">Pow颜色的标题</div>',
        'content': '<iframe src="http://sensai.sinaapp.com" width="100%" height="100%"><\/iframe>',
    });
</script>

成员方法

作为一个类当然要有一些成员方法,POW之对话框也不例外,不过这里封装的还比较简单,只提供了一些基本的设置对话框各个属性的方法,具体如下

调用方法 干嘛用的
dialog.show() 显示(打开)对话框
dialog.hide() 隐藏(关闭)对话框
setTitle('') 设置标题
setContent('') 设置内容
width() 里面有参数,则是设置宽度,负责返回宽度
height() 里面有参数,则是设置高度,负责返回高度

这里的方法都很简单,就不做详细说明了。

总的来说,这个对话框控件若要放到生产环境是不行的,但是作为pow主席的高级玩具还是绰绰有余的。