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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python封装shell命令实例分析
2015/05/05 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python写一个md5解密器示例
2018/02/23 Python
Python聊天室程序(基础版)
2018/04/01 Python
聊聊python中的异常嵌套
2020/09/01 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
用Python制作音乐海报
2021/01/26 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
纪检监察建议书
2014/05/19 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
公司聚餐通知
2015/04/22 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
怒海潜将观后感
2015/06/11 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js
Java异常体系非正常停止和分类
2022/06/14 Java/Android