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获取iframe中的dom对象(两种方法)
Jul 02 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript数组常用方法
Mar 02 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
原生JS实现九宫格抽奖
Sep 13 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+javascript液晶时钟
2006/10/09 PHP
php上传文件的增强函数
2010/07/21 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python Django批量导入不重复数据
2016/03/25 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
如何用python 操作zookeeper
2020/12/28 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
美术课外活动总结
2014/07/08 职场文书
网络管理员岗位职责
2015/02/12 职场文书
消防演习感想
2015/08/10 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Python 如何实现文件自动去重
2021/06/02 Python