前端框架 EasyUI （2）页面布局 Layout

最新推荐文章于 2024-06-05 10:05:00 发布
最新推荐文章于 2024-06-05 10:05:00 发布
阅读量3k 收藏 1
点赞数
分类专栏： .NET框架

　　在 Web 程序中，页面布局对应用程序的用户体验至关重要。

　　在一般的信息管理类的 Web 应用程序中，页面结构通常有一个主工作区，然后在工作区上下左右靠近边界的区域设置一些边栏，用于显示信息或放置一些功能选项的控件。比如下面这两个比较典型的例子：

　　 

　　EasyUI 提供了一种非常简单方便的实现该效果的方法，可以让用户很方便的在页面上实现矩形区域划分的功能，这就是 EasyUI 的布局组件（Layout）。

EasyUI 布局组件Layout

　　EasyUI 的布局组件允许用户在一个主工作区的四周各添加一个边栏，EasyUI 将自动为用户实现边界划分和边界位置控制功能。

　　EasyUI 的布局组件需要基于一个布局容器，比如一个<div>，当然也可以使用整个<body>。将一个容器设置为 EasyUI 布局容器的方法很简单，只需要添加一个控件样式类 easyui-layout 就行了。

　　然后，在布局容器中至少要添加一个主工作区 center。在主工作区四周，可以分别添加一个边栏，以上北、下南、左西、右东的规则，分别标记为nouth（上）、south（下）、west（左）、east（右）。工作区的名字标记为容器标签的 region 属性。

　　例如，下面代码实现将一个300*300的<div>划分为5个区，左右侧区域宽度各100，其它自动：

复制代码 
<div class="easyui-layout" style="width:300px; height:300px;">
    <div region="north">顶部</div>
    <div region="west" style="width:100px">左侧</div>
    <div region="center">主工作区</div>
    <div region="east" style="width:100px">右侧</div>
    <div region="south">底部</div>
</div>
复制代码

 

　　显示效果如图：

　　

（IE11）

　　如果将页面中 <body> 标签定义为布局容器，那么 EasyUI 可以将整个浏览器的工作区划分为5个区域。

　　需要注意的一点是，主工作区左侧和右侧的边栏必须要设置宽度，否则布局将不能正常显示。

Layout 常用属性

　　Layout 可以为工作区设置标题；也可以将工作区边栏设置为可变大小，以便用户使用鼠标拖动改变工作区大小。这两个功能分别是 title 属性（string）和 split 属性(bool)。

　　例如：下面代码将左侧边栏标题设置为“导航菜单”，并且大小可变：

复制代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/icon.css" />
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.easyui.min.js" ></script>
</head>

<body class="easyui-layout">
    <div region="north">顶部</div>
    <div region="west" style="width:100px" title="导航菜单" split="true">左侧</div>
    <div region="center">主工作区</div>
    <div region="east" style="width:100px">右侧</div>
    <div region="south">底部</div>
</body>
</html>
复制代码

 

　　在浏览器执行效果如图：

（IE11）

 

　　当然，如果需要设置上侧或下侧边栏的大小，设置相应的<div>标签的高度即可。

 

　　示例源码：http://files.cnblogs.com/files/zhhh/EasyUI-2.zip

