97 views

网站前端 基本介绍 0008 带你玩转jquery easyui布局组件?

By | 2019年8月4日

简单介绍:
说明:($.fn.layout)布局,依面板和可调整大小,默认为5个区域东、西、南、北、中、中、中的区域面板是必须的,边缘区域面板是可选择的,每个边缘区域面板可以通过边缘框调整尺寸,也可以通过点击折叠接触器来折叠面板。布局局可以嵌装,因此用户可建立复杂的布局。

基础用法:
<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>
<!– 说明: 加载jquery-easyui脚本文件 –>
<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标签上创建布局时,它会自动最大化整个页面的大小。

<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>
<!– 说明: 加载jquery-easyui脚本文件 –>
<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

<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>
<!– 说明: 加载jquery-easyui脚本文件 –>
<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

说明: 面板的最大高度

本文编辑于2019年08月4日,属于云漫网络原创内容,由特约作者(云漫网络安全技术员)首发在win-man.com,云漫网络每日更新发布行业原创内容,转载请注明出处。否则属侵权行为一定追究责任。

作者:云漫网络安全技术员
本文转载于:http://win-man.com
本文关键词:高防云,anti云,TTCDN

发表评论

电子邮件地址不会被公开。 必填项已用*标注