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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
JS验证不重复验证码
Feb 10 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jquery制作图片时钟特效
2020/03/30 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Django admin美化插件suit使用示例
2017/12/12 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
用python计算文件的MD5值
2020/12/23 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
软件测试题目
2013/02/27 面试题
大学自我鉴定
2013/12/20 职场文书
文明工地标语
2014/06/16 职场文书
个人授权委托书格式
2014/08/30 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
学会感恩主题班会
2015/08/12 职场文书
礼仪培训心得体会
2016/01/22 职场文书