API Docs for: 0.2
Show:

JC.Dialog Class

带蒙板的会话弹框
注意, 这是个方法, 写 @class 属性是为了生成文档

JC Project Site | API docs | demo link

see also: JC.Panel

Constructor

JC.Dialog

(
  • _selector
  • _headers
  • _bodys
  • _footers
)
static

Parameters:

  • _selector Selector | String

    自定义弹框模板, 如果 _selector不能解析为 HTML, 将视为@param _headers

  • _headers String

    定义模板的 header 文字, 如果 _selector 不能解析为HTML, 视视为@param _bodys

  • _bodys String

    定义模板的 body 文字, 如果 _selector 不能解析为HTML, 视视为@param _footers

  • _footers String

    定义模板的 footer 文字

Returns:

Methods

_init

() private

初始化Panel

_logic.dialogIdentifier

(
  • _panel
)
private

设置会话弹框的唯一性

Parameters:

_logic.fixWidth

(
  • _status
)
Int private

获取弹框的显示状态, 默认为0(成功)

Parameters:

  • _status Int

    弹框状态: 0:成功, 1:失败, 2:警告

Returns:

Int:

_logic.fixWidth

(
  • _msg
  • _panel
)
private

修正弹框的默认显示宽度

Parameters:

_logic.hideMask

() private

隐藏蒙板

_logic.setMaskSizeForIe6

() private

窗口改变大小时, 改变蒙板的大小,
这个方法主要为了兼容 IE6

_logic.showMask

() private

显示蒙板

autoClose

(
  • _removeAutoClose
)

添加自动关闭功能

Parameters:

  • _removeAutoClose Bool

body

(
  • _html
)
String

获取或者设置 Panel body 的HTML内容

Parameters:

Returns:

String:

body 的HTML内容

center

()

把 Panel 位置设为屏幕居中

clickClose

(
  • _removeAutoClose
)

点击页面时, 添加自动隐藏功能

Parameters:

  • _removeAutoClose Bool

close

()

关闭 Panel
关闭 Panel 是直接从 DOM 中删除 Panel

dispose

()

从DOM清除Panel
close 方法清除 Panel可以被用户阻止, 该方法不会被用户阻止

find

(
  • _selector
)

从 Panel 选择器中查找内容
添加这个方法是为了方便jquery 使用者的习惯

Parameters:

  • _selector Selector

Returns:

selector

focusButton

()

focus 到 button
优先查找 input[eventtype=confirm], input[type=submit], button[eventtype=confirm], button[type=submit]
input[eventtype=cancel], input[type=buton], button[eventtype=cancel], button[type=button]

header

(
  • _html
)
String

获取或者设置 Panel Header 的HTML内容
如果 Panel默认没有 Header的话, 使用该方法 _html 非空可动态创建一个Header

Parameters:

Returns:

String:

header 的HTML内容

hide

()

隐藏 Panel
隐藏 Panel 设置 css display:none, 不会从DOM 删除 Panel

isClickClose

()

判断点击页面时, 是否自动关闭 Panel

Returns:

bool

layout

() Selector

返回 Panel 的 jquery dom选择器对象

Returns:

Selector:

on

(
  • _evtName
  • _cb
)

为Panel绑定事件
内置事件类型有 show, hide, close, center, confirm, cancel , beforeshow, beforehide, beforeclose, beforecenter
用户可通过 HTML eventtype 属性自定义事件类型

Parameters:

  • _evtName String

    要绑定的事件名

  • _cb Function

    要绑定的事件回调函数

Example:

           //绑定内置事件
           <button type="button" eventtype="close">text</button>
           <script>
           panelInstace.on( 'close', function( _evt, _panel ){ do something } );
           </script>
           //绑定自定义事件
           <button type="button" eventtype="userevent">text</button>
           <script>
           panelInstace.on( 'userevent', function( _evt, _pan:el ){ do something } );
           </script>

panel

(
  • _html
)
String

获取或者设置 Panel 的HTML内容

Parameters:

Returns:

String:

panel 的HTML内容

positionWith

(
  • _src
  • _selectorDiretion
)

设置Panel的显示位置基于 _src 的左右上下

Parameters:

  • _src Selector
  • _selectorDiretion String

    如果 _src 为 selector, _selectorDiretion 可以指定 top, 显示在上方

selector

() Selector

