在easyUi官网上下载的一个demo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
</script>
</head>
<body>
<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>
</body>
</html>
分享到：
相关推荐
在这个"easyui demo"中，我们可以看到EasyUI在实际应用中的示例，特别是关于菜单和tabs的使用。 菜单是Web应用中常见的一种导航元素，EasyUI 提供了方便的菜单组件来创建各种形式的菜单结构，如垂直菜单、水平菜单...
这个"Jquery EasyUI Demo"包含了多个核心组件的示例，旨在帮助开发者理解和应用这些组件。 1. **Accordion（手风琴）**: Accordion组件允许在一个容器内折叠或展开多个面板，每个面板可以包含文本、图像或其他HTML...
1. **整体布局**：EasyUI提供了多种布局模式，如`grid`、`panel`、`tabs`、`accordion`等，可以帮助开发者快速构建页面结构。在这个demo中，可能展示了如何使用这些布局元素来创建一个有层次、清晰的用户界面。例如...
jQuery EasyUI 提供了一套完整的前端解决方案，通过解压后的 `jquery-easyui-src.rar` 和 `jquery-easyui-DEMO` 文件，我们可以深入学习其内部机制，快速掌握组件用法，并根据项目需求进行定制化开发。这大大降低了...
在 "JqueryAPI +easyUI+demo" 中，你可能找到使用jQuery和EasyUI开发的实例，如创建响应式的表格，使用动画效果，以及实现与服务器的交互。这些示例可以帮助你更好地理解如何将这两个库结合使用，以构建功能丰富的...
1、tree增加支持类标准数据格式加载，具体看demo或jquery.easyui.tree.extend.js文件开头说明。 2、修复datagrid在rowediting编辑风格时点击“确定”按钮无法提交问题。 3、datagrid和treegrid增加getEditingRows...
这个压缩包包含了全面的学习资料，包括两个版本的 demo 示例、API 文档等，非常适合初学者深入理解和掌握 jQuery EasyUI。 首先，`jquery.easyui 学习笔记.txt` 可能是一份详细的教程或笔记，记录了使用 jQuery ...
jQuery EasyUI 提供了 `tabs` 组件来轻松实现这一功能。只需定义一个容器，并在其中添加多个面板，每个面板代表一个TAB页。通过 `$(#tabs).tabs()` 初始化，再使用 `add`, `close`, `select` 等方法进行动态操作。...
这个"easyui 后台小demo"是展示如何在后台应用中使用 EasyUI 控件的一个实例，包含了 easyui-layout、easyui-form、easyui-tabs 和 easyui-accordion 等核心组件的使用。 1. **easyui-layout**: Layout 是 EasyUI ...
- **EasyUI**：基于jQuery，提供了一系列预先封装好的UI组件，如`datagrid`（数据网格）、`dialog`（对话框）、`tabs`（选项卡）、`form`（表单）等，使得页面布局和交互变得更加简单。 2. **API 文档** - **PDF*...
《jQuery EasyUI 1.3.2 Demo：深入解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供...因此，无论你是初学者还是有经验的开发者，"jquery-easyui-1.3.2 demo" 都是你学习和提升前端技能的宝贵资源。
8. **示例代码**：在"最新jQuery easyUI 1.12 demo"中，会包含各种示例代码，这些代码是学习和理解如何实际应用EasyUI的最佳途径。通过分析和模仿这些示例，开发者可以快速掌握使用技巧。 9. **实践应用**：通过...
jQuery EasyUI Layout实现tabs标签的实例 一、概述： 1、引入jquery.js与easyUi相关文件 2、效果如图： 二、创建Layout主页： <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib ...
1. **组件使用**：jQuery EasyUI 提供了多种组件，如`datagrid`（数据网格）、`dialog`（对话框）、`tabs`（选项卡）、`menu`（菜单）等。例如，`datagrid`可用于展示表格数据，支持排序、筛选、分页等功能，只需...
4. **学习路径**：对于初学者，首先应了解jQuery的基本语法和常用方法，然后逐步学习EasyUI的组件结构和API。从简单的组件如按钮和提示开始，逐渐挑战更复杂的表格和对话框。通过运行和修改提供的demo，可以加深理解...
本压缩包包含了jQuery EasyUI 1.41的中文API文档以及一系列的示例（demo），为开发者提供了详细的学习资料和实践参考。 首先，`jQuery EasyUI 1.41 中文API.exe` 是一个可执行文件，通常用于查看离线版的API文档。...
采用easyui和mysql数据库的简单运用例子，数据传输json，运用了easyui的layout、tabs、accordion、menu、combox、datagrid、dialog、message的后台管理
压缩包中的“demo”部分通常包含了各种组件的使用示例，这些例子可以帮助开发者快速理解和学习如何在实际项目中应用EasyUI。 总结，jQuery EasyUI 1.2.1是一个强大的前端框架，通过简单易用的API和HTML标记，能够...
EasyUI 创建标签页（Tabs） 演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板（panel）。 可以使用 Tabs 来在相同的页面上显示不同的实体。 Tabs 一次仅仅显示一个面板（panel），...
在"02.html"中，可能包含了另外一种Tab布局或功能的示例，你可以参考其代码实现，或者结合"demo.html"进行扩展和学习。 至于"refresh.gif"，这可能是用来作为刷新图标展示在右键菜单的“刷新”选项旁边的。在实际...