jQuery EasyUI Panel面板组件使用详解
程序员文章站
2023-11-12 20:51:22
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面板组件使用详解
-
jQuery开源组件BootstrapValidator使用详解
-
jQuery EasyUI 组件加上“清除”功能实例详解
-
jQuery EasyUI 折叠面板accordion的使用实例(分享)
-
jQuery EasyUI 选项卡面板tabs的使用实例讲解
-
使用jquery-easyui的布局layout写后台管理页面的代码详解
-
为Jquery EasyUI 组件加上清除功能的方法(详解)
-
jQuery开源组件BootstrapValidator使用详解
-
jQuery EasyUI 折叠面板accordion的使用实例(分享)
-
jQuery EasyUI 组件加上“清除”功能实例详解