jQuery布局组件EasyUI Layout使用方法详解


Posted in Javascript onFebruary 28, 2017

layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便。

对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊。使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去。

看个例子:

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <script type="text/javascript" src="easyui/jquery.min.js"></script> 
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 
 <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" rel="external nofollow" /> 
 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> 
 <title>Document</title> 
 </head> 
<body class="easyui-layout"> 
 <div data-options="region:'north',border:false" style="height:60px;background:#00ffcc;padding:10px"><strong><font size=2 color="color">您好,欢迎<span style="white-space:pre">  </span>来到地球!</br>这个世界充满了危险,劝你早点回去!</font></strong></div> 
 <div id="menu" data-options="region:'west',split:true,title:'2014-15赛季赛程'" style="height:100px;width:150px;padding:10px;"> 
  <ul> 
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西甲赛程</a></strong> 
   </li> 
   <br> 
   <br> 
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >英超赛程</a></strong> 
   </li> 
   <br> 
   <br> 
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >德甲赛程</a></strong> 
   </li> 
   <br> 
   <br>   
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >法甲赛程</a></strong> 
   </li> 
   <br> 
   <br>   
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >意甲赛程</a></strong> 
   </li> 
   <br> 
   <br>   
   <li> 
    <strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >欧冠赛程</a></strong> 
   </li> 
 
  </ul> 
 
 </div> 
 <div data-options="region:'east',split:true,collapsed:true,title:'快速通道'" style="width:100px;padding:10px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购买船票</a></br><a href="http://blog.csdn.net/caohaicheng" rel="external nofollow" >逃生指南</a></div> 
 <div data-options="region:'south',border:false" style="height:25px;background:#A9FACD;padding:10px;"><center>http://blog.csdn.net/caohaicheng</center></div> 
 <div data-options="region:'center',title:'主界面'"> 
  
 </div> 
</body> 
</html>

效果图:

jQuery布局组件EasyUI Layout使用方法详解

点此下载源代码:jQuery Easy UI Layout(布局)组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
实例浅析js的this
Dec 11 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 #Javascript
简单实现AngularJS轮播图效果
Apr 10 #Javascript
ie下js不执行的几种可能
Feb 28 #Javascript
jquery中绑定事件的异同
Feb 28 #Javascript
JS常见算法详解
Feb 28 #Javascript
You might like
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
django session完成状态保持的方法
2018/11/27 Python
django的settings中设置中文支持的实现
2019/04/28 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python实现文件的备份流程详解
2019/06/18 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
学生感冒英文请假条
2014/02/04 职场文书
中学生自我鉴定
2014/02/04 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
《春天来了》教学反思
2014/04/07 职场文书
《画家乡》教学反思
2014/04/22 职场文书
生活部的活动方案
2014/08/19 职场文书
个人借款协议书范本
2014/11/17 职场文书
幼师大班个人总结
2015/02/13 职场文书
小学校本教研总结
2015/08/13 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python