Dialog - 人人网开放平台Wiki

[编辑] 功能描述

XNJS提供的对话框JS代码库，供开发者完成对话框的各种操作。

[编辑] 对话框类型

XNJS的Dialog对象提供了三种类型的对话框：

对话框类型	描述
Dialog.DIALOG_ALERT	用于提示用户某一事件的发生，只有一个按钮，是window.alert()的友好表现形式。
Dialog.DIALOG_CONFIRM	用于让用户选择接受或拒绝某个事件，有两个选择按钮，是window.confirm()的友好表现形式。
Dialog.DIALOG_PANEL	开发者可以自由定制的对话框。凡是前两种对话框都不能满足的需求，都可以通过定制这种对话框来实现期望的效果。本文提到的众多的对话框定制函数只对于这种类型的对话框才可用。

以上代表对话框类型的三个常量，在创建对话框时作为第一个参数传入对话框构造函数。如果省略这一参数，则默认创建的是DIALOG_CONFIRM类型的对话框。

下面分别是三种类型对话框的截图（都使用缺省配置）。

ALERT对话框：
CONFIRM对话框：
PANEL对话框：
在缺省的配置下，这种DIALOG_PANEL型的对话框什么内容也没有，但它提供了大量的定制函数用于进行配置，并可动态添加XNJS的Button对象，可以真正实现开发者的任意需求。

[编辑] 创建ALERT对话框

构造函数

ALERT对话框的构造函数有两种传参方式：第一种方式按照顺序接受一系列配置参数；第二种方式将各种配置参数作为一个对象的属性传入，因此没有顺序的要求，使用更灵活。另外，第二种传参方式还可以比第一种方式传入更多的参数。

参数

第一种传参方式：

new Dialog(dialog_type, message[,title,type,X,Y,width,height,callBack]);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_ALERT。	必选。若该参数省略，则创建的是CONFIRM对话框。	n/a
message	String	要显示的消息内容	必选	n/a
title	String	提示框的标题	可选，不需要可以传null	'提示'
type	String	提示类型，可以是'normal'默认样式或'error'错误提示样式	可选，不需要可以传null	'normal'
X	Number	提示框位置的横坐标	可选，不需要可以传null	默认居中
Y	Number	提示框位置的纵坐标	可选，不需要可以传null	距离窗口上边框200px
width	Number	提示框的宽度	可选，不需要可以传null	400px
height	Number	提示框的高度	可选，不需要可以传null	默认自动伸展
callBack	Function	当点击确定时执行的动作	可选	默认为空

第二种传参方式：

new Dialog(dialog_type, parameters);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_ALERT。	必选。若该参数省略，则创建的是CONFIRM对话框。	n/a
parameters	Object	参数以parameters对象的属性传入。除了第一种方式列出的参数之外，还可以传入一些额外的参数，如：按钮文字、noHeader、noFooter、autoHide。具体参见下面的parameters对象属性列表。	必选	n/a

parameters参数对象属性列表：

属性名	类型	描述	默认值
message	同第一种传参方式	同第一种传参方式	同第一种传参方式
title	同第一种传参方式	同第一种传参方式	同第一种传参方式
type	同第一种传参方式	同第一种传参方式	同第一种传参方式
X	同第一种传参方式	同第一种传参方式	同第一种传参方式
Y	同第一种传参方式	同第一种传参方式	同第一种传参方式
width	同第一种传参方式	同第一种传参方式	同第一种传参方式
height	同第一种传参方式	同第一种传参方式	同第一种传参方式
callBack	同第一种传参方式	同第一种传参方式	同第一种传参方式
button	String	按钮文字	'确定'
noHeader	Boolean	是否不显示标题	false
noFooter	Boolean	是否不显示底部内容（包括按钮）	false
autoHide	Number	自动关闭提示框的秒数	默认不自动关闭

示例

<script  type="text/javascript">
<!--

  function alert_callback() {
    //当用户点击确定时执行这里的代码
  }

  var alert_dialog = new Dialog(Dialog.DIALOG_ALERT, '这里是提示信息', '提示框标题', null, null, null, null, 
    null, alert_callback);

  //下面是等效的代码
  var alert_dialog = new Dialog(Dialog.DIALOG_ALERT,
      {
        callBack: alert_callback,
        message: '这里是提示信息',
        title: '提示框标题'
      }
    );

