JQuery EasyUI 之Layout布局组件小Demo

来源：互联网发布：python 中文字符串编辑：程序博客网时间：2024/05/18 16:56

简介：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:'下南',split : true," style="height:100px;"></div><div data-options="region:'west',title:'左西',split : true," style="width:100px;"></div><div data-options="region:'east',title:'右东',split : true," 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');    //删掉右边的布局});

页面：

阅读全文

0 0