`
ljl_xyf
  • 浏览: 634594 次
  • 性别: 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 datagrid demo

    解压后,我们可以将这些文件引入到项目中,从而在网页中使用 jQuery EasyUI 的所有功能。同时,这个压缩包可能还包含了示例页面,帮助我们直观地了解如何在实际项目中集成和使用这些组件。 `jquery_easyui_manual_...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    jQuery EasyUI的api

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了HTML用户界面的开发,提供了一系列易于使用的组件,如对话框、表格、...在实际开发中,不断查阅API文档和实践操作,将有助于加深对EasyUI的理解并提高开发效率。

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    Jquery easyUI api 下载

    在开发过程中,遇到具体问题时,查阅这份文档可以快速找到解决方案。 总之,jQuery EasyUI 是一个强大且易于使用的前端框架,其组件丰富,API 设计合理。通过深入学习和掌握 API,开发者可以构建出高效、美观的 Web...

    jQuery easyui 全套文件

    这个压缩包包含的是 jQuery EasyUI 的全套文件,包括 jQuery 库本身以及一系列的示例(demo),解压后可以直接在项目中使用。 jQuery 是一个轻量级的 JavaScript 库,它简化了 JavaScript 的 DOM 操作、事件处理、...

    Jqueryeasyui使用说明

    资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...

    jQuery EasyUI 1.9.4 chm文档

    针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。

    jQuery EasyUI 参考资源合集

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列的 UI 组件,如对话框、表格、下拉菜单、树形结构等。这个参考资源合集包含了三个重要的文档,分别为 jQuery EasyUI 1.2 API...

    jqueryeasyui.chm

    jqueryeasyui

    jQuery EasyUI中文手册

    《jQuery EasyUI中文手册》是针对JavaScript库jQuery EasyUI的一款详尽指南,旨在帮助开发者更好地理解和运用这个强大的前端框架。jQuery EasyUI基于jQuery,提供了一系列轻量级、易用的UI组件,使得开发者能够快速...

    jQuery EasyUI v1.10.0.zip

    5. **jquery.easyui.mobile.js**:这个文件针对移动设备进行了优化,提供了一套适应手机和平板的UI组件,使得在移动平台上开发Web应用变得更加便捷。 6. **changelog.txt**:变更日志文件,记录了v1.10.0版本相对于...

    jQuery EasyUI v1.3.5官方API中文版

    jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...

    Jquery EasyUI 日历Demo

    JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的 UI 组件,如对话框...无论是在表单中选择特定日期,还是在其他场景下需要日期选择功能,JQuery EasyUI 的日历组件都是一个高效且实用的解决方案。

    jquery easyui制作电脑桌面图标打开效果代码

    在“jquery easyui制作电脑桌面图标打开效果代码”这个主题中,我们主要探讨如何利用 jQuery EasyUI 实现类似电脑桌面图标被点击后弹出窗口或新页面的效果。 首先,我们需要了解 jQuery EasyUI 的基本结构和组件。...

    jQuery EasyUI 1.5.1 版 API 中文版

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。版本 1.5.1 是一个重要的更新,它不仅包含了之前版本的所有功能,还进行了...

    ssm+jqueryeasyui案例

    在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。首先,我们需要在项目中引入SSM框架的相关依赖,包括Spring的核心库、SpringMVC的Servlet容器配置以及MyBatis的数据库...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

Global site tag (gtag.js) - Google Analytics