//-->
</script>

[编辑] 创建CONFIRM对话框

构造函数

CONFIRM对话框的构造函数同样有两种传参方式。

参数

第一种传参方式：

new Dialog([dialog_type,] message[,title,callBack,yes,no,X,Y,width,height]);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_CONFIRM。	可选。该参数对CONFIRM对话框可以省略。	Dialog.DIALOG_CONFIRM
message	String	要显示的消息内容	必选	n/a
title	String	提示框的标题	可选，不需要可以传null	'提示'
callBack	Function	当点击确定时执行的动作	可选	默认为空
yes	String	yes按钮显示的文字	可选，不需要可以传null	'确定'
no	String	no按钮显示的文字	可选，不需要可以传null	'取消'
X	Number	提示框位置的横坐标	可选，不需要可以传null	默认居中
Y	Number	提示框位置的纵坐标	可选，不需要可以传null	距离窗口上边框200px
width	Number	提示框的宽度	可选，不需要可以传null	400px
height	Number	提示框的高度	可选，不需要可以传null	默认自动伸展

第二种传参方式：

new Dialog([dialog_type,] parameters);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_CONFIRM。	可选。该参数对CONFIRM对话框可以省略。	Dialog.DIALOG_CONFIRM
parameters	Object	参数以parameters对象的属性传入。具体参见下面的parameters对象属性列表。	必选	n/a

parameters参数对象属性列表：

属性名	类型	描述	默认值
message	同第一种传参方式	同第一种传参方式	同第一种传参方式
title	同第一种传参方式	同第一种传参方式	同第一种传参方式
callBack	同第一种传参方式	同第一种传参方式	同第一种传参方式
yes	同第一种传参方式	同第一种传参方式	同第一种传参方式
no	同第一种传参方式	同第一种传参方式	同第一种传参方式
X	同第一种传参方式	同第一种传参方式	同第一种传参方式
Y	同第一种传参方式	同第一种传参方式	同第一种传参方式
width	同第一种传参方式	同第一种传参方式	同第一种传参方式
height	同第一种传参方式	同第一种传参方式	同第一种传参方式

示例

<script  type="text/javascript">
<!--

  function confirm_callback(confirm) {
    if (confirm) {
      //用户点击了'确定'按钮
    }
    else {
      //用户点击了'取消'按钮
    }
  }

  var confirm_dialog = new Dialog(Dialog.DIALOG_CONFIRM, '提示信息：选确定还是取消？', '提示框标题', 
    confirm_callback);

  //下面是等效的代码
  var confirm_dialog = new Dialog(Dialog.DIALOG_CONFIRM,
      {
        callBack: confirm_callback,
        message: '提示信息：选确定还是取消？',
        title: '提示框标题'
      }
    );

//-->
</script>

[编辑] 创建PANEL对话框

构造函数

PANEL对话框的构造函数同样有两种传参方式。

PANEL对话框功能强大，可灵活定制。构造函数的参数body, header, footer可以传入字符串、XNML_String对象（代表XNML片段），或者是一个XNJS Button对象。

参数

第一种传参方式：

new Dialog(dialog_type, [body,header,footer,X,Y,width,height]);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_PANEL。	必选。若该参数省略，则创建的是CONFIRM对话框。	n/a
body	String/XNML_String/Button	要显示的消息内容	可选，不需要可以传null	默认为空。
header	String/XNML_String/Button	对话框的标题内容	可选，不需要可以传null	默认为空。
footer	String/XNML_String/Button	对话框的底部内容	可选，不需要可以传null	默认为空。
X	Number	对话框位置的横坐标	可选，不需要可以传null	默认居中
Y	Number	对话框位置的纵坐标	可选，不需要可以传null	距离窗口上边框200px
width	Number	对话框的宽度	可选，不需要可以传null	400px
height	Number	对话框的高度	可选，不需要可以传null	默认自动伸展

第二种传参方式：

new Dialog(dialog_type, parameters);

参数名	类型	描述	是否可选	默认值
dialog_type	Number	对话框类型，值必须是Dialog.DIALOG_PANEL。	必选。若该参数省略，则创建的是CONFIRM对话框。	n/a
parameters	Object	参数以parameters对象的属性传入。具体参见下面的parameters对象属性列表。	必选	n/a

parameters参数对象属性列表：

