jQuery组件easyui基本布局实现代码


Posted in Javascript onAugust 25, 2016

本文实例为大家分享了

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic Layout - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>基本布局</h2>
 <p>布局包括北,南,东,西,中间,部分</p>
 <div style="margin:20px 0;"></div>
 <div class="easyui-layout" style="width:700px;height:350px;">
 <div data-options="region:'north'" style="height:50px"></div>
 <div data-options="region:'south',split:true" style="height:50px;"></div>
 <div data-options="region:'east',split:true" title="东" style="width:100px;"></div>
 <div data-options="region:'west',split:true" title="西" style="width:100px;"></div>
 <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
  <table class="easyui-datagrid"
   data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
  <thead>
   <tr>
   <th data-options="field:'itemid'" width="80">Item ID</th>
   <th data-options="field:'productid'" width="100">Product ID</th>
   <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
   <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
   <th data-options="field:'attr1'" width="150">Attribute</th>
   <th data-options="field:'status',align:'center'" width="60">Status</th>
   </tr>
  </thead>
  </table>
 </div>
 </div>

</body>
</html>

效果图:

jQuery组件easyui基本布局实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
JavaScript网页定位详解
Jan 13 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
AngularJS语法详解
Jan 23 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 #Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 #Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 #Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 #Javascript
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python+OpenCV实现图像拼接
2020/03/05 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
六查六看自检自查剖析材料
2014/10/14 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
品质保证书格式
2015/02/28 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang