//创建窗体 var box=$pagebox.create({ width: 400, height: 300, right:10, top:10, url: 'pagebox-child.html', title: '可移动,可缩放;双击标题栏全屏' }); box.open();属性:
大部分属性支持双向绑定,可以直接设置属性改变窗体。
下表中,“可监听”的属性,可以通过watch()增加监听方法,类似Vue;“双向绑定”的意思是属性更改后,直接影响窗体样式。
属性 | 说明 | 可监听 | 双向绑定 |
---|---|---|---|
title | 窗体的标题栏文字 | √ | √ |
url | 窗体中的内容页网址 | √ | √ |
width,height | 宽高 | √ | √ |
top,left | 窗体上和左的位置 | √ | √ |
right,bottom | 窗体右和下的位置 | √ | √ |
ico | 窗体左上角图标 | √ | |
full | 设置窗体最大化 | √ | √ |
mini | 设置窗体最小化,注意它与min的区别 | √ | √ |
resize | 是否允许缩放窗体 | √ | √ |
move | 是否允许移动窗体 | √ | √ |
max | 是否允许窗体最大化 | √ | √ |
min | 是否允许窗体最小化 | √ | √ |
是否允许打印窗体内的内容 | √ | √ | |
close | 是否显示关闭按钮 | √ | √ |
dom | 窗体的dom对象 | ||
parent | 父窗体对象 | ||
childs | 下级窗体对象列表 |
下表只列出了常用方法,更多请参看源码。
方法 | 说明 | 参数 |
---|---|---|
open() | 打开窗体,触发onshown事件 | 无 |
watch() | 增加自定义属性监听 | //obj:pagebox对象,val:传入的值,old:原值 例如:box.watch({ 'title':function(obj,val,old){ console.log('通过外部监听,新的title:'+val); } }); |
focus() | 当前窗体获取焦点,最前面显示 | |
shut() | 关闭当前窗体 | |
toFull() | 窗体最大化,建议直接box.full=true;将自动触发这个方法; | |
toWindow() | 窗体还原,建议直接box.full=false或box.mini=false | |
document() | iframe中的文档对象 | |
getChilds() | 所有子级窗体,包括下级的下级 | |
bind() | 绑定事件 | bind(事件名,方法) 事件名仅限 'shown', 'shut', 'load', 'fail', 'click', 'drag', 'focus', 'blur', 'min', 'full', 'restore', 'resize' |
unbind() | 去除事件绑定 | unbind(事件名,[方法]) 如果指定了方法,则删除某类事件的指定方法;否则将删除该类所有事件 |
trigger() | 触发事件 | trigger(事件名,[消息]) |
events() | 事件列表 | events([事件名]) 如果不指定事件名,将返回所有事件列表 |
事件支持多播,即同一个事件可以添加多个方法。事件返回值仅限bool型,虽然可以返回其它类型或不返回,但最终都会转为bool型返回值。
当同一个事件中的多个方法,任一个返回false,则不再继续执行后续事件方法。如果不返回,默认是true。
var box=$pagebox.create(); //关闭事件 box.onshut(function(s,e){ return confirm('是否确定关闭?'); }).onshut(function(s,e){ return confirm('再次确认关闭?'); }); box.open();
事件 | 说明 | 参数sender | 参数e |
---|---|---|---|
shown | 打开 | 当前pagebox对象 | e.event:事件名称 e.action:动作,默认与e.event同值 e.target:响应事件的html元素,此处为窗体的html |
shut | 关闭 | 同上 | 同上 |
load | 加载完成,不管是否失败 | e.target:窗体iframe中的文档对象(document) e.url:窗体iframe中的页面路径,即src的值 |
|
fail | 加载失败 | 同上 | |
click | 点击 | 与onshown相同 | |
drag | 拖动位置 | e.target:窗体标题栏 e.mouse:鼠标当前坐标,{x,y} e.move:移动的偏移量(相较于拖动之前),{x,y} e.offset:当前窗体的位置,{left,top} |
|
focus | 获取焦点 | 与onshown相同 | |
blur | 失去焦点 | 与onshown相同 | |
mini | 最小化 | 与onshown相同 | |
full | 最大化 | 与onshown相同 | |
restore | 还原 | e.action:如果是全屏还原,为from-full; 最小化还原为from-min | |
resize | 缩放窗体大小 | e.mouse:鼠标当前坐标,{x,y} e.move:移动的偏移量(相较于拖动之前),{x,y} e.offset:当前窗体的位置,{left,top} e.width:缩放宽度 e.height:缩放高度 e.target:缩放控件 e.action:缩放的方向 |