返回 Panel 的 jquery dom选择器对象
这个方法以后将会清除, 请使用 layout 方法

Returns:

Selector:

show

(
  • _position
)

显示 Panel
Panel初始后, 默认是隐藏状态, 显示 Panel 需要显式调用 show 方法

Parameters:

  • _position Int | Selector

    指定 panel 要显示的位置,
    如果 _position 为 int: 0, 表示屏幕居中显示
    如果 _position 为 selector: Paenl 的显示位置将基于 _position 的上下左右

Example:

 panelInstace.show();            //默认显示
 panelInstace.show( 0 );         //居中显示
 panelInstace.show( _selector ); //位于 _selector 的上下左右

trigger

(
  • _evtName
  • _srcElement
)

触发 Panel 已绑定的事件
用户可以使用该方法主动触发绑定的事件

Parameters:

  • _evtName String

    要触发的事件名, 必填参数

  • _srcElement Selector

    触发事件的源对象, 可选参数

Example:

 panelInstace.trigger('close');
 panelInstace.trigger('userevent', sourceElement);

triggerSelector

(
  • _setterSelector
)
Selector | Null

获取 html popup/dialog 的触发 node

Parameters:

  • _setterSelector Selector

Returns:

Selector | Null:

Properties

_logic

Unknown private

会话弹框逻辑处理方法集

_logic.maxWidth

Int private

弹框最大宽度

Default: 500

_logic.minWidth

Int private

弹框最小宽度

Default: 180

_logic.showMs

Int millisecond private

延时显示弹框
延时是为了使用户绑定的 show 事件能够被执行

_logic.timeout

SetTimeout private

延时处理的指针属性

_logic.tpls

Object private

保存会话弹框的所有默认模板

_logic.tpls

Object private

保存会话弹框的所有默认模板

_logic.tpls.alert

String private

alert 会话弹框的默认模板

_logic.tpls.confirm

String private

confirm 会话弹框的默认模板

_logic.tpls.mask

String private

会话弹框的蒙板模板

_logic.tpls.msgbox

String private

msgbox 会话弹框的默认模板

_model

Unknown private

_view

Unknown private

MULTI_MASK

Boolean static

是否支持多层蒙板

Default: true

Events

beforecenter

Function

Panel 居中显示前会触发的事件
这个事件在用户调用 _panelInstance.center() 时触发

Example:

 panelInstace.on( 'beforecenter', function( _evt, _panelInstance ){ do something });

beforeclose

Function

Panel 关闭前会触发的事件
这个事件在用户调用 _panelInstance.close() 时触发

Example:

 <button type="button" eventtype="close">text</button>
 <script>
 panelInstace.on( 'beforeclose', function( _evt, _panelInstance ){ do something });
 </script>

beforehide

Function

Panel 隐藏前会触发的事件

这个事件在用户调用 _panelInstance.hide() 时触发

Example:

 panelInstace.on( 'beforehide', function( _evt, _panelInstance ){ do something });

beforeshow

Function

Panel 显示前会触发的事件
这个事件在用户调用 _panelInstance.show() 时触发

Example:

 panelInstace.on( 'beforeshow', function( _evt, _panelInstance ){ do something });

cancel

Function

Panel 点击确取消按钮触发的事件

Example:

 <button type="button" eventtype="cancel">text</button>
 <script>
 panelInstace.on( 'cancel', function( _evt, _panelInstance ){ do something });
 </script>

center

Function

Panel 居中后会触发的事件

Example:

 panelInstace.on( 'center', function( _evt, _panelInstance ){ do something });

close

Function

关闭事件

Example:

 <button type="button" eventtype="close">text</button>
 <script>
 panelInstace.on( 'close', function( _evt, _panelInstance ){ do something });
 </script>

confirm

Function

Panel 点击确认按钮触发的事件

Example:

 <button type="button" eventtype="confirm">text</button>
 <script>
 panelInstace.on( 'confirm', function( _evt, _panelInstance ){ do something });
 </script>

hide

Function

Panel 隐藏时会触发的事件

这个事件在用户调用 _panelInstance.hide() 时触发

Example:

 panelInstace.on( 'hide', function( _evt, _panelInstance ){ do something });

show

Function

显示Panel时会触发的事件

Example:

 panelInstace.on( 'show', function( _evt, _panelInstance ){ do something });