JQuery EasyUI window 用法

JQuery EasyUI window 用法JQuery代码 var$win;$win=$(‘#test-window’).window({title:’添加课程设置信息’,width:820,height:450,top:($(window).height()-820)*0.5,left:($(window).width()-450)*0.5,…

大家好,又见面了,我是你们的朋友全栈君。

JQuery代码

 

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>
        欢迎访问zzzzzzzzzzzz
    </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类来显示在面板中的16×16图标 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: 新面板的顶部位置

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161190.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 虹软人脸识别的闸机开发经验及源码分享[通俗易懂]

    虹软人脸识别的闸机开发经验及源码分享[通俗易懂]虹软人脸识别的闸机开发经验及源码分享

  • 在pycharm中配置Anaconda的python工具包_pycharm配置远程解释器

    在pycharm中配置Anaconda的python工具包_pycharm配置远程解释器PyCharm导入Anaconda,进行环境搭建与配置设置;或PyCharm导入Python3.x,进行环境搭建与配置设置。PyCharm配置Anaconda3.0解释器方法如下:本人使用的是Anaconda3+PyCharm,因此是将Anaconda3导进PyCharm,将两者进行配置,搭建环境,进行相关设置。如果你使用的是Python+PyCharm,相关操作类似。首先,新建一个项目文件…

  • 使用Fastjson生成Json字符串少字段属性(数据丢失)「建议收藏」

    在开发中经常要使用到fastJson来转换对象为json 串,但是最近发现在一个对象转换的时候,总是丢失了一个字段的值,(数据丢失).就很纳闷。到网上找了很多方法总是不行,最后总算是在一篇博文中看到问题的关键!现在整理如下,希望可以帮助到更多的人。package per.eblink.pojo; public class Node { private String id

  • adventureworksdw2012_示例数据库怎么导入

    adventureworksdw2012_示例数据库怎么导入1、http://sqlserversamples.codeplex.com/通过网站下载示例数据库,http://msftdbprodsamples.codeplex.com/releases/view/55926 为下载地址2、其中安装AdventureWorks2008R2(oltp)的时候,需要开启sqlserver的filestream功能。点击计算机-管理-右

  • 【GPU精粹与Shader编程】(三) 《GPU Gems 1》全书核心内容提炼总结 · 下篇

    【GPU精粹与Shader编程】(三) 《GPU Gems 1》全书核心内容提炼总结 · 下篇 本文由@浅墨_毛星云 出品,首发于知乎专栏,转载请注明出处   文章链接: https://zhuanlan.zhihu.com/p/36499291题图背景来自《神秘海域4》。系列文章前言《GPUGems》1~3、《GPUPro》1~7以及《GPUZen》组成的饕餮盛宴,共11本书,合称“GPU精粹三部曲“,是游戏开发、计算机图形学和渲染领域的业界顶尖大牛们一线经验的合辑汇编…

  • C++ 23种设计模式(6)-适配器模式

    C++ 23种设计模式(6)-适配器模式适配器模式将一个类的接口转换成客户希望的另外一个接口,使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。它包括类适配器和对象适配器,本文针对的是对象适配器。举个例子,在STL中就用到了适配器模式。STL实现了一种数据结构,称为双端队列(deque),支持前后两段的插入与删除。STL实现栈和队列时,没有从头开始定义它们,而是直接使用双端队列实现的。这里双端队列就扮演了适配器的角色。队列用到了它的后端插入,前端删除。而栈用到了它的后端插入,后端删除。假设栈和队列都是一种顺序容器,有两种操作:压入和弹出。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号