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> & ...
随机推荐
- Linux mint 安装踩坑记录
记得之前电脑上的那个Ubuntu是去年寒假的时候安装的,算下来自己用Linux也快一年了.虽然在去年暑假的时候我也曾经想过要把Ubuntu升级到18.04可是当时安装了几次都没有成功,自己也就放弃了. ...
- 【ocp-12c】最新Oracle OCP-071考试题库（43题）
43.(9-2)choose three Which three tasks can be performed by DDL statements? A) preventing data retrie ...
- java.lang.IncompatibleClassChangeError:可以考虑是否是jar包冲突
一.背景:启动tomcat的时候,报错: java.lang.IncompatibleClassChangeError: class org.springframework.core.type.cla ...
- python获取aliyun ECS实例
#!/usr/bin/env python #-*- coding:utf-8 -*- # Description : get ecs from aliyun # Author : quke # Da ...
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- 类型转换 / BOOL 类型
/* Swift不允许隐式类型转换, 但可以使用显示类型转换(强制类型转换) OC: int intValue = 10; double doubleValue = (double)intValue; ...
- Eclipse中的创建maven项目，无法添加src/main/java等source folder
maven无法添加src/main/java 通过Eclipse创建Java Web项目,目录结构如下: 默认是只有src/main/resources 这个source folder 按照maven ...
- springboot与swagger2的集成
springboot与swagger2的集成 1.出现的背景 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染变成了:前端渲染.先后端分离的形态,而前端和后端的唯一联系,变成了API接口: ...
- 基于wavesurfer.js的超大音频的渐进式请求实现
最近在对超大音频的渐进式请求实现上面消耗了不少时间,主要是因为一对音频的基本原理不太理解,二刚开始的时候太依赖插件,三网上这块的资料找不到只能靠自己摸索.由于交互复杂加上坑比较多,我怕描述不清,这里主 ...
- Go语言类型转换
类型转换用于将一种数据类型的变量转换为另外一种类型的变量. Go语言类型转换基本格式如下:表达式 T(v) 将值 v 转换为类型 T . Go语言各种类型转换及函数的高级用法:strconv包实现了基 ...