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 相关文章推荐
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
学习python处理python编码问题
2011/03/13 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
PyQt5实现拖放功能
2018/04/25 Python
python画折线图的程序
2018/07/26 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
阿里云:Aliyun.com
2017/02/15 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
乡镇网格化管理实施方案
2014/03/23 职场文书
财务情况说明书范文
2014/05/06 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
导游词之长城八达岭
2019/09/24 职场文书