【EasyUI】——EasyUI的布局

最新推荐文章于 2020-12-31 13:16:00 发布
最新推荐文章于 2020-12-31 13:16:00 发布
阅读量125 收藏
点赞数
文章标签： javascript 人工智能 ViewUI

    做一个站点首先要有站点的布局，所谓的布局事实上就是网页的排版。就是说你的网页显示时是什么样子的。

就比方百度的首页：

   

无论是谁登录。网页都是这个样式的。


    EasyUI中的网页布局一共分为五部分，分别为东。西。南，北，中。在设计自己的网页布局时，中间部分是必需要有的。其余四部分能够不用。由于其余四部分的位置是依据中间部分位置来计算的。EasyUI的布局样式有非常多。能够选择自己合适的布局使用，另外能够设置布局中的一些属性值。来使布局更适合自己的网页。


分类

1、基本布局

              
 

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><div class="easyui-layout" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south',split:true" style="height: 50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width: 100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <table class="easyui-datagrid"
            data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
            <thead>
                <tr>
                    <th data-options="field:'itemid'" width="80">Item ID</th>
                    <th data-options="field:'productid'" width="100">Product ID</th>
                    <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                    <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                    <th data-options="field:'attr1'" width="150">Attribute</th>
                    <th data-options="field:'status',align:'center'" width="60">Status</th>
                </tr>
            </thead>
        </table>
    </div>
</div></span></span>


2、可加入和删除part的布局

                             

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Add and Remove Layout</h2>
<p>Click the buttons below to add or remove region panel of layout.</p>
<div style="margin: 20px 0;">
    <span>Select Region Panel:</span>
    <select id="region">
        <option value="north">North</option>
        <option value="south">South</option>
        <option value="east">East</option>
        <option value="west">West</option>
    </select>
    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="addPanel()">Add</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="removePanel()">Remove</a>
</div>
<div id="cc" class="easyui-layout" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south',split:true" style="height: 50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width: 100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
    <div data-options="region:'center',title:'Center'"></div>
</div>
<script type="text/javascript">
    function addPanel() {
        var region = $('#region').val();
        var options = {
            region: region
        };
        if (region == 'north' || region == 'south') {
            options.height = 50;
        } else {
            options.width = 100;
            options.split = true;
            options.title = $('#region option:selected').text();
        }
        $('#cc').layout('add', options);
    }
    function removePanel() {
        $('#cc').layout('remove', $('#region').val());
    }
	</script></span></span>

3、可自己主动适应内容高度的布局

                              

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Auto Height for Layout</h2>
<p>This example shows how to auto adjust layout height after dynamically adding items.</p>
<div style="margin: 20px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="addItem()">Add Item</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="removeItem()">Remove Item</a>
</div>
<div id="cc" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south'" style="height: 50px;"></div>
    <div data-options="region:'west'" style="width: 150px;"></div>
    <div data-options="region:'center'" style="padding: 20px">
        <p>Panel Content.</p>
        <p>Panel Content.</p>
        <p>Panel Content.</p>
        <p>Panel Content.</p>
        <p>Panel Content.</p>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#cc').layout();
        setHeight();
    });

    function addItem() {
        $('#cc').layout('panel', 'center').append('<p>More Panel Content.</p>');
        setHeight();
    }

    function removeItem() {
        $('#cc').layout('panel', 'center').find('p:last').remove();
        setHeight();
    }

    function setHeight() {
        var c = $('#cc');
        var p = c.layout('panel', 'center');	// get the center panel
        var oldHeight = p.panel('panel').outerHeight();
        p.panel('resize', { height: 'auto' });
        var newHeight = p.panel('panel').outerHeight();
        c.height(c.height() + newHeight - oldHeight);
        c.layout('resize');
    }
	</script></span></span>


4、复杂布局（包括动态菜单条）

                          

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Complex Layout</h2>
<p>This sample shows how to create a complex layout.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south',split:true" style="height: 50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width: 180px;">
        <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
    </div>
    <div data-options="region:'west',split:true" title="West" style="width: 100px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="Title1" style="padding: 10px;">
                content1
			
            </div>
            <div title="Title2" data-options="selected:true" style="padding: 10px;">
                content2
			
            </div>
            <div title="Title3" style="padding: 10px">
                content3
			
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
            <div title="About" data-options="href:'_content.html'" style="padding: 10px"></div>
            <div title="DataGrid" style="padding: 5px">
                <table class="easyui-datagrid"
                    data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
                    <thead>
                        <tr>
                            <th data-options="field:'itemid'" width="80">Item ID</th>
                            <th data-options="field:'productid'" width="100">Product ID</th>
                            <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                            <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                            <th data-options="field:'attr1'" width="150">Attribute</th>
                            <th data-options="field:'status',align:'center'" width="50">Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div></span></span>

