EasyUi_学习之路_02

最新推荐文章于 2022-05-05 23:11:03 发布
最新推荐文章于 2022-05-05 23:11:03 发布
阅读量1.1k 收藏
点赞数
分类专栏： easyui 个人
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulong547026741/article/details/12835623
版权

panel框架的用法：

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
 <script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>


<title>panel</title>
</head>
<body>
<!--   方式一 -->
  <!--   <div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
    </div> -->
 <!--    方式二 -->
     <div id="p" style="padding:10px;">
    <p>panel content1.</p>
        </div>
    <script type="text/javascript">

    $(function(){
    $('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
    });   
   
    });
    </script>

</body>
</html>

下面是关于panel文档

Properties

NameTypeDescriptionDefault
idstringThe id attribute of this panel.null
titlestringThe title text to display in panel header.null
iconClsstringA CSS class to display a 16x16 icon in panel.null
widthnumberSet the panel width.auto
heightnumberSet the panel height.auto
leftnumberSet the panel left position.null
topnumberSet the panel top position.null
clsstringAdd a CSS class to the panel.null
headerClsstringAdd a CSS class to the panel header.null
bodyClsstringAdd a CSS class to the panel body.null
styleobjectAdd a custom specification style to the panel.

Code example to change the panel border width:

<div class="easyui-panel" style="width:200px;height:100px"
		data-options="style:{borderWidth:2}">
</div>
{}
fitbooleanWhen true to set the panel size fit it's parent container. The example below shows a panel which can be auto resized to max inner dimensions of its parent container 
<div style="width:200px;height:100px;padding:5px">
	<div class="easyui-panel" style="width:200px;height:100px"
			data-options="fit:true,border:false">
		Embedded Panel
	</div>
</div>
false
borderbooleanDefines if to show panel border.true
doSizebooleanIf set to true,the panel will be resize and do layout when created.true
noheaderbooleanIf set to true, the panel header will not be created.false
contentstringThe panel body content.null
collapsiblebooleanDefines if to show collapsible button.false
minimizablebooleanDefines if to show minimizable button.false
maximizablebooleanDefines if to show maximizable button.false
closablebooleanDefines if to show closable button.false
toolsarray,selectorCustom tools, possible values:
1) an array, each element contains iconCls and handler properties.
2) a selector that indicating the tools

The panel tools can be declared with exists <div> tag:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
	<a href="#" class="icon-add" οnclick="javascript:alert('add')"></a>
	<a href="#" class="icon-edit" οnclick="javascript:alert('edit')"></a>
</div>

The panel tools can also be defined via array:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>
[]
collapsedbooleanDefines if the panel is collapsed at initialization.false
minimizedbooleanDefines if the panel is minimized at initialization.false
maximizedbooleanDefines if the panel is maximized at initialization.false
closedbooleanDefines if the panel is closed at initialization.false
hrefstringA URL to load remote data and then display in the panel. Notice that the content will not be loaded until the panel is open and expand. This is useful to create a lazy loading panel: 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href='get_content.php',closed:true">
</div>
<a href="#" οnclick="javascript:$('#pp').panel('open')">Open</a>
null
cachebooleanTrue to cache the panel content that loaded from href.true
loadingMessagestringWhen loading remote data show a message in the panel.Loading…
extractorfunctionDefines how to extract the content from ajax response, return extracted data. 
extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}
 

Events

NameParametersDescription
onLoadnoneFires when remote data is loaded.
onBeforeOpennoneFires before panel is opened, return false to stop the open.
onOpennoneFires after panel is opened.
onBeforeClosenoneFires before panel is closed, return false to cancel the close. The panel declared below cannot be closed. 
<div class="easyui-panel" style="width:300px;height:200px;"
		title="My Panel" data-options="onBeforeClose:function(){return false}">
	The panel cannot be closed.
</div>
onClosenoneFires after panel is closed.
onBeforeDestroynoneFires before panel is destroyed, return false to cancel the destroy.
onDestroynoneFires after panel is destroyed.
onBeforeCollapsenoneFires before panel is collapsed, return false to stop the collapse.
onCollapsenoneFires after panel is collpased.
onBeforeExpandnoneFires before panel is expanded, return false to stop the expand.
onExpandnoneFires after panel is expanded.
onResizewidth, heightFires after panel is resized.
width: the new outer width
height: the new outer height
onMoveleft,topFires after panel is moved.
left: the new left postion
top: the new top position
onMaximizenoneFires after the window has been maximized.
onRestorenoneFires after the window has been restored to its original size.
onMinimizenoneFires after the window has been minimized.

Methods

NameParameterDescription
optionsnoneReturn options property.
panelnoneReturn the outer panel object.
headernoneReturn the panel header object.
bodynoneReturn the panel body object.
setTitletitleSet the title text of header.
openforceOpenWhen forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
closeforceCloseWhen forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
destroyforceDestroyWhen forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
refreshhrefRefresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property.

Code example:

// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resizeoptionsSet panel size and do layout. The options object contains following properties:
width: the new panel width
height: the new panel height
left: the new panel left position
top: the new panel top position

Code example:

$('#pp').panel('resize',{
	width: 600,
	height: 400
});
moveoptionsMove the panel to a new position. The options object contains following properties:
left: the new panel left position
top: the new panel top position
maximizenoneFits the panel winthin its container.
minimizenoneMinimizing the panel.
restorenoneRestores the maximized panel back to its original size and position.
collapseanimateCollapses the panel body.
expandanimateExpand the panel body.

