API Docs for: 0.1
Show:

UXC.Panel Class

弹出层基础类 UXC.Panel

requires: jQuery

UXC Project Site | API docs | demo link

Constructor

UXC.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>UXC.use( 'Panel' ); </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('');
           $(document).ready( function(_evt){
               tmpPanel = new UXC.Panel( '默认panel', '<h2>test content</h2>' + btnstr, 'test footer');
               tmpPanel.on('close', function(_evt, _panel){
                   UXC.log('user close evnet');
               });
               tmpPanel.show( 0 );
           });
       </script>

Methods

_init

() private

初始化Panel

body

(
  • _html
)
String

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

Parameters:

Returns:

String: body 的HTML内容

center

()

把 Panel 位置设为屏幕居中

close

()

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

dispose

()

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

find

(
  • _selector
)

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

Parameters:

  • _selector Selector

Returns:

selector

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

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
)

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

Parameters:

  • _src Selector

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

Properties

_model

Unknown private

_view

Unknown private

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

Panel click

private

监听Panel的所有点击事件
如果事件源有 eventtype 属性, 则会触发eventtype的事件类型

show

Function

显示Panel时会触发的事件

Example:

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