API Docs for: 0.2
Show:

JC.Panel Class

弹出层基础类 JC.Panel

require: JC.common

JC Project Site | API docs | demo link

Panel Layout 可用的 html attribute

panelclickclose = bool
点击 Panel 外时, 是否关闭 panel
panelautoclose = bool
Panel 是否自动关闭, 默认关闭时间间隔 = 2000 ms
panelautoclosems = int, default = 2000 ms
自动关闭 Panel 的时间间隔

a, button 可用的 html attribute( 自动生成弹框)

paneltype = string, require
弹框类型: alert, confirm, msgbox, panel
dialog.alert, dialog.confirm, dialog.msgbox, dialog
panelmsg = string
要显示的内容
panelmsgBox = script selector
要显示的脚本模板, 如果需要显示大量 HTML, 应该使用这个属性
panelstatus = int, default = 0
弹框状态: 0: 成功, 1: 失败, 2: 警告
类型不为 panel, dialog 时生效
panelcallback = function
点击确定按钮的回调, window 变量域
function( _evtName, _panelIns ){
   var _btn = $(this);
}
panelcancelcallback = function
点击取消按钮的回调, window 变量域
function( _evtName, _panelIns ){
   var _btn = $(this);
}
panelclosecallback = function
弹框关闭时的回调, window 变量域
function( _evtName, _panelIns ){
   var _btn = $(this);
}
panelbutton = int, default = 0
要显示的按钮, 0: 无, 1: 确定, 2: 确定, 取消
类型为 panel, dialog 时生效
panelheader = string
panel header 的显示内容
类型为 panel, dialog 时生效
panelheaderBox = script selector
panel header 的显示内容
要显示的脚本模板, 如果需要显示大量 HTML, 应该使用这个属性
类型为 panel, dialog 时生效
panelfooterbox = script selector
panel footer 的显示内容
要显示的脚本模板, 如果需要显示大量 HTML, 应该使用这个属性
类型为 panel, dialog 时生效
panelhideclose = bool, default = false
是否隐藏关闭按钮
类型为 panel, dialog 时生效
panelfixed = bool, default = false
显示 panel 时, 是否居中显示

Constructor

JC.Panel

(
  • _selector
  • _headers
  • _bodys
  • _footers
)

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 文字

Example:

       <script src="../../../lib.js"></script>
       <script src="../../../config.js"></script>
       <script>
           var btnstr = [
               '<div style="text-align:center" class="UButton">'
               , '<button type="button" eventtype="confirm">确定</button>'
               , '<button type="button" eventtype="cancel">取消</button>\n'
               , '</div>'
           ].join('');
           requirejs( [ 'JC.Panel' ], function(){
               tmpPanel = new JC.Panel( '默认panel', '<h2>test content</h2>' + btnstr, 'test footer');
               tmpPanel.on('close', function(_evt, _panel){
                   JC.log('user close evnet');
               });
               tmpPanel.show( 0 );
           });
       </script>

Methods

_fixWidth

(
  • _msg
  • _panel
  • _minWidth
  • _maxWidth
)
private static

修正弹框的默认显示宽度

Parameters:

  • _msg String

    查显示的文本

  • _panel JC.Panel
  • _minWidth Int
  • _maxWidth Int

_getButton

(
  • _type
)
private static

获取 显示的 BUTTON

Parameters:

  • _type Int

    0: 没有 BUTTON, 1: confirm, 2: confirm + cancel

_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]

getInstance

(
  • _selector
)
Panel instance static

从 selector 获取 Panel 的实例
如果从DOM初始化, 不进行判断的话, 会重复初始化多次

Parameters:

  • _selector Selector

Returns:

Panel instance:

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

autoCloseMs

Int static

自动关闭的时间间隔, 单位毫秒
调用 ins.autoClose() 时生效

Default: 2000

clickClose

Bool static

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

Default: true

FIXED

Bool static

显示Panel时, 是否 fixed 居中

Default: false

focusButton

Bool static

显示Panel时, 是否 focus 到 按钮上 focusButton

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