Jquery Easy UI初步学习(一)
Easy UI 1.3.2
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：
属性，事件，都可以直接写在data-options里面，这样就方便多了。
来自：http://easyui.btboys.com/the-use-of-easyui-data-options.html
Layout Panel
| 名称 | 类型 | 说明 | 默认值 |
| title | string | Layout panel 的标题文字。 | null |
| region | string | 定义 layout panel 的位置，其值是下列之一：north、south、east、west、center。 | |
| border | boolean | True 就显示 layout panel 的边框。 | true |
| split | boolean | True 就显示拆分栏，用户可以用它改变panel 的尺寸。 | false |
| iconCls | string | 在panel 头部显示一个图标的CSS 类。 | null |
| href | string | 从远程站点加载数据的 URL 。 | null |
然后找到EasyUi 中的Layout文件夹Full.html,打开代码如
| 名称 | 类型 | 说明 | 默认值 |
| title | string | 该Tab的标题文字。 | null |
| content | string | 该Tab面板内容 | null |
| href | string | 一个URL，加载远程内容以填充Tab面板。 | null |
| cache | boolean | 当true时，缓存Tab面板，当href 属性设置后有效 | true |
| icon | string | 增加一个CSS class图标以显示在Tab面板的标题旁。 | null |
| closable | boolean | 当true时，该Tab面板将显示可关闭按钮，点击能关闭该Tab面板。 | false |
| selected | boolean | 当true时，该Tab面板将被选中。 | false |
| width | int | 面板宽度，自动列宽。 | null |
| height | int | 面板高度，自动列高。 | null |
tabs的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<link href="../../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<link href="../../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<style type="text/css">
.panel-header,.layout-expand
{
background: linear-gradient(to bottom,#abd5c0 0,#abd5c0 100%);
}
.layout-expand .panel-body
{
background: linear-gradient(to bottom,#abd5c0 0,#abd5c0 100%);
}
.panel-header,.panel-body
{
border-color: #95B8E7;
}
li{ list-style-type: none;}
#menubar {
width: 100%;
}
#menubar p
{
width: 100%;
height: 35px;
background-color: green;
display: inline-block;
line-height: 35px;
padding: 0;
margin: 0;
text-align: center;
cursor: pointer;
}
.lab_sidebar {
display: none;
}
</style>
<script type="text/javascript">
$(function () {
$("#menubar").find("p").click(function () {
$(this).next().toggle("lab_sidebar"); });
});
function createFrame(url) {
var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>';
return s;
}
//添加选项
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,//标题
content: createFrame(url),
closable: true
});
} else {
$('#tabs').tabs('select', subtitle);
}
}
// 增加一个新的 tab panel
function addDiv() {
$('#tabs').tabs('add', {
title: 'New Tab',
content: 'Tab Body',
closable: true
});
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height: 60px; padding: 10px;background: linear-gradient(to bottom,#c4dabc 0,#abd5c0 100%);">
System Admin
</div>
<div data-options="region:'west',split:true,iconCls:'edit'" style="width: 150px; background-color:#abd5c0">
<div id="menubar">
<p>用户管理</p>
<ul>
<li><input type="button" value="添加Tabs" onclick="addDiv()"/></li>
<li>新增用户</li>
<li>新增用户</li>
<li><a href="javascript:void(0)" onclick="addTab(this.innerText,'http://www.baidu.com/')">百度一下</a></li>
</ul>
<p>团队管理</p>
<ul>
<li>用户管理</li>
<li>新增用户</li>
<li>新增用户</li>
<li><a href="javascript:void(0)" onclick="addTab(this.innerText,'http://www.cnblogs.com/')">博客园</a></li>
</ul>
<p>系统管理</p>
<ul>
<li>用户管理</li>
<li>新增用户</li>
<li>新增用户</li>
<li>新增用户</li>
</ul>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'east'" style="width: 100px;
padding: 10px;">
east region</div>
<div data-options="region:'south',border:false" style="height: 50px; background: #abd5c0;
padding: 10px;">
south region</div>
<div data-options="region:'center',border:false">
<div class="easyui-tabs" id="tabs" fit="true">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>Welcome to jQuery UI!</h1>
</div>
</div>
</div>
</body>
</html>
Jquery Easy UI初步学习(一)的更多相关文章
- Jquery Easy UI初步学习(三)数据增删改
第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo ...
- Jquery Easy UI初步学习(二)datagrid的使用
第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
随机推荐
- FusionCharts的使用方法 - 公司所用的flash式的图像统计工具
我们公司一直用这个图表统计, 最近整理了一下相关文档,提供大家学习. 首先可以看看 http://www.cnblogs.com/xuhongfei/archive/2013/04/12/301688 ...
- java中-的流-与操作
/* 字节输出流 OutputStrema: * OutputStream抽象类 * write(int b); 将指定的字节写入此流中 * write(byte[] b); ...
- P4145 上帝造题的七分钟2
题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段数中每个数都开平方(下取整)的操作. 第三分钟,k说,要能查询,于是便有了求一段 ...
- [php审计实战篇]BlueCms v1.6 Union注入
非常基础的代码审计练习,适合有php基础的审计新手练习 本文作者:Aedoo 来源:i春秋社区 0×01 代码跟踪 首先,进入首页代码 :index.php 包含了php文件:/include/com ...
- 完全卸载mysql数据库教程
转自:https://jingyan.baidu.com/article/f96699bbaa8fc1894f3c1b5a.html 1,控制面板——>所有控制面板项——>程序和功能,卸载 ...
- 【原】[UIImage imageWithContentsOfFile:]引发的图片无法显示的问题
最近在做一个iOS手机项目的时候,遇到一个奇怪的问题,这里跟大家分享一下. 一.问题重现 1.启动App后,通过http请求下载了一个1.jpg文件到Cache目录下,下载成功之后,将图片显示在界面上 ...
- php 内存分配新
https://yq.aliyun.com/articles/38307 https://yq.aliyun.com/ziliao/132720 http://blog.liyiwei.cn/%E3% ...
- 题目1002：Grading(简单判断)
问题来源 http://ac.jobdu.com/problem.php?pid=1002 问题描述 题目背景为高考试卷批改打分制度.对于每一道题,至少需要两位评审老师进行打分, 当两个老师的打分结果 ...
- 豆瓣电影信息爬取(json)
豆瓣电影信息爬取(json) # a = "hello world" # 字符串数据类型# b = {"name":"python"} # ...
- Android 4.4 KitKat终于支持录屏(Screen Recording)了！
本文介绍了Android 4.4 KitKat系统新增加的录屏功能以及录屏方法,和限制因素.如果App由于版权方面的原因,不想被记录屏幕录像的话,APP只需要在相应的SurfaceView请求“Sur ...