JQuery EasyUI 之Layout布局组件小Demo

发布时间:2019-03-14 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了JQuery EasyUI 之Layout布局组件小Demo脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

简介:jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。让Java后台开发的程序猿可以快速的做出漂亮的前端系统页面,极大减少系统对前端的依赖,只需专心做系统的业务逻辑实现即可。


代码:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Layout布局组件</title>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/Themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/Themes/icon.css" />
</head>
<body>
<div id="box" style="width:600px;height:400px;">
	<div data-options="
		region:'north',title:'上北',border : true,split : true,iconCls : 'icon-save',href : 'content.html',collapsible : false,maxHeight : 100," style="height:200px;"></div>
	<div data-options="region:'south',title:'下南'," style="height:100px;"></div>
	<div data-options="region:'west',title:'左西'," style="width:100px;"></div>
	<div data-options="region:'east',title:'右东'," style="width:100px;"></div>
	<div data-options="region:'center',title:'中间'"></div>
</div>
</body>
</html>

index.js

$(function () {

	$('#box').layout({
		//fit : true,});
	
	/*
	$(document).click(function () {
		$('#box').layout().css('display','block');
		$('#box').layout('resize');
	});
	
	
	//console.log($('#box').layout('panel','north'));
	//console.log($('#box').layout('collapse','north'));
	//console.log($('#box').layout('expand','north'));
	
	$('#box').layout('add',{
		title : '中间',region : 'center',});
	*/
	$('#box').layout('remove','east');    //删掉右边的布局
	

});

页面:

总结

以上是脚本之家为你收集整理的JQuery EasyUI 之Layout布局组件小Demo全部内容,希望文章能够帮你解决JQuery EasyUI 之Layout布局组件小Demo所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:easyui