lenovouser
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
easyui实现前端页面CURD
weixin_30872733的博客
12-23 135
easyui version: jquery-easyui-1.4.3 此版本解决 $.messager.progress('close'); 报错的问题 列表效果 搜索效果 编辑效果 页面代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco...
Easyui03完成前端页面的动态Tree
weixin_45067120的博客
02-25 159
第一步: 完善后台接口 1.搭建MVC框架一定测试数据库连接 2.web.xml中配置----中央控制器----中文乱码器----过滤器 2.2中央控制器比人博客在Easyui里面有 2.2中文乱码器源码 package com.zking.test.util; import java.io.IOException; import java.util.Iterator; ...
探索高效UI设计新纪元 —— DeviceLayout框架
最新发布
gitblog_00087的博客
06-05 285
探索高效UI设计新纪元 —— DeviceLayout框架 项目地址:https://gitcode.com/cruisediary/DeviceLayout 在当今移动应用开发的激流中，如何让您的App界面适配各种设备成为了一项挑战。今天，我们将为您介绍一个杰出的解决方案——DeviceLayout，一款专为Swift打造的框架，它以优雅的方式解决了设备差异化布局的问题。 项目介绍 Device...
七色花基本权限系统（3）- 利用EasyUI进行首页布局
angxi9993的博客
06-02 142
EasyUI EasyUI是基于JQuery库的偏js轻型前端UI框架，不了解的读者可以参考官网地址。 在项目中增加JQuery和EasyUI，并在布局页中引用。为了结构清晰，方便日后维护和升级，可以在Scripts下创建jquery文件夹和jquery-easyui文件夹。这里选择1.11.0的JQuery和1.4.3的EasyUI。 特别说明一下，我已经修复了该版本的几个（只能通过...
easyui easyui-layout 调整布局大小
无名大白
05-19 8998
调整p2高度。 js: $('#trType').hide();$('#p2').panel({height:150});$('body').layout('resize');
ud分区删除工具_IT天空出品，另一款纯净无捆绑的PE工具箱——优启通
weixin_39613089的博客
12-08 1122
优启通(EasyU，简称EU)是IT天空精心打造的一款系统预安装环境(PE)，与现有的Windows操作系统极为相似，好像是修改的企业版而来的，好久没用记不太清了。优启通具有广泛兼容、稳定耐用、快速启动、体积小巧等特点，但它相对于微PE而言，也所整合的工具较多，而且全。同时支持联网，如果装机过程中发现少了什么文件可以直接联网下载。另外优启通搭载着IT天空数款自己研制的软件，十分有效的提高了系统安装...
easyUI前端框架jar包
07-29
1. **布局（Layout）**：EasyUI 提供了灵活的布局系统，可以方便地划分页面区域，如north、south、east、west和center，用于创建响应式的网页布局。 2. **窗口（Window）**：支持创建弹出式或嵌入式的窗口组件，可...
easyui 整体框架布局1.2.6
08-29
在 EasyUI 中，框架布局（Layout）是核心功能之一，它允许开发者将页面分割成多个区域，如北（North）、南（South）、东（East）、西（West）和中心（Center），这样可以灵活地组织和管理网页内容。以下是对 EasyUI ...
easyui页面布局示例
04-03
首先，EasyUI 提供了多种布局模式，如网格布局（grid layout）、面板布局（panel layout）、窗口布局（window layout）等，这些布局方式可以帮助开发者灵活地组织页面元素。在本示例中，很可能是使用了网格布局来...
EASYUI 页面框架
07-07
EASYUI 页面框架是一款基于JavaScript和CSS的前端开发框架，专为快速构建高效、美观的后台管理界面而设计。它采用简洁的API接口，使得开发者能够轻松实现数据绑定、交互控制以及界面布局等功能，大大降低了网页开发...
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
10-22
在网页开发中，jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的组件，包括 Layout、Grid、Form 等，使得构建用户界面变得更加简单。本文主要探讨如何使用 jQuery EasyUI Layout 实现从布局在窗口大小...
ex_ui扩展组件
12-01
模块名称：ex_ui扩展组件 版本：1.0 ex_ui扩展组件 ------------------------------ .版本 2 .子程序 Ansi转Unicode, 字节集, 公开, 将Ansi转成Unicode .参数 欲转文本, 文本型 .子程序 ARGB颜色选择对话框, , 公开 .参数 hWnd, 整数型 .参数 DefaultColor, 整数型, 可空 .参数 DefaultAlpha, 整数型, 可空 .子程序 Gdiplus初始化, , 公开 .子程序 Gdiplus关闭, , 公开
html页面两侧对联效果
01-12
html页面两侧对联效果（记着把index.hmtl里面jquery的路径改成自己的）
前端开发所用图标_easyUI
11-25
5000个easyui小图标，前端开发必备之选, 大小均为16*16像素, 命名规范, 便于检索
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 8954
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
使用Easy UI进行页面的简单布局
XCMercy
12-16 3451
Easy UI进行页面布局有两种方式：标记创建布局和全局布局，标记创建布局是在div标签中设置 class=“easyui-layout”,全局布局是在body标签中设置class=“easyui-layout”。 创建全局布局 在body标签中设置class=“easyui-layout”。对页面进行布局 XXX技术有限公司版
EasyUI–布局和标签页详解
程序员大阳
03-14 3544
EasyUI的布局非常简单，但是也能充分满足网页日常的布局，先来一个最基本的例子： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <titl
jquery+easyui主界面布局一例
hsg77的专栏
08-13 7360
工作台
使用easyUI创建一个border layout在你的web页面
java开发指南博客 【转载】
08-09 115
@author YHC border layout提供5个区域:east,west,north,south,center. 以下是一些正常用法: north区域可以使用作为你的网站的标语. south区域可以用来显示版权以及一些说明. west区域可以用来做导航菜单. east区域可以显示一些你的推广的项目. center区域用来显示主要的内容. 查看 Demo 应用一个...
写一个excel上传到数据库展示到前端，要求采用MVC，前端框架easyui
07-17
Sure! Here's an example of how you can upload an Excel file, store its data in a database, and display it on the front-end using the MVC pattern and the EasyUI framework: 1. Create the necessary database table to store the Excel data. Let's assume the table is named `excel_data` and has columns `id`, `name`, and `email`. 2. Create a file named `index.php` for the front-end view using EasyUI: ```html <!DOCTYPE html> <html> <head> <title>Excel Upload</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.25/themes/default/easyui.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.25/jquery.easyui.min.js"></script> </head> <body> <h2>Excel Upload</h2> <form id="excelForm" method="post" enctype="multipart/form-data"> <input id="excelFile" name="excelFile" type="file"> <button id="uploadBtn" class="easyui-linkbutton" type="submit">Upload</button> </form> <table id="datagrid"></table> <script type="text/javascript"> $(function(){ $('#excelForm').form({ url: 'upload.php', onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ $('#datagrid').datagrid('reload'); $.messager.show({ title: 'Success', msg: result, timeout: 5000 }); } }); $('#datagrid').datagrid({ url: 'data.php', fitColumns: true, columns: [[ {field: 'id', title: 'ID', width: 50}, {field: 'name', title: 'Name', width: 100}, {field: 'email', title: 'Email', width: 150} ]] }); }); </script> </body> </html> ``` 3. Create a file named `upload.php` to handle the file upload and data insertion into the database: ```php <?php require_once 'PHPExcel/PHPExcel.php'; // Database connection details $host = 'localhost'; $username = 'your_username'; $password = 'your_password'; $database = 'your_database'; // File upload directory $targetDir = 'uploads/'; if (!is_dir($targetDir)) { mkdir($targetDir, 0777, true); } $targetFile = $targetDir . basename($_FILES["excelFile"]["name"]); move_uploaded_file($_FILES["excelFile"]["tmp_name"], $targetFile); $objPHPExcel = PHPExcel_IOFactory::load($targetFile); $worksheet = $objPHPExcel->getActiveSheet(); $conn = new mysqli($host, $username, $password, $database); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } foreach ($worksheet->getRowIterator() as $row) { $rowData = []; $cellIterator = $row->getCellIterator(); $cellIterator->setIterateOnlyExistingCells(false); foreach ($cellIterator as $cell) { $rowData[] = $cell->getValue(); } $sql = "INSERT INTO excel_data (name, email) VALUES (?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("ss", $rowData[0], $rowData[1]); $stmt->execute(); } $conn->close(); unlink($targetFile); echo "Upload successful!"; ?> ``` 4. Create a file named `data.php` to fetch the data from the database and return it as JSON for the front-end grid: ```php <?php // Database connection details $host = 'localhost'; $username = 'your_username'; $password = 'your_password'; $database = 'your_database'; $conn = new mysqli($host, $username, $password, $database); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT * FROM excel_data"; $result = $conn->query($sql); $data = array(); while ($row = $result->fetch_assoc()) { $data[] = $row; } $conn->close(); echo json_encode($data); ?> ``` Make sure to replace `'your_username'`, `'your_password'`, and `'your_database'` with your actual database credentials. This example follows the MVC pattern by separating the front-end view (`index.php`), the controller (`upload.php`), and the model (`data.php`). Remember to include the PHPExcel library in the appropriate locations and adjust the file paths accordingly. I hope this example helps you with uploading an Excel file, storing the data in a database, and displaying it on the front-end using the MVC pattern and EasyUI framework. Let me know if you have any further questions!

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值