UXC.Panel Class
Constructor
UXC.Panel
-
_selector
-
_headers
-
_bodys
-
_footers
Parameters:
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>
Item Index
Methods
Methods
_init
()
private
初始化Panel
body
-
_html
获取或者设置 Panel body 的HTML内容
Parameters:
-
_html
String
Returns:
center
()
把 Panel 位置设为屏幕居中
close
()
关闭 Panel
关闭 Panel 是直接从 DOM 中删除 Panel
dispose
()
从DOM清除Panel
close 方法清除 Panel可以被用户阻止, 该方法不会被用户阻止
find
-
_selector
从 Panel 选择器中查找内容
添加这个方法是为了方便jquery 使用者的习惯
Parameters:
-
_selector
Selector
Returns:
getInstance
-
_selector
从 selector 获取 Panel 的实例
如果从DOM初始化, 不进行判断的话, 会重复初始化多次
Parameters:
-
_selector
Selector
Returns:
header
-
_html
获取或者设置 Panel Header 的HTML内容
如果 Panel默认没有 Header的话, 使用该方法 _html 非空可动态创建一个Header
Parameters:
-
_html
String
Returns:
hide
()
隐藏 Panel
隐藏 Panel 设置 css display:none, 不会从DOM 删除 Panel
layout
()
Selector
返回 Panel 的 jquery dom选择器对象
Returns:
on
-
_evtName
-
_cb
为Panel绑定事件
内置事件类型有 show, hide, close, center, confirm, cancel
, beforeshow, beforehide, beforeclose, beforecenter
用户可通过 HTML eventtype 属性自定义事件类型
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>
positionWith
-
_src
设置Panel的显示位置基于 _src 的左右上下
Parameters:
-
_src
Selector
selector
()
Selector
返回 Panel 的 jquery dom选择器对象
这个方法以后将会清除, 请使用 layout 方法
Returns:
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 });