属性名	类型	描述	默认值
body	同第一种传参方式	同第一种传参方式	同第一种传参方式
header	同第一种传参方式	同第一种传参方式	同第一种传参方式
footer	同第一种传参方式	同第一种传参方式	同第一种传参方式
X	同第一种传参方式	同第一种传参方式	同第一种传参方式
Y	同第一种传参方式	同第一种传参方式	同第一种传参方式
width	同第一种传参方式	同第一种传参方式	同第一种传参方式
height	同第一种传参方式	同第一种传参方式	同第一种传参方式

[编辑] 定制PANEL对话框

PANEL对话框提供了丰富的函数用于定制对话框，可以使用XNML片段设置标题、消息主体和底部内容，还可以动态添加Button对象。这些函数只对于PANEL类型的对话框可用。

定制函数

PANEL对话框的函数	备注
addHeader(header)	添加对话框的标题内容。原有标题内容仍然存在。header的类型可以是String/XNML_String/Button。
addBody(body)	添加对话框的主体消息内容。原有消息内容仍然存在。body的类型可以是String/XNML_String/Button。
addFooter(footer)	添加对话框的底部内容。原有底部内容仍然存在。footer的类型可以是String/XNML_String/Button。
setHeader(header)	设置对话框的标题内容。原有标题内容被清除。header的类型可以是String/XNML_String/Button。
setBody(body)	设置对话框的主体消息内容。原有消息内容被清除。body的类型可以是String/XNML_String/Button。
setFooter(footer)	设置对话框的底部内容。原有底部内容被清除。footer的类型可以是String/XNML_String/Button。
destroy()	销毁对话框。开销较大，不建议使用。建议使用hide()和show()函数打开和隐藏对话框。
hide()	隐藏对话框，但没有销毁，以后还可以通过show()函数显示出来。
show()	显示对话框。
clear()	清空对话框的内容。
setType(type)	设置对话框的样式：'normal'或'error'样式。
setWidth(w)	设置对话框的宽度。
setHeight(h)	设置对话框的高度。
resizeTo(w, h)	设置对话框的尺寸，包括宽度和高度。
setX(x)	设置对话框位置的横坐标。
setY(y)	设置对话框位置的纵坐标。
moveTo(x, y)	根据坐标调整对话框位置。
moveTo(element)	将对话框移动到定位元素element所在的位置。
setAlignType(alignType)	设置与定位元素的对齐方式。只在根据定位元素移动对话框的情况下有效。16种对齐方式，详细情况请点击左边函数的链接。默认对齐方式为'4-1'。
setOffsetX(x)	设置对话框相对定位元素的水平偏移。只在根据定位元素移动对话框的情况下有效。
setOffsetY(y)	设置对话框相对定位元素的垂直偏移。只在根据定位元素移动对话框的情况下有效。

示例


<xn:js-string var="loc_input">
  <input id="xnjs_location" value="http://dev.xiaonei.com/wiki/XNJS" size="50" />
</xn:js-string>

<script type="text/javascript">
<!--
  function showPanel() {
    var panel_dialog;
    if (!getPanel.panel_dialog) {
      //创建PANEL对话框，<xn:js-string>定义的内容作为消息主体
      panel_dialog = showPanel.panel_dialog =
        new Dialog(Dialog.DIALOG_PANEL, loc_input, '标题');
      //创建Button对象
      var button1 = new Button('关闭对话框', button1_callback);
      panel_dialog.addBody(button1); //将button1添加到对话框底部

      var ele = document.getElementById('id123');
      panel_dialog.setAlignType('2-1');  
      panel_dialog.moveTo(ele); //以'2-1'对齐方式移动对话框到ele元素
    }
    else {
      panel_dialog = showPanel.panel_dialog;
    }
    panel_dialog.show();

    //button1按钮的callback函数
    function button1_callback() {
      //按钮被点时隐藏对话框
      panel_dialog.hide();
    }
  }
//-->
</script>

[编辑] 相关对象

取自"http://dev.xiaonei.com/wiki/Dialog"

目录

[编辑] 功能描述

[编辑] 对话框类型

[编辑] 创建ALERT对话框

构造函数

参数

示例

[编辑] 创建CONFIRM对话框

构造函数

参数

示例

[编辑] 创建PANEL对话框

构造函数

参数

[编辑] 定制PANEL对话框

定制函数

示例

[编辑] 相关对象