1.页面布局-easyUi

最新推荐文章于 2024-06-26 15:25:06 发布

启福铭远

最新推荐文章于 2024-06-26 15:25:06 发布

阅读量581

点赞数

分类专栏： Jquery/EasyUi/Bootstrap

本文链接：https://blog.csdn.net/wangwei249/article/details/51576195

版权

Jquery/EasyUi/Bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一。页面布局 - layout

1. 创建布局面板只须要对<div>标签引用'easyui-layout'类

 <div id="cc" class="easyui-layout" style="width:800px;height:600px;">  
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
 </div>

2. 创建整个页面的布局，body 标签引用 easyui-layout 类即可

 <body  class="easyui-layout" >
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
 </body>

3. 创建嵌套布局，一个上中布局里，下面内嵌个左中布局，其中左（西）布局默认折叠起来

 <body  class="easyui-layout" > 
    <div data-options="region:'north'" style="height:100px"></div>  
    <div data-options="region:'center'">  
        <div class="easyui-layout" data-options="fit:true">  
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>  
            <div data-options="region:'center'"></div>  
        </div>  
    </div> 
 </body>

4. Collpase 布局面板, 如下代码，折叠west面板

   $('#cc').layout();   
   $('#cc').layout('collapse','west');

5. 动态给cc布局新增一个带有新增和删除按钮的面板，如果cc布局已存在west面板则不起效

function toCollapse() {
    $('#cc').layout('add', {
        region: 'west',
        width: 180,
        title: 'West Title',
        split: true,
        tools: [{
            iconCls: 'icon-add',
            handler: function() {
                alert('add')
            }
        },
        {
            iconCls: 'icon-remove',
            handler: function() {
                alert('remove')
            }
        }]
    });
}

二。可伸缩面板 - accordion

1. 伸缩面板，只须要对<div>标签引用'easyui-accordion'类

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
   <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">  
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
        <p>Accordion is a part of easyui framework for jQuery.    
           It lets you define your accordion component on web page more easily.</p>  
    </div>  
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">  
           content2   
    </div>  
    <div title="Title3">  
           content3   
    </div>  
</div>

可动态修改伸缩面板的一些属性，如设置伸缩面板打开关闭时的效果

  $('#aa').accordion({   
     animate:false  
  });

调用'getSelected'方法获取当前面板（的名称），接着可以调用控制面板的'refresh'方法来载入新的内容。

  var pp = $('#aa').accordion('getSelected'); // get the selected panel   
  if (pp) {
    pp.panel('refresh', 'new_content.php'); // call 'refresh' method to load new content   
  }

三。控制面板 - panel

1. 使用标签创建控制面板，只须要对<div>标签引用'easyui-panel'类。

  <div id="p" class="easyui-panel" title="My Panel"    
        style="width:500px;height:150px;padding:10px;background:#fafafa;"  
        data-options="iconCls:'icon-save',closable:true,   
                collapsible:true,minimizable:true,maximizable:true">  
      <p>panel content.</p>  
      <p>panel content.</p>  
  </div>

2. 使用脚本创建控制面板

  <div id="p" style="padding:10px;">   
       <p>panel content.</p>   
       <p>panel content.</p>   
  </div>

$('#p').panel({
    width: 500,
    height: 150,
    title: 'My Panel',
    tools: [{
        iconCls: 'icon-add',
        handler: function() {
            alert('new')
        }
    },
    {
        iconCls: 'icon-save',
        handler: function() {
            alert('save')
        }
    }]
});

3. 移动控制面板

  $('#p').panel('move',{   
     left:200,   
     top:100   
  });

4. 载入内容

$('#p').panel({
    href: 'www.baidu.com',
    onLoad: function() {
        alert('loaded successfully');
    }
});

四。选项卡 - Tabs

1. 使用HTML标签创建选项卡十分简单，只需要<div>标签引用'easyui-panel'类。

每个选项卡面板都可以使用闭合的<div>标签对创建，使用方法跟创建控制面板一样。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
  <div title="Tab1" style="padding:20px;">tab1</div>  
  <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">tab2</div>  
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab3</div> 
</div>

* 如果style中diaplay:none, 则tab里的内容不显示

2. 使用脚本添加一个选项卡

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
  <div title="Tab1" style="padding:20px;">tab1</div> 
</div>

function createTab() {
    $('#tt').tabs('add', {
        title: 'New Tab',
        content: 'Tab Body',
        closable: true,
        tools: [{
            iconCls: 'icon-mini-refresh',
            handler: function() {
                alert('refresh');
            }
        }]
    });

}

3. 获取当前被选中的选项卡

  var pp = $('#tt').tabs('getSelected');   
  var tab = pp.panel('options').tab;    // the corresponding tab object

启福铭远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录