5、适应全屏的布局

 

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</span></span>

6、嵌套的布局

                             

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Nested Layout</h2>
<p>The layout region panel contains another layout or other components.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south',split:true" style="height: 50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width: 180px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
    <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:true,border:false" style="height: 50px"></div>
            <div data-options="region:'west',split:true,border:false" style="width: 100px"></div>
            <div data-options="region:'center',border:false"></div>
        </div>
    </div>
</div></span></span>

7、无收缩button的布局

                             

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>No collapsible button in Layout</h2>
<p>The layout region panel has no collapsible button.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
    <div data-options="region:'north'" style="height: 50px"></div>
    <div data-options="region:'south',split:true" style="height: 50px;"></div>
    <div data-options="region:'east',split:true,title:'East',collapsible:false" style="width: 250px;">
        <table id="tt" class="easyui-propertygrid" data-options="
						url: 'propertygrid_data1.json',
						method: 'get',
						showGroup: true,
						fit: true,
						border: false
					">
        </table>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'_content.html'" style="padding: 10px">
    </div>
</div></span></span>

属性方法

方法
方法名方法属性描写叙述
resizenone设置布局大小
panelregion返回指定面板，“region”參数可用值有：north。south，east，west，center。
collapseregion折叠指定面板，“region”參数可用值有：north。south，east。west。
expandregion展开指定面板，“region”參数可用值有：north。south。east，west。
addoptions加入指定面板。属性參数是一个配置对象
removeregion移除指定的面板，“region”參数可用值有：north。south，east。west。
方法应用比方：

折叠布局面板：$('#cc').layout('collapse','west'); 
加入西区面板：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">$('#cc').layout('add',{    
    region: 'west',    
    width: 180,    
    title: 'West Title',    
    split: true,      
});</span></span>
    当中设置的属性即西区面板的属性。如region表示面板的位置。width为面板宽度，title为面板标题，split为用户能否够改变面板大小。

布局属性
属性值属性值类型描写叙述默认值
fitboolean假设设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自己主动最大。
false
区域属性
属性值属性值类型描写叙述默认值
titlestring布局面板标题文本null
regionstring定义布局面板位置，可用的值有：north，south，east，west。center。
borderboolean为true时显示布局面板的边框true
splitboolean为true时用户能够改变每一面板大小false
iconClsstring一个包括图标的CSS类的ID。该图标将会显示到面板标题上null
hrefstring用于读取远程网站数据的URL链接null
collapsibleboolean定义是否显示折叠buttontrue
minWidthnumber最小面板宽度10
minHeightnumber最小面板高度10
maxWidthnumber最大面板宽度10000
maxHeightnumber最大面板高度10000
总结

    每接触什么东西都认为非常难，事实上就是没有和曾经的知识结合起来，仅仅要以自己学过的知识为基础。再去学自己所谓的新的东西，那么这些东西也就变得简单了。



