jQuery EasyUI Panel面板组件使用详解
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" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />
<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, //是否显示可折叠按钮 默认为false
minimizable : true, //是否显示最小化按钮 默认false
maximizable : true, //是否显示最大化按钮 默认false
closable : true, //是否定义关闭按钮 默认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 EasyUI Panel面板组件
相关推荐
-
宝塔Linux面板 2.8.9稳定版介绍
暂时只对 CentOS 5.x / 6.x / 7.x 提供支持: 包含软件: Nginx-Tengine-2.2.0 Nginx1.8 - 1.10 Apache2.4.20 PHP5.2 - 7.1(安装时可选,支持多版本共存,除php7.0,php7.1都已包含zendloader) MySQL5.5 - 5.7(安装时可选) Pure-Ftpd phpMyadmin WEB在线面板 系统要求: 内存:128M以上,推荐512M以上 磁盘:至少4GB可用磁盘空间 其它:确保是干净的操作系统
-
Java常用面板之JScrollPane滚动面板实例详解
在设置界面时,可能会遇到一个较小的容器窗体中显示一个较大部分的内容的情况,这时候可以使用 JScrollPane 面板. JScrollPane 面板是带滚动条的面板,它也是一种容器,但是 JScrollPane 只能放置一个组件,并不可以使用布局管理器.如果需要在 JScrollPane 面板上放置多个组件,需要将多个组件放置在 JPanel 上,然后将 JPanel 面板作为一个整体组件添加在 JScrollPane 组件上.这点大家一定要注意!下面我们通过一个实例来了解下它的使用方法和技巧
-
Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程
Ajenti是国外一个功能非常强大的轻型的Linux服务器管理面板,采用Python架构,修改扩展非常简单,包含了Apache.计划任务(Cron).文件系统.防火墙.MySQL.Nginx.Munin.Samba.FTP和Squid等多个实用插件,比较适合搭建小型的服务器管理环境. Ajenti V是Ajenti一个虚拟主机管理面板插件,有点类似于Webmin下的Virtualmin,Ajenti V可以用于创建和管理虚拟主机,方便建站,管理网站运维.Ajenti可以添加Widget,方便你快
-
jQuery EasyUI Accordion可伸缩面板组件使用详解
Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=
-
宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站
Linux免费开源,建站基本上都是选择Linux系统,而且Linux VPS比Windows VPS要便宜不少,成本大大降低,除非程序有特殊需要,否则还是建议大家使用Linux来当作网站服务器.不过,选择Linux有一个不好的地方就是操作麻烦些. 如果是Linux新手的话,在最开始建站时可以试试使用Linux VPS主机控制面板,只要在你的VPS主机上安装一个主机管理面板,这样你就可以像使用虚拟主机那样去绑定域名和管理MysqL数据库了,而且VPS主机允许你最大化地调整服务器配置参数,折腾过程也
-
jquery滚动条插件jScrollPane的使用介绍
这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js
-
新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板
WDCP也算是国产中颇受大家欢迎的VPS主机面板了,提供了nginx.apache.mysql.php等Web建站环境一键搭建.印象中,国内VPS主机面板也就是WDCP还在坚持着,AMH已经走上了收费的道路(PS:免费版本长年不更新,各种问题和不兼容). 而WDCP实际上也有长达几年的时间没有更新了,mysql.php版本都停留好早以前的版本,新出来的一直都没有更新, 已经不能满足于现在的Wordpress建站需要了,这也是部落为什么要扔掉VPS面板!网站平滑迁移到LNMP或LAMP建站. 好在
-
jQuery EasyUI Panel面板组件使用详解
panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr
-
jquery easyui validatebox remote的使用详解
validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options
-
jquery.picsign图片标注组件实例详解
经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多 因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle
-
jQuery EasyUI之DataGrid使用实例详解
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them
-
Jquery Easyui搜索框组件SearchBox使用详解（19）
本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b
-
Jquery Easyui进度条组件Progress使用详解（8）
本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">
-
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方
-
vue实现简单表格组件实例详解
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩
-
jQuery EasyUI 折叠面板accordion的使用实例(分享)
1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属性 fit 为 true,自适应父容器大小 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>easyui-折叠面板accordion的使用