2、EasyUI的panel面板组件

最新推荐文章于 2024-06-25 09:43:17 发布

xyphf_和派孔明

最新推荐文章于 2024-06-25 09:43:17 发布

阅读量1.1k

点赞数

分类专栏： EasyUI 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/78906791

版权

EasyUI 专栏收录该内容

10 篇文章

订阅专栏

1、panel是其他组件的容器。

data-options:是数据配置选项
tools表示配置图标和绑定的事件函数里面可以直接写匿名函数也可以写函数名

属性名	属性值类型	描述	默认值
title	string	在面板头部显示的标题文本。	null
iconCls	string	设置一个16x16图标的CSS类ID显示在面板左上角。	null

<script type="text/javascript">
    /* 图标icon-edit点击触发的事件 */
    function funEdit(){
        alert('edit');
    }
</script>
<body>
   <div id="p1" class="easyui-panel" data-options="title:'这里是panel面板头部显示的标题文本',width:400,iconCls:'icon-save',
   tools:[{iconCls:'icon-save',handler:function(){alert('save')}},{iconCls:'icon-edit',handler:funEdit}]">
        <div>Hello World</div>
        <div>EasyUI 组件</div>
        <div>easyui-panel是其他组件的容器</div>
   </div>
</body>

如图所示：
EasyUI的panel面板

2、添加panel面板关闭、打开按钮和事件

<script type="text/javascript">
    /* 打开panel面板 */
    function closePanel(){
        $("#p1").panel('close');
    }
    /* 关闭panel面板 */
    function openPanel(){
        $("#p1").panel('open');
    }
</script>

<input  type="button"  value="关闭" onclick="closePanel()"> 
<input  type="button"  value="打开" onclick="openPanel()">

3、添加折叠与展开panel面板按钮事件

<script type="text/javascript">
   /* 折叠panel面板 */
   function collapsePanel(){
     $("#p1").panel('collapse');
   }
   /* 展开panel面板 */
   function  expandPanel(){
       $("#p1").panel('expand');
   }
</script>

<input type="button" value="折叠panel面板" onclick="collapsePanel()">
<input type="button" value="展开叠panel面板" onclick="expandPanel()">

4、添加最大化与最小化panel面板按钮事件

<script type="text/javascript">
   /* 最大化panel面板 */
   function  maxPanel(){
       $("#p1").panel('maximize');
   }

   /* 最小化panel面板 */
   function  minPanel(){
       $("#p1").panel('minimize');
   }
</script>

<input  type="button"  value="最大化panel面板" onclick="maxPanel()"> 
<input  type="button"  value="最小化panel面板" onclick="minPanel()">

5、通过属性来控制最大化最小化

<div id="p2" class="easyui-panel" data-options="title:'第二个panel面板',collapsible:true,minimizable:true,maximizable:true,closable:true">
      <div>Hello World</div>
      <div>EasyUI 组件</div>
      <div>easyui-panel是其他组件的容器</div>
</div>

<!--
常用属性介绍
collapsible:true/false,定义是否显示可折叠按钮。
minimizable:true/false,定义是否最小化按钮。
maximizable:true/false，定义是否最大化按钮。
closable:true/false,定义是否显示关闭按钮。
-->

6、panel加载内容的面板

<script type="text/javascript">
   function  getDatas(){
        $("#data").panel('refresh','randomMsg.do');
   }
</script>
</head>
<body>
    <div  id="data" title="加载内容的面板"  class="easyui-panel"  style="width: 400px;height: 300px" 
        data-options="tools:[{iconCls:'icon-reload',handler:getDatas}]">

    </div>
</body>

panel加载内容的面板

7、panel面板布局

    <h1> 东西 南北中 布局  </h1>
    <div  class="easyui-panel"  style="width: 500px;height: 400px;" >
         <div class="easyui-layout"  data-options="fit:true">
               <div  data-options="region:'west',split:true" style="width: 200px">左边</div>
               <div  data-options="region:'center'" >中间</div>
               <div  data-options="region:'east',split:true"  style="width: 100px">右边</div>
         </div>
    </div>
    <!-- 
        easyui-layout ：布局
        fit:true 表示让组件填充满整个组件
        region:只当前布局的方向 
        split:表示是否支持鼠标拖拽移动分割
     -->