panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。
后面有一些组件要依赖于这个组件。
另一点跟前面不同的就是面板内容能够请求远程数据。
演示样例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
//属性列表
$('#box').panel({
id : 'box', //面板的ID值 默觉得null
title : '我是一个面板', //面板显示的标题文本，默觉得null
width : 500, //面板宽度 默觉得auto
height : 150, //面板高度 默觉得auto
iconCls : 'icon-add', //面板左上角的一个图标,可去css样式中自己定义图标文件，默觉得null
//left : 100, //设置面板距离左边的距离 默觉得null
//top : 100, //设置面板距离上边的距离 默觉得null
cls : 'a', //加入一个CSS 类ID 到面板。默觉得null。
headerCls : 'b', //參数为css类 定义面板头部样式 默认null
bodyCls : 'c', //參数为css类 定义面板正文样式 默认null
//面板样式
style : {
'min-height' : '200px',
},
//fit : true, //默觉得false，含义是面板大小是否自适应父容器
//border : false, //默觉得true 定义是否显示面板边框
//doSize : false,
//noheader : true, //默觉得false，当设置为true，在创建面板的时候不会创建标题
content : '<strong>面板主体内容</strong>', //面板主体内容 默觉得null
collapsible : true, //是否显示可折叠button 默觉得false
minimizable : true, //是否显示最小化button 默认false
maximizable : true, //是否显示最大化button 默认false
closable : true, //是否定义关闭button 默认false
tools : '#tt', //定义工具菜单，有两种方式，一种是以下那个数组方式，还有一种指向定义好的菜单
/*
tools : [{
iconCls : 'icon-help', //图标
handler : function () { //点击触发函数
alert('help');
},
},{
}],
*/
//collapsed : true, //是否在初始化的时候折叠面板
//minimized : true, //是否在初始化的时候最小化面板
//maximized : true, //是否在初始化的时候最大化面板
//closed : true, //是否在初始化的时候关闭面板，这个属性什么时候能用到？
//href : 'haicheng_demo/panel', //远程请求数据（ajax请求，不能跨域）
//loadingMessage : '正在努力载入中...', //正在载入远程数据的时候，在面板内显示的信息,默认loading...
//cache:false, //假设为true，在超链接载入时缓存面板内容。默觉得true。
/**
*对ajax远程请求回来的数据进行处理，然后return到面板上
*
extractor : function (data) {
return data+"</br>--2014.08.18";
}
*/ //触发事件列表：
/*
onBeforeLoad : function () {
alert('远程载入之前触发！');
return false; //取消远程载入
},
onLoad : function () {
alert('远程载入之后触发！');
}, onBeforeOpen : function () {
alert('打开之前触发！');
return false; //取消打开
},
onOpen : function () {
alert('打开之后触发！');
}, onBeforeClose : function () {
alert('关闭之前触发！');
return false; //取消关闭
},
onClose : function () {
alert('关闭之后触发！');
}, onBeforeDestroy : function () {
alert('销毁之前触发！');
//return false; //取消销毁
},
onDestroy : function () {
alert('销毁之后触发！');
}, onBeforeCollapse : function () {
alert('折叠之前触发！');
//return false; //取消折叠
},
onCollapse : function () {
alert('折叠之后触发！');
}, onBeforeExpand : function () {
alert('展开之前触发！');
//return false; //取消展开
},
onExpand : function () {
alert('展开之后触发！');
}, onMaximize : function () {
alert('窗体最大化时触发！');
},
onRestore : function () {
alert('窗体还原时触发！');
}, onMinimize : function () {
alert('窗体最小化时触发！');
}, onResize : function (width, height) {
alert(width + '|' + height);
}, onMove : function (left, top) {
alert(left + '|' + top);
}
*/
//onBeforeOpen : function () {
// alert('打开之前触发！');
//return false; //取消打开
//}, }); //方法列表
//$('#box').panel('panel').css('position', 'absolute');
//$('#box').panel('destroy');
/*
$(document).click(function () {
$('#box').panel('resize', {
'width' : 600,
'height' : 300,
});
}); $(document).click(function () {
$('#box').panel('move', {
'left' : 600,
'top' : 300,
});
});
*/ //console.log($('#box').panel('options'));
//console.log($('#box').panel('panel'));
//console.log($('#box').panel('header'));
//console.log($('#box').panel('body'));
//$('#box').panel('setTitle', '标题');
//$('#box').panel('open', true);
//$('#box').panel('close');
//$('#box').panel('destroy');
//$('#box').panel('maximize');
//$('#box').panel('restore');
//$('#box').panel('minimize');
//$('#box').panel('collapse');
//$('#box').panel('expand');
}); </script>
</head>
<body>
<!--
<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;">
<p>内容区域</p>
</div>
-->
<div id="box">
<p>内容区域</p>
</div> <div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"> </a>
<a class="icon-edit" onclick="javascript:alert('edit')"> </a>
<a class="icon-cut" onclick="javascript:alert('cut')"> </a>
</div> </body>
</html>
其它地方不说了，就说一下那个href属性，我在实际学习的时候是基于一个SpringMVC框架写的样例。
后台代码：
@RequestMapping(value = "panel")
public ModelAndView panel(String _){
<span style="white-space:pre"> </span>System.out.println("****************进入后台*******************"+_);
<span style="white-space:pre"> </span>ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp");
<span style="white-space:pre"> </span>mv.addObject("data", "Hello Hirain!!!");
<span style="white-space:pre"> </span>return mv;
}
为什么我的后台方法多了个參数String _呢？是由于我看到它实际请求的时候在url后面自己主动拼上了一个參数_，后台不接收这个參数也一样。
panelData.jsp内代码就仅仅有${data}
jQuery Easy UI Panel(面板)组件的更多相关文章
-
第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
-
jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
-
jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
-
jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
-
7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
-
jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够*的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
-
jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
-
JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
-
JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
随机推荐
-
新手程序员随笔2——初识html、css和javascript
翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...
-
java 字符串类型String
在本质上,字符串实际上一个char类型的数组,由java.lang.String类来表示,该类具有一系列的属性和方法,提供对字符串的一些操作.除此之外,java还提供了StringBuffer类来处理 ...
-
ASPxTreeList控件去根节点的新增修改操作（写在onCommandColumnButtonInitialize()事件中）
treelist去掉根节点按钮效果图: //去掉父节点及子节点旁的新增.修改.删除操作(写在onCommandColumnButtonInitialize事件中) protected void Tre ...
-
Linux计算机进程地址空间与内核装载ELF
本文基于Linux™系统对进程创建与加载进行分析,文中实现了Linux库函数fork.exec,剖析内核态执行过程,并进一步展示进程创建过程中进程控制块字段变化信息及ELF文件加载过程. 一.初识Li ...
-
IE8，IE9，IE10绿色版，以及ColorPix
对于开发者而言IETest是一坨屎. 但是我们终于迎来的蛋糕和火腿,今天无意间发现了竟然有绿色版的浏览器版本,IE9,IE10已经下到本地,IE8网传是有的,但是没有找到合适的版本.但是足够了,本机使 ...
-
linux中fork（）函数详解（转）
转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...
-
C语言－while循环
循环是结构化程序设计的基本结构之一,它和顺序控制.选择结构共同作为各种复杂程序的基本构造单元(摘自谭浩强的<C程序设计>. 一.while循环: 1.使用while循环控制输出0到9十个数 ...
-
loj#6073. 「2017 山东一轮集训 Day5」距离(树链剖分 主席树)
题意 题目链接 Sol 首先对询问差分一下,我们就只需要统计\(u, v, lca(u, v), fa[lca(u, v)]\)到根的路径的贡献. 再把每个点与\(k\)的lca的距离差分一下,则只需 ...
-
清北学堂学习总结day3
小学知识总结 上午篇 •积性函数的卷积公式 (1)(f * g)( n ) = ∑(d|n) f( d ) x g ( n / d ) (2)代码实现 LL f[N], g[N], h[N]; voi ...
-
Temporal Segment Networks
摘要 解决问题 用CNN框架有效提取video长时序特征 在UCF101等训练集受限的情况下训练网络 贡献 TSN网络,基于长时间时序结构模型.稀疏时序采样策略,视频层监督有效学习整个视频. HMDB ...