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="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: '面板', //设置标题 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); });