API Docs for: 0.2
Show:

JC.msgbox Class

msgbox 提示 popup
这个是不带蒙板 不带按钮的 popup 弹框
注意, 这是个方法, 写 @class 属性是为了生成文档

JC Project Site | API docs | demo link

see also: JC.Panel

Constructor

JC.msgbox

(
  • _msg
  • _popupSrc
  • _status
  • _cb
  • _closeMs
)
static

Parameters:

  • _msg String

    提示内容

  • _popupSrc Selector

    触发弹框的事件源 selector, 不为空显示 缓动效果, 为空居中显示

  • _status Int

    显示弹框的状态, 0: 成功, 1: 错误, 2: 警告

  • _cb Function

    弹框自动关闭后的的回调, 如果 _cb 为 int 值, 将视为 _closeMs

    function( _evtName, _panelIns ){
       var _btn = $(this);
    }
  • _closeMs Int

    自动关闭的间隔, 单位毫秒, 默认 2000

Returns:

Methods

_init

() private

初始化Panel

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

_model

Unknown private

_view

Unknown private

tpl

String static

自定义 JC.msgbox 的显示模板

Default: undefined

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 });