多语言展示
当前在线:1749今日阅读:58今日分享:42

如何利用EasyUI框架的layout控件布局

EasyUI框架有一款控件layout,用于对页面或其他控件进行布局,方位分为东南西北中。layout可以将页面分为不同的页面布局,可以在不同的布局中展示不同的内容。下面利用一个实例说明其用法,具体操作如下:
工具/原料
1

EasyUI

2

jQuery

3

HBuilder

4

浏览器

5

HTML5

6

CSS3

7

截图工具

方法/步骤
1

第一步,双击打开HBuilder编辑工具,创建静态页面layout.html,默认是HTML5模板,如下图所示:

2

第二步,引入EasyUI框架的相关JavaScript和CSS文件,除了这些文件之外,还有jquery核心文件,注意要先引入jquery文件,如下图所示:

3

第三步,在body元素标签内插入layout布局div,并设置data-options属性,分别设置不同的区域位置,如下图所示:

5

第五步,在北方位插入一年四季无序列表,作为区别其他布局位置的内容,如下图所示:

6

第六步,在南方位插入一年四个季度无序列表以及在东方位插入上下左右无序列表,尽量在每个布局位置展示不同的内容,如下图所示:

注意事项
1

注意熟练使用EasyUI框架的layout控件布局

2

注意要了解layout使用方法和场景

推荐信息