当前位置：文档之家 › jQuery-EasyUI基础教程之创建复杂布局

jQuery-EasyUI基础教程之创建复杂布局

  • 格式：docx
  • 大小：103.33 KB
  • 文档页数：5
19.<textareastyle"0100100"></textarea>
20.</div>
21.<divregion"center"border"false"></div>
22.</div>
23.</div>
24.</div>
25.</div>
26.</div>
27.</div>
28.</body>
14.</div>
15.<divregion"center"border"false"style"1px#ccc;">
16.<divclass"easyui-layout"fit"true">
17.<divregion"south"split"true"border"false"
18.style"60px">
jQuery-EasyUI基础教程之创建复杂布局
课程目标
可以灵活使用Layout完成各种布局
复杂布局
案例一：
实现如下效果：
代码如下：
1.<bodyclass"easyui-layout">
2.<divdata-options"region:'north',split:false,border:false,iconCls:'icon-add',href:'topLayout04.html',collapsible:false"style"20px"></div>
3.<divdata-options"region:'west',title:'树形菜单',border:false,split:true"style"30px10px200px#EAFDFF;">
4.
5.</div>
6.<divdata-options"region:'center',border:false">
9.</div>
10.<divregion"center"border"false">
11.<divclass"easyui-layout"fit"true">
12.<divregion"east"border"false"class"p-right">
13.<imgsrc"../images/msn.gif"/>
相信通过以上两个综合案例，大家可以很好的掌握Layout的使用。
本文来源：蓝桥软件学院
7.<divclass"easyui-layout"dat;
8.<divdata-options"region:'north',split:true,border:false"style"200px30px10px">
9.
10.</div>
11.<divdata-options"region:'center',border:false"style"30px10px">
14.
15.
16.
17.
18.1px#ccc;
19.0
20.150px
21.#fafafa;
22.10px
23.
24.</style>
HTML代码如下：
1.<bodystyle"">
2.<h1></h1>
3.<divclass"easyui-panel"title"Complex Panel Layout"
12.
13.</div>
14.</div>
15.</div>
16.</body>
实现效果如下：
案例二：
实现如下效果：
CSS代码如下：
1.<style>
2.
3.#fafafa;
4.5px
5.1px#ccc;
6.0
7.
8.
9.
10.
11.300px
12.1px#ccc;
13.#fff url('images/search.png') no-repeat right bottom;
4.iconCls"icon-search"collapsible"true"
5.style"5px500px250px">
6.<divclass"easyui-layout"fit"true">
7.<divregion"north"border"false"class"p-search">
8.<label></label><input></input>

合集下载

jquery-easy-ui解析

jquery-easy-ui解析

$("#myDiv").panel("setTitle", "设置title");
四、布局LAYOU
广州传智播客
4.1、EASYUI布局-LAYOUT
在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式， 创建layout布局的方式如下:
<div style="width: 500px; height: 700px;" class="easyui-layout"> <div data-options="region:'north'" style="height: 50px; width: 500px;">这 是一个北部面板</div> <div data-options="region:'south'" style="height: 50px">这是一个南部面 板</div> <div data-options="region:'west'" style="width: 100px">这是一个西部面板 </div> <div data-options="region:'east'" style="width: 100px">这是一个北东部面 板</div> <div data-options="region:'center'">这是一个中间面板</div> </div>
前端入门培训教程 jquery easyui入门教程

前端入门培训教程 jquery easyui入门教程

前端入门培训教程jqueryeasyui入门教程今天讲解一下，jqueryeasyui组件的初始化原理：1、Jqueryeasyui对htm的dom节点进行初始化有两种方式：第一种是直接在<script>标签中用jquery选择器获取相应的节点，然后调用Jqueryeasyui的初始化函数，函数的第一个参数是一个对象。

这个对象中配置了组件的属性以及事件，当然这些都是有选择性的。

例如：<script type="text/script">$(function(){$("#edit_win").window({title:'编辑窗口',closed:true,iconCls:'icon-edit',width:123,height:123,onClose:function(){}});});</sript>其中edit_win是一个事先定义好的一个html标签的id。

