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> & ...
随机推荐
- 开源NFV管理器 - OpenStack Tacker介绍 NFV和Tacker介绍和主要功能
原文链接:https://blog.csdn.net/bc_vnetwork/article/details/51463518 1.NFV概述 NFV(网络功能虚拟化Network Function ...
- css--一些基本属性
关于css各标签的属性: w3cschool一应俱全 设置固定的图片: body { background-image: url(bgimage.gif); background-attachment ...
- shell脚本报错：-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory
当我们把文件从windows系统中编辑的文件拷贝到linux系统中,如果我们执行文件会保存如下的错: shell脚本报错:-bash: xxx: /bin/bash^M: bad interprete ...
- net项目总结一（1）
中小型新闻发布系统 代码结构:分为实体层,数据层与接口,数据工厂层,业务逻辑层,公共层,UI层(由于图片上传实在麻烦,所以只上传少量而已),项目中用到了工厂模式,解耦BLL层和DLL层 1.登录功能, ...
- canvas绘制五角星详细过程
canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document. ...
- [真题] 一道 vsftp 运维题
一道 vsftp 运维题 一.前言 在 V 站上凑巧看到了好友发的求助帖,五天时间一个理他的都没有.哈哈哈~ 废话不多说,我们来试试. 二.题目 这里我们假设存在这样的场景: 网络内有普通用户 ade ...
- iOS学习笔记（4）——显示单组件选取器
1. 创建工程 创建新工程,create a new Xcode project 创建single view application 创建名为PickerViewTest的工程 2. 创建xib文件 ...
- 【Python】解析Python的标准数据类型
目录结构: contents structure [-] 数值(Number) 数值类型 类型转化 Python中的Decimal数据类型 Python中的分数 Python中的算术方法 字符串(St ...
- python学习，day3：函数式编程，局部变量和全局变量
# coding=utf-8 # Author: RyAn Bi school = 'THU' #全局变量 def change_name(name): global age #在函数中,用globa ...
- Axis2 Web Service Development & Deployment Guide(Axis2使用)
主要内容: 记录关于Axis2的使用,通过WSDL文件生成Web service的客户端和服务器端的过程. 目录: Requirement(必备工具) Development - Client Gen ...