weixin_33782386
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui(基本布局)
weixin_66202611的博客
05-02 1051
概述： What is easyui？ jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助 优点：web开发者更轻松的打造出功能丰富并且美观的UI界面 为什么要学？ ①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面 ②.easyui 是个完美支持 HTML5 网页的完整框架 ③.easyui 能...
EasyUI——Layout（布局）
weixin_45492425的博客
12-04 464
EasyUI——Layout（布局） 使用$.fn.layout.defaults重写默认值对象。 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 依赖关系 panel resizable 使用案例 创建布局 通过标签...
使用easyui时 进入一个新页面 前要经过一个页面混乱的时候 才到正常的页面去...
weixin_33692284的博客
10-14 196
var width = $(window).width(); var height = $(window).height(); var html = "&lt;div id='loading' style='position:absolute;left:0;width:100%;height:" + height + "px;top:0;backgr...
easyui之layout布局
程门立雪的博客
03-14 2428
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 职工系统 /js/jsframework/easyui/themes/default/easyui.css"> /js/jsframework/easyui/themes/icon.css"> /js/js
easyui获取图片路径_Python玩转图片九宫格
weixin_33512578的博客
12-31 172
本文主要记录通过Python以及其第三方库pillow来批量生成图片九宫格，其主要思想如下：判断一张图片是不是正方形的，若不是，则获取图片最短的一边为边长，以该边长截取图片的中间部分正方形区域，然后再通过边长将该图片等分为九个正方形区域截取并保存。用到的pillow的Image模块的函数有open，size，crop, save。------->>>>>&g...
EasyUi布局示例，适合初学，简单易懂
10-23
这个“EasyUi布局示例”是专为初学者设计的，旨在帮助他们快速理解和掌握EasyUi的布局机制，从而能够构建出美观且功能齐全的网页应用。 在前端开发中，布局是至关重要的部分，它决定了网页元素如何在不同屏幕尺寸和...
Jqurey实现类似EasyUI的页面布局可改变左右的宽度
09-04
在本文中，我们将深入探讨如何使用jQuery来实现一个类似EasyUI的页面布局，允许用户动态改变左右两侧div的宽度。EasyUI是一个基于jQuery的UI框架，提供了丰富的组件和灵活的布局选项，使得开发者能够轻松创建出美观...
jQuery组件easyui基本布局实现代码
10-21
在本文中，我们还可以看到如何将easyui的另外一个组件——easyui-datagrid集成到布局中。easyui-datagrid是一个数据网格组件，它可以快速地构建出表格形式的数据展示。 ```html ,title:'MainTitle',iconCls:'icon-...
easyUI快速入门第二讲——easyUI中的layout（布局）组件
李阿昀的博客
10-29 974
layout（布局）组件的概述 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 layout（布局）组件的使用 在所在项目的WebContent目录下新建一个02-layout目录，并在该目录下新建一个02-layout...
使用juicer模板创建jQuery-weui九宫格
08-30
使用juicer模板创建jQuery-weui九宫格，可以根据不同数据，动态创建九宫格
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
12-03
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600px; height: 600px; background-color: green; }*/ .ni
jQuery EasyUI 布局之动态添加tabs标签页
10-23
本文给大家介绍jquery easyui布局之动态添加tabs标签页，实现思路是这样的通过调用add方法就可以轻松实现，本文分步骤给大家详细介绍，需要的朋友一起学习吧
使用Easy UI进行页面的简单布局
XCMercy
12-16 3466
Easy UI进行页面布局有两种方式：标记创建布局和全局布局，标记创建布局是在div标签中设置 class=“easyui-layout”,全局布局是在body标签中设置class=“easyui-layout”。 创建全局布局 在body标签中设置class=“easyui-layout”。对页面进行布局 XXX技术有限公司版
easyui学习笔记2：页面布局，layout插件
weixin_34409822的博客
03-21 138
为什么80%的码农都做不了架构师？>>> ...
jq easyui中文文档
热门推荐
lmzpp的专栏
04-15 1万+
<br />1                Accordion（可折叠标签） 1.1         实例 <br />1.1.1    代码 <br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /><title>jQuery EasyUI</title><br /><link rel="stylesheet" type="text/css"  href="
EasyUI中两种创建窗口布局的方法
captian_900331的博客
12-19 2539
在easyUI中，Window窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。 一般在去创建Window窗口的时候有两种方法可以解决： 1、在页面标签中创建：<div id="win" class="easyui-window" title="My Window" style="width:
浅谈EasyUI---C#三层架构---
weixin_33736649的博客
05-23 152
每次写博客，第一句话都是这样的：程序员很苦逼，除了会写程序，还得会写博客！当然，希望将来的一天，某位老板看到此博客，给你的程序员职工加点薪资吧！因为程序员的世界除了苦逼就是沉默。我眼中的程序员大多都不爱说话，默默承受着编程的巨大压力，除了技术上的交流外，他们不愿意也不擅长和别人交流，更不乐意任何人走进他们的内心，他们常常一个人宅在家中！有上进心的，查查资料，学习新的知识，没上进心的，在家一日重复一...
easyui 自定义布局
lhrcylhr的博客
11-09 540
Search: Hi,I am easyui.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值