jQuery EasyUI布局容器layout实例精讲

这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局。layout可以基于body或者 div 进行布局。 
效果:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>easyui-layout的使用</title>
 6         <!-- 导入jquery核心类库 -->
 7         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 8         <!-- 导入easyui类库 -->
 9         <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
10         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
11         <link rel="stylesheet" type="text/css" href="../css/default.css">
12         <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
13     </head>
14     <body class="easyui-layout">
15         <div data-options="region:‘north‘,title:‘你我他学习吧-学习Java的好博客!‘" style="height:100px"></div>
16         <div data-options="region:‘west‘,title:‘西部区域‘" style="width:100px"></div>
17         <div data-options="region:‘center‘,title:‘中部区域‘"></div>
18         <div data-options="region:‘east‘,title:‘东部区域‘" style="width:100px"></div>
19         <div data-options="region:‘south‘,title:‘南部区域‘" style="height:100px"></div>
20     </body>
21 </html>
时间: 2024-10-09 12:43:41

jQuery EasyUI布局容器layout实例精讲的相关文章

Android基础入门教程——5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

Android基础入门教程--5.2.1 Fragment实例精讲--底部导航栏的实现(方法1) 标签(空格分隔): Android基础入门教程 本节引言: 在上一节中我们对Fragment进行了一个初步的了解,学习了概念,生命周期,Fragment管理与 Fragment事务,以及动态与静态加载Fragment.从本节开始我们会讲解一些Fragment在实际开发 中的一些实例!而本节给大家讲解的是底部导航栏的实现!而基本的底部导航栏方法有很多种, 比如全用TextView做,或者用RadioB

Android基础入门教程——5.2.2 Fragment实例精讲——底部导航栏的实现(方法2)

Android基础入门教程--5.2.2 Fragment实例精讲--底部导航栏的实现(方法2) 标签(空格分隔): Android基础入门教程 本节引言: 上一节中我们使用LinearLayout + TextView实现了底部导航栏的效果,每次点击我们都要重置 所有TextView的状态,然后选中点击的TextView,有点麻烦是吧,接下来我们用另一种方法: RadioGroup + RadioButton来实现我们上一节的效果! 1.一些碎碎念 本节用到的是实现单选效果的RadioButt

Android基础入门教程——5.2.3 Fragment实例精讲——底部导航栏的实现(方法3)

Android基础入门教程--5.2.3 Fragment实例精讲--底部导航栏的实现(方法3) 标签(空格分隔): Android基础入门教程 本节引言 前面我们已经跟大家讲解了实现底部导航栏的两种方案,但是这两种方案只适合普通的情况,如果 是像新浪微博那样的,想在底部导航栏上的item带有一个红色的小点,然后加上一个消息数目这样, 前面两种方案就显得无力了,我们来看看别人的APP是怎么做的,打开手机的开发者选项,勾选里面的: 显示布局边界,然后打开我们参考的那个App,可以看到底部导航栏是这

MySQL创建用户与授权方法实例精讲

MySQL中创建用户与授权的实现方法. 运行环境:widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指定该用户在哪个主机上可以登陆,如果是本地用户可用localhost, 如果想让该用户可以从任意远程主机登陆,可以使用通配符%. password - 该用户的登陆密码,密码可以为空

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常

jQuery EasyUI 布局

通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. 在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs. 当点击添加按钮,一个新的 tab 将被添加.如果 tab 已经存在,它将被激活. 步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton"

jQuery EasyUI 布局 - 为网页创建边框布局

边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. south 区域可以用来显示版权以及一些说明. west 区域可以用来显示导航菜单. east 区域可以用来显示一些推广的项目. center 区域可以用来显示主要的内容. 原文地址:https://www.cnblogs.com/littelily/p/11667089.html

plsql实例精讲部分笔记

转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,month9,month10,month11,month12) as select substrb(month,1,4), sum(decode(substrb(month,5,2),'01',sell,0)), sum(decode(substrb(month,5,2),'02',sell,0)),

Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页面切换 原文地址:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html