您的位置：首页 > 产品设计 > UI/UE

easyUI panel组件

2015-10-18 20:50 381 查看

easyUI panel组件：

属性的使用：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test009.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head>

<body style="margin:20px">
<div class="easyui-panel" data-options="title:'面板',closable:true" style="width:500px">
<p>内容</p>
</div>
<div id="box">
<p>内容2</p>
</div>
<div id="tt">
<a href="" class="icon-add" onclick="javascript:alert('add')"></a>
</div>
</body>

</html>

$(function(argument) {
var obj = {
// id: 'pox', // 设置id
title: '面板', //设置标题
width: 500,
height: 150,
iconCls: 'icon-search',
// left: 200,// 距离左侧距离
// top: 200,// 距离顶部距离
cls: 'a',
headerCls: 'b',
bodyCls: 'c',
style: {
'background': 'none',
'font-size': '18px'
},
// fit: true, //自适应父元素
// border: false, //不显示边框
// doSize: false, //不按照上面的设置进行调整大小
// noheader: true, //不显示标题
content: 'content1', //展示内容
collapsible: true, //显示折叠
minimizable: true, //最小化
maximizable: true, //最大化
closable: true, //可关闭
// tools:'#tt',//工具条选择器
tools: [{ // 也可以是数组对象
iconCls: 'icon-search',
handler: function() {
alert('search');
}
}],
// collapsed:true,//初始化时候折叠
// minimized:true,//初始化的时候最小化
// maximized:true,//初始化的时候最大化
// closed:true,//初始化的时候关闭
href:'http://www.sina.com.cn',//这样有跨域访问问题，这个必须在web容器下面测试；
loadingMessage: '加载中...', //加载时候显示的信息
cache:true,//缓存加载的href信息;
extractor:function(data){//把返回的结果数据进行截取；
return data.substring(0,3);
}
};

$('#box').panel(obj);
// var p = $('#box').panel('panel'); // 这个id可能在上面被id:'pox'修改掉；
// p.css('position','absolute');
// console.log(p);
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航