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> & ...
随机推荐
- django系列8.1--django的中间件01 自定义中间件的5个方法
一.Django中的中间件 Django中间件定义: Middleware is a framework of hooks into Django's request/response process ...
- web负载均衡【总结归纳所有看过的资料的理论】
web负载均衡 在有些时候进行扩展是显而易见的,比如下载服务由于带宽不足而必须进行的扩展,但是,另一些时候,很多人一看到站点性能不尽如人意,就马上实施负载均衡等扩展手段,真的需要这样做吗?当然这个问题 ...
- 常见的vue面试题
001.v-show与v-if的区别v-show:操作的是元素的display属性 v-if:操作的是元素的创建和插入相比较而言v-show的性能要高 002.methods.computed.wat ...
- LOJ#3084. 「GXOI / GZOI2019」宝牌一大堆（递推）
题面 传送门 题解 为什么又是麻将啊啊啊!而且还是我最讨厌的爆搜类\(dp\)-- 首先国士无双和七对子是可以直接搞掉的,关键是剩下的,可以看成\(1\)个雀头加\(4\)个杠子或面子 直接\(dp\ ...
- How to manage local libraries in IntelliJ IDEA
如何在 IntelliJ IDEA 中管理本地类库 一般来说,如果项目是基于 Maven 管理工具的,我们会在 pom.xml 中添加 dependency 来管理依赖.但有时也会遇到要用的类库不在 ...
- Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm Lorg/gradle/api/artifacts/ModuleIdentifier;
今天碰到一个问题, 正常的下载gradle到本地,然后到spring官网上通过他们提供的start.spring.io创建一个demo项目, 然后在idea中打开,并配置下载的gradle到idea中 ...
- ConcurrentHashMap相关知识点
ConcurrentHashMap涉及的知识点:HashMap,HashTable,UnSafe,CAS,数组+链表,Segment,ReentrantLock(非公平锁,公平锁),红黑树. 为什么要 ...
- 判断IE浏览器的版本号
function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...
- Bomb(要49)--数位dp
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submi ...
- 利用scrapy-client发布爬虫的远程服务器
一.环境准备 远程服务器必须装有scapyd,我们使用的机器必须有scrapy-client(我这里是windows),并确保这两者正常安装并启动. 二.客户端准备上传 首先进入到爬虫项目的根文件夹: ...