您的位置: 首页 > 文章 > 带你玩转jQuery EasyUI Layout组件

带你玩转jQuery EasyUI Layout组件

分类: 文章 • 2024-07-30 20:41:10

2019独角兽企业重金招聘Python工程师标准>>> 带你玩转jQuery EasyUI Layout组件

简单介绍:

说明: ($.fn.layout)布局,依赖panel和resizable,默认分为5个区东east,西west,南south,北north,中center,中间的区域面板是必须的,边缘区域面板是可选的,每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板.布局可嵌套,因此用户可建立复杂的布局.

基础用法:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<div id="l" class="easyui-layout">

<div data-options="region:'east',width:100,title:'east title'"></div>

<div data-options="region:'west',width:200,title:'west title'"></div>

<div data-options="region:'south',width:100,height:100,title:'south title'"></div>

<div data-options="region:'north',width:100,height:100,title:'north title'"></div>

<div data-options="region:'center',title:'center title'">

<div id="ll" class="easyui-layout" data-options="fit:true">

<div data-options="region:'west',title:'sub west title',width:200"></div>

<div data-options="region:'center',title:'sub center title',collapsed:true"></div>

</div>

</div>

</div>

<script src="js/jquery-easyui/jquery.min.js"></script>

<script src="js/jquery-easyui/jquery.easyui.min.js"></script>

<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">

body {

padding: 0;

margin: 0;

}

</style>

<script type="text/javascript">

var width = $(document).width();

var height = $(document).height();

$('#l').layout({

width: width,

height: height,

});

</script>

布局属性:

fit -> boolean

说明: 当设置为true时,就设置布局的尺寸适应它的父容器,当在body标签上创建布局时,它将自动最大化到整个页面的全部尺寸

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<body class="easyui-layout" data-options="fit:true">

<div data-options="region:'east',width:100,title:'east title'"></div>

<div data-options="region:'west',width:200,title:'west title'"></div>

<div data-options="region:'south',width:100,height:100,title:'south title'"></div>

<div data-options="region:'north',width:100,height:100,title:'north title'"></div>

<div data-options="region:'center',title:'center title'">

<div id="ll" class="easyui-layout" data-options="fit:true">

<div data-options="region:'west',title:'sub west title',width:200"></div>

<div data-options="region:'center',title:'sub center title',collapsed:true"></div>

</div>

</div>

<script src="js/jquery-easyui/jquery.min.js"></script>

<script src="js/jquery-easyui/jquery.easyui.min.js"></script>

<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

</body>

布局接口:

resize -> function

说明: 设置面板尺寸并且做布局,需要传入包含width/height/left/top的对象

panel -> function

说明: 返回指定面板,需要传递region参数,参数支持north,south,east,west,center

collapse -> function

说明: 折叠指定的面板,需要传递region参数,参数支持north,south,east,west,center

expand -> function

说明: 展开指定的面板,需要传递region参数,参数支持north,south,east,west,center

add -> function

说明: 添加一个指定的面板,options参数一个配置对象

remove -> function

说明: 移除指定的面板,需要传递region参数,参数支持north,south,east,west,center

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<body class="easyui-layout" data-options="fit:true">

<div data-options="region:'east',width:100,title:'east title'">

</div>

<div data-options="region:'west',width:200,title:'west title'"></div>

<div data-options="region:'south',width:100,height:100,title:'south title'">

</div>

<div data-options="region:'north',width:100,height:100,title:'north title'">

<div>

<fieldset>

<legend>操作区</legend>

<a href="#" class="easyui-linkbutton" onclick="javascript:westLoad(this);">左侧加载远程数据</a>

<a href="#" class="easyui-linkbutton" onclick="javascript:westCollapse(this);">左侧面板缓慢合并</a>

<a href="#" class="easyui-linkbutton" onclick="javascript:westExpand(this);">左侧面板缓慢展开</a>

<a href="#" class="easyui-linkbutton" onclick="javascript:centerRemove(this);">删除中间左边面板</a>

<a href="#" class="easyui-linkbutton" onclick="javascript:centerAdd(this);">添加中间左边面板</a>

</fieldset>

</div>

</div>

<div data-options="region:'center',title:'center title'">

<div id="ll" class="easyui-layout" data-options="fit:true">

<div data-options="region:'west',title:'sub west title',width:200"></div>

<div data-options="region:'center',title:'sub center title',collapsed:true"></div>

</div>

</div>

<script src="js/jquery-easyui/jquery.min.js"></script>

<script src="js/jquery-easyui/jquery.easyui.min.js"></script>

<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

function westLoad(that) {

var $wpanel = $('body').layout('panel', 'west');

$wpanel.panel({

extractor: function(data){

var h = '<ul>';

var d = JSON.parse(data);

for(var i=0; i<d['total']; i++){

h += '<li><a href="#">' + d['rows'][i]['name'] + '</a></li>'

};

h += '</ul>';

return h;

},

});

$wpanel.panel('refresh', '/easyui/data.json');

};

function westCollapse(that){

$('body').layout('collapse', 'west');

};

function westExpand(that){

$('body').layout('expand', 'west');

};

function centerRemove(that){

$('#ll').layout('remove', 'west');

};

function centerAdd(that){

$('#ll').layout('add', {region:'west',title:'sub west title',width:200})

};

</script>

</body>

面板扩展:

title -> string

说明: 布局面板的标题文本.

region -> string

说明: 定义布局面板的位置,其值可以为north,south,east,west,center

border -> boolean

说明: 当设置为true时,就显示布局面板的边框

split -> boolean

说明: 当设置为true时,就显示拆分栏,用户可以改变面板的尺寸.

iconCls -> string

说明: 当面板头部显示一个图表的css class

href -> string

说明: 从远程站点加载数据的url

collapsible -> boolean

说明: 定义是否显示可折叠按钮.

minWidth -> number

说明: 面板的最小宽度

maxWidth -> number

说明: 面板的最大宽度

minHeigit -> number

说明: 面板的最小高度

maxHeight -> number

说明: 面板的最大高度

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~

带你玩转jQuery EasyUI Layout组件

本文出自 “满满李 - 运维开发之路” 博客，请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1898966

转载于:https://my.oschina.net/learnbo/blog/847537