liulong547026741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui_stepbnd_easyui_源码
09-30
easyui 模板，简洁快捷，更加方便全栈开发偏后端人员进行前后端交互
EasyUi_学习之路_03
心存高远，脚踏实地
10-17 735
这是一个用户登录的界面     pageEncoding="utf-8"%>   用户登录               $(function () {              //初始化              initTable();          });           function initTable()
Net学习日记_EasyUI_Jquery
weixin_30871701的博客
12-21 52
Jquery EasyUI 入门 内容组件 easyui事件与方法的使用 布局layout 窗口，对话框，提示框 $.messager.show({ title: "消息", msg: ...
EasyUI 学习笔记
今天的风儿甚是喧嚣
01-30 449
文章目录一、EasyUI 简介1. 概念2. 特点3. 使用目录介绍二、EasyUI 使用步骤1.步骤2.步骤3.三、面板使用(panel)1. 创建面板2. 面板属性3. 创建按钮4. 信息提示5. 示例 一、EasyUI 简介 1. 概念 EasyUI ：（简单用户界面）简单的界面设计框架，作用主要是用来设计网站的后台管理系统，帮助程序员快速的构建网站界面。 2. 特点 基于 jQuery 的...
Easyui02
weixin_63692854的博客
05-05 180
这是学习Easyui的第二天，使用tree控件&tabs控件&图标iconCls:'icon-mini-refresh' 在之前的基础上完善了后台管理界面。。。。。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="common/head.jsp"%> <!DOCTYPE ht...
jQuery_EasyUI_jc.rar_JQ_easyui_jquery_jquery easyui
09-24
jquery easyui 教程 学习 jq easyui 的好东东
SSM_EASYUI_DEMO
07-23
SSM_EASYUI_DEMO,包含mysql的表创建及数据脚本
jQuery_EasyUI中文帮助手册_jqueryeasyui_easyui_
10-03
jQuery_EasyUI中文帮助手册。帮助大家学习jQuery_EasyUI
jquery-easyui.rar_jquery easyui _jquery对话框
09-24
jQuery EasyUI为网页开发提供了一堆的常用UI组件，包括菜单、对话框、布局、窗帘、表格、表单等等逐渐。
严重: Exception sending context initialized event to listener instance of class org.springframework.we
心存高远，脚踏实地
08-14 4063
问题： 严重: Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener org.springframework.beans.factory.BeanDefinitionStoreException
JFreeChat实例
心存高远，脚踏实地
10-23 1141
public static JFreeChart createCategoryChart(String name,String category,String value,CategoryDataset categoryDataset,PlotOrientation po,boolean legend,boolean tooltip,boolean url){ JFreeChart char
struts2+spring+hibernate整合写的项目怎么实现分页功能
心存高远，脚踏实地
08-19 1083
当使用hibernate的时候，实现分页的功能似乎不是那么的麻烦了，用到两个方法： setFirstResult(firstResult) 第一个方法是设定从第几条开始，注意，加入你想从第一条开始，那么firstResult则为0 setMaxResults(maxResult)这个方法则是设定你要取多少条数据，五条的话，那么就是5 下面提供数据库查询类dao中的使用方法 public L
EasyUi_学习之路_06
心存高远，脚踏实地
10-18 782
datagrid框架的基本使用 下面是示例     pageEncoding="utf-8"%>   datagrid                                               background: #eee; overflow: hidden;">    
EasyUi_学习之路_04
心存高远，脚踏实地
10-18 748
完成注册模块和验证模块以及，form表单     pageEncoding="utf-8"%> http://www.w3.org/TR/html4/loose.dtd">   用户登录               $(function () {            //初始化登陆层              initLogin();
JFreeChat_00
心存高远，脚踏实地
10-23 736
JFreeChart开发前准备 开发前的准备，JfreeChart开发环境的搭建分为两步：导入JFreeChart组件包；配置JFreeChart。    1、导入JFreeChart包：导入在lib目录下的jfreechart-1.0.13.jar、jcommon-1.0.16.jar两个Jar包到工程。    2、配置JFreeChart： JFreeChart组件能够成.JPEG、
EasyUi_学习之路_05
心存高远，脚踏实地
10-18 728
今天学习layout Layout 选项 名称 类型 描述 默认 fit boolean Set to true to set the layout size fit its parent container.When creating layout on 'body' tag, it will be auto maximized to th
JFreeChat_01
心存高远，脚踏实地
10-22 726
今天学习一下JFreeChat 准备工作下载包 JFreeChart主页：http://www.jfree.org/jfreechart/index.html JFreeChart下载页面：http://sourceforge.net/projects/jfreechart/ 然后写个简单的测试类 package com.ll.JFreeChat.Demo1; import j
my fault
心存高远，脚踏实地
03-26 714
错误一：方法中用到数据库连接的，切忌再次调用同时需要查询数据库的方法 今天做个分页功能，结果在计算pageCount的时候调用了getPageSize(),结果总是rs.next()出现异常，查了很多次。终于发现，调用getPageSize()过后，这个函数就会调用关闭数据库连接，所以再跳转到pageCount中运行时，只要涉及到数据库必然报错，因为数据库的连接在调用上面的函数时已经关闭了
easyui 获取options_jQuery EasyUI 下拉框及值的获取
最新发布
06-06
获取下拉框选中的值可以使用以下代码： ```javascript // 获取下拉框的值 var value = $('#combobox').combobox('getValue'); // 获取下拉框的文本 var text = $('#combobox').combobox('getText');...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值