`
ljl_xyf
  • 浏览: 639626 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery easyui window 打开后移动位置在打开后不居中问题解决

阅读更多

打开后移动位置在打开后不居中问题解决方法就很简单了,我们在打开时设置下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.my400800.cn

 

         </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…

事件

名字参数描述
onLoad none 当远程数据加载时触发
onBeforeOpen none 当面板打开之前触发
onOpen none 当面板打开之后触发
onBeforeClose none 当面板关闭之前触发
onClose none 当面板关闭之后触发
onBeforeDestroy none 当面板销毁之前触发
onDestroy none 当面板关闭之后触发
onBeforeCollpase none 当面板折叠之前触发
onCollapse none 当面板折叠之后触发
onBeforeExpand none 当面板展开之前触发
onExpand none 当面板展开之后触发
onResize width, height 当面板调整大小之后触发
width: 新的宽度
height: 新的高度
onMove left,top 当面板移动之后触发
left: 新的左侧位置
top: 新的顶部位置
onMaximize none 当窗口最大化的时候被触发
onRestore none 当窗口恢复到原来的大小时被触发
onMinimize none 当窗口最小化的时候被触发

方法

名字参数描述
options none 返回设置的属性值
panel none 返回面板对象
header none 返回面板头部对象
body none 返回面板主体对象
setTitle title 设置面板头部标题
open forceOpen 当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close forceClose 当forceClose设置为true,面板被关闭的时候忽略onBeforeClose 回调函数
destroy forceDestroy 当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh none 当设置了href值时,刷新面板来加载远程数据
resize options 设置面板的大小和布局,这些选项包含以下的属性:
width: 新面板的宽度
height: 新面板的高度
left: 新面板的左侧位置
top: 新面板的顶部位置
move options 移动面板到一个新的位置,这些选项包含以下属性:
left: 新面板的左侧位置
top: 新面板的顶部位置
分享到:
评论

相关推荐

    jquery easyui滚动条部分设置介绍

    在jQuery EasyUI框架中,创建的对话框(dialog)通常会自动居中显示在屏幕上,但这仅限于页面没有出现滚动条的情况。一旦页面内容超出视口,出现滚动条,dialog就会保持在原始的居中位置,导致用户需要手动滚动页面...

    jQuery前端框架easyui使用Dialog时bug处理

    通过监听window对象的scroll事件,当页面滚动时,自动调整Dialog的位置,确保Dialog在页面内容滚动后仍然位于可视区域的中心位置。具体实现方式是利用jQuery的dialog方法,并调用move方法来动态调整位置,这样Dialog...

    Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    在Jquery EasyUI中,实现弹出确认对话框和加载效果是前端开发中常见的交互需求,本文将详细介绍如何通过Jquery EasyUI实现这两种效果的示例代码。 首先,我们来探讨如何在Jquery EasyUI中弹出一个确认对话框。在Web...

    jquery_easyui_cn 中文例子 和详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列组件,帮助开发者快速构建用户界面。这个框架使用简单,功能丰富,适用于开发Web应用程序。以下是对标题和描述中提及的几个主要组件的详细解释: 1. **...

    火狐下easyui1.3.*弹出window框无法定位到中间问题解决

    "火狐下easyui1.3.*弹出window框无法定位到中间问题解决"这个标题揭示了一个特定的技术难题,即使用EasyUI框架在Firefox浏览器下创建的弹窗窗口未能正确地居中显示,而在Internet Explorer和Chrome浏览器中却表现...

Global site tag (gtag.js) - Google Analytics