分享

jquery easyUI window組件詳解

 用勿龍潛 2014-04-19

打开后移动位置在再打开后不居中问题解决方法很简单了,我们在打开时设置下left和top属性就可以了

var $win;
    $win = $('#test-window').window({
            title:'添加课程设置信息',
            width: 820,
            height: 450,
            top:($(window).height() - 820) * 0.5,   
            left:($(window).width() - 450) * 0.5, 
            shadow: true,
            modal:true,
            iconCls:'icon-add',
      closed:true,
      minimizable:false,
      maximizable:false,
      collapsible:false
         });
    
    $win.window('open');

HTML代码

    <div id="test-window" class="easyui-window" title="Login" style="width:300px;height:180px;">  
        
            <div>

      欢迎访问http://www.

 

         </div>


            <div style="padding:5px;text-align:center;">  
                <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>  
                <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>  
            </div>  
        
    </div> 

属性及方法说明

Window需要依存于以下的三个组件:
* 可拖放(Draggable)
* 调整大小(Resizable)
* 面板(panel)

下面来介绍Window的具体用法,首先来看属性 大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:

属性名类型描述默认值
zIndex数字窗口的 z-index 属性,可以通过这个属性来增加9000
draggable布尔定义窗口是否可被拖动true
resizable布尔定义窗口是否可以被改变大小true
shadow布尔如果设置为true,窗口的阴影也将显示。true
modal布尔定义窗口是否是一个模式窗口。true

Window也重写了Panel里的一些属性

属性名类型描述默认值
title字符串窗口的标题文本New Window
collapsible布尔定义是否显示可折叠定义按钮true
minimizable布尔定义是否显示最小化按钮true
maximizable布尔定义是否显示最大化按钮true
closable布尔定义是否显示关闭按钮true

事件

属性

名字类型描述默认值
title字符串在面板头部显示的标题文本null
iconCls字符串一个CSS类来显示在面板中的16x16图标null
width数字设置面板的宽度auto
height数字设置面板的高度auto
left数字设置面板左侧位置null
top数字设置面板的顶部位置null
cls字符串给面板添加一个CSS类null
headerCls字符串给面板头部添加一个CSS类null
bodyCls字符串给面板主体添加一个CSS类null
style对象给面板自定义样式{}
fit布尔当设置为true,面板尺寸将适合它的父容器。false
border布尔定义面板的边框true
doSize布尔当设置为true,面板载创建的时候将被调整和重新布局true
collapsible布尔定义是否显示可折叠定义按钮false
minimizable布尔定义是否显示最小化按钮false
maximizable布尔定义是否显示最大化按钮false
closable布尔定义是否显示关闭按钮false
tools数组自定义工具,每个工具可以包含两个属性:iconCls and handler[]
collapsed布尔定义在初始化的时候折叠面板false
minimized布尔定义在初始化的时候最小化面板false
maximized布尔定义在初始化的时候最大化面板false
closed布尔定义在初始化的时候关闭面板false
href字符串一个远程的URL加载数据,然后显示在面板中null
loadingMessage字符串当加载远程数据时,在面板中显示的信息Loading…

事件

名字参数描述
onLoadnone当远程数据加载时触发
onBeforeOpennone当面板打开之前触发
onOpennone当面板打开之后触发
onBeforeClosenone当面板关闭之前触发
onClosenone当面板关闭之后触发
onBeforeDestroynone当面板销毁之前触发
onDestroynone当面板关闭之后触发
onBeforeCollpasenone当面板折叠之前触发
onCollapsenone当面板折叠之后触发
onBeforeExpandnone当面板展开之前触发
onExpandnone当面板展开之后触发
onResizewidth, height当面板调整大小之后触发
width: 新的宽度
height: 新的高度
onMoveleft,top当面板移动之后触发
left: 新的左侧位置
top: 新的顶部位置
onMaximizenone当窗口最大化的时候被触发
onRestorenone当窗口恢复到原来的大小时被触发
onMinimizenone当窗口最小化的时候被触发

方法

名字参数描述
optionsnone返回设置的属性值
panelnone返回面板对象
headernone返回面板头部对象
bodynone返回面板主体对象
setTitletitle设置面板头部标题
openforceOpen当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
closeforceClose当forceClose设置为true,面板被关闭的时候忽略onBeforeClose 回调函数
destroyforceDestroy当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refreshnone当设置了href值时,刷新面板来加载远程数据
resizeoptions设置面板的大小和布局,这些选项包含以下的属性:
width: 新面板的宽度
height: 新面板的高度
left: 新面板的左侧位置
top: 新面板的顶部位置
moveoptions移动面板到一个新的位置,这些选项包含以下属性:
left: 新面板的左侧位置
top: 新面板的顶部位置

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多