EasyUI系列学习(九)-Panel(面板)
2016-02-20 17:05
447 查看
一、加载方式
1.class加载
2.js加载
二、属性
1.
生成的html
2.
三、事件
四、方法
1.class加载
<div class="easyui-panel" title="面板一" style="width:500px">内容一</div>
2.js加载
<div id="pl">内容二< <script> $(function () { $("#pl").panel({ width: 500, title: "面板二" }); }) </script>
二、属性
1.
<div id="pl">内容二</div> <div id="tt"> <a href="#" class="icon-add"></a> <a href="#" class="icon-edit"></a> </div> <script> $(function () { $("#pl").panel({ //面板属性id id: "pl2", //在面板头部显示的标题文本 title: "面板二", //显示在面板左上角的图标 iconCls: "icon-edit", //在面板中添加按钮 collapsible: true, // collapsed:true, closable: true, //closed:true, minimizable: true, //minimized:true, maximizable: true, //maximized:true, tools: "#tt", //设置面板的宽度和高度 width: 500, height: 150, content: "修改内容", //给面板添加额外css属性 cls: "aa", headerCls: "bb", bodyCls: "cc" }); }) </script>
生成的html
<div class="panel aa" style="display: block; width: 500px;"> <div class="panel-header bb" style="width: 488px;"> <div class="panel-title panel-with-icon">面板二</div> <div class="panel-icon icon-edit"></div> <div class="panel-tool"> <a class="icon-add panel-tool-a" href="#"></a> <a class="icon-edit panel-tool-a" href="#"></a> <a class="panel-tool-collapse" href="javascript:void(0)"></a> <a class="panel-tool-min" href="javascript:void(0)"></a> <a class="panel-tool-max" href="javascript:void(0)"></a> <a class="panel-tool-close" href="javascript:void(0)"></a> </div> </div> <div id="pl2" class="panel-body cc" title="" style="width: 498px; height: 121px;">修改内容</div> </div> <div id="tt"> </div>
2.
<div id="pl">内容二</div> <script> $(function () { $("#pl").panel({ title: "面板二", width: 500, height: 150, //自适应父容器 //fit: true, //不会创建面板标题 //noheader: true, //不显示边框 //border: false, //在面板被创建时将重新布局,默认为true //doSize:true, //默认为true,在超链接载入时缓存面板内容 //cache: true, loadingMessage: "正在加载中", href: "demo.ashx", //以Ajax方式请求,返回demo.ashx的数据 extractor: function (data) { alert(data); } }); }) </script>
三、事件
四、方法
相关文章推荐
- uiautomatorviewer获取当前屏幕中的各个元素信息包括类名
- 1041. Be Unique (20)
- 【UER #1】跳蚤OS(Trie)
- php中$_REQUEST、$_POST、$_GET的区别和联系小结
- 求php中的request详细用法
- CodeForces 626A Robot Sequence
- RequireJS 与 SeaJS 的异同
- the behavior of the UICollectionViewFlowLayout is not defined because:
- POJ 2299 Ultra-QuickSort(树状数组+离散化)
- 制作 Nine-Patch 图片
- UIScrollView
- iOS UIView及其子控件的常用设置
- 以访客至上的网页设计(三)
- iOS开发-------3D Touch之Peek,Pop,UIPreviewAction
- POJ 3481 Double Queue
- Android:requestFeature() must be called before adding content
- iOS调试技巧—调试状态修改UI
- HDU 3436 Queue-jumpers
- StringBuilder、StringBuffer和String三者的联系和区别
- hdu1423 Greatest Common Increasing Subsequence(最长递增公共子序列)