此处特别要提出的是组件初始化的时候，组件的属性配置不仅可以放置于初始化函数中，也可以配置在相应id标签中作为标签的属性。

例如：<script type="text/script">$(function(){$("#edit_win").window({closed:true,width:123,height:123,onClose:function(){}});});</sript><div id="edit_win" title="编辑窗口" iconCls="icon-edit"></div>第二种种是在html代码中在某些特定的标签中，添加class="easyui-组件名"来对其进行初始化渲染。

JQueryEasyUi（Tree树）详解（转）

JQueryEasyUi（Tree树）详解（转）

JQueryEasyUi（Tree树）详解（转）第⼀讲：JQuery Easy Ui到底是什么呢？⾸先咱们知道JQuery是对Java Script的封装，是⼀个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

JQuery ui是在jQuery的基础上，利⽤jQuery的扩展性，设计的插件。

那么JQuery Easy Ui到底是什么呢？我的理解就是⽐JQuery ui更强⼤，同样都是实现绚丽的多功能效果！jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。

当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合，包括功能强⼤的 datagrid（数据⽹格）、treegrid（树形表格）、 panel（⾯板）、combo（下拉组合）等等。

⽤户可以组合使⽤这些组件，也可以单独使⽤其中⼀个。

其实就这么简单，对某个事物的定义，个⼈感觉没有什么固定的答案，只是那种答案更⽅便你的记忆，你记住的，它存在你深深的脑海⾥的，便是答案！JQuery Easy Ui插件列表如下：分类插件Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框Layout（布局）Panel ⾯板Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局Menu（菜单）与 Button（按钮）Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮Form（表单）Form 表单Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块Window 窗⼝Window（窗⼝）Window 窗⼝Dialog 对话框Messager 消息框DataGrid（数据⽹格）与Tree（树）Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树Treegrid 树形⽹格但是今天咱们只针对Tree（树）连接数据进⾏讲解！下⾯是它的⼀些基本的属性：id: 绑定到节点的标识值；text:显⽰⽂本；iconCls: 显⽰icon的css样式；checked: 节点是否选中；state: 节点状态, 'open' 或者 'closed'；attributes: 绑定到节点的⾃定义属性；target: ⽬标 DOM 对象；children: ⼀个节点数组,定义⼀些⼦节点。

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍初识Jquery EasyUI看了⼀些博主⽤其开发出来的项⽬，页⾯很炫，感觉功能挺强⼤，效果也挺不错，最近⼀直想系统学习⼀套前台控件，于是在⽹上找了⼀些参考⽰例。

写了⼀些基本的增删改查功能，算是对该控件的基本⼊门。

后续有时间继续深⼊学习。

先看⼀下运⾏后的页⾯1、列表展⽰2、新增页⾯3、修改页⾯把jquery easyui下载好之后，⼀般引⽤下页⼏个⽂件复制代码代码如下:<link href="/Resources/easyui/css/default.css" rel="stylesheet" type="text/css" /><link href="/Resources/easyui/js/themes/default/easyui.css" rel="stylesheet"type="text/css" />//页⾯图标样式<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/Resources/easyui/js/jquery-1.7.2.min.js" type="text/javascript"></script>//jquery easyui主要的js<script src="/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>⾸先是列表展⽰数据复制代码代码如下:<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"url="/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"fitcolumns="true" singleselect="true"><thead><tr><th field="AccountCode" width="50">编号</th><th field="AccountName" width="50">卡名</th><th field="AccountPwd" width="50">密码</th><th field="CreateTime" width="50">创建时间</th><th field="CreateName" width="50">创建⼈</th></tr></thead></table>jquery easyui是⽤datagrid对数据进⾏展⽰的，所以class要选择easyui-datagrid；url是本列表的⼀个json格式的数据来源toobar后⾯跟着的"#toobar"是列表的⼀个⼯具栏，本⽰例在列表上显⽰的是添加，修改，删除功能按钮对数据进⾏操作。