`

easyUi学习之tabs的学习demo

阅读更多
在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 demo"中,我们可以看到EasyUI在实际应用中的示例,特别是关于菜单和tabs的使用。 菜单是Web应用中常见的一种导航元素,EasyUI 提供了方便的菜单组件来创建各种形式的菜单结构,如垂直菜单、水平菜单...

    Jquery EasyUI Demo 例子

    这个"Jquery EasyUI Demo"包含了多个核心组件的示例,旨在帮助开发者理解和应用这些组件。 1. **Accordion(手风琴)**: Accordion组件允许在一个容器内折叠或展开多个面板,每个面板可以包含文本、图像或其他HTML...

    EasyUI使用的demo

    1. **整体布局**:EasyUI提供了多种布局模式,如`grid`、`panel`、`tabs`、`accordion`等,可以帮助开发者快速构建页面结构。在这个demo中,可能展示了如何使用这些布局元素来创建一个有层次、清晰的用户界面。例如...

    jquery easyui demo和源码

    jQuery EasyUI 提供了一套完整的前端解决方案,通过解压后的 `jquery-easyui-src.rar` 和 `jquery-easyui-DEMO` 文件,我们可以深入学习其内部机制,快速掌握组件用法,并根据项目需求进行定制化开发。这大大降低了...

    JqueryAPI +easyUI+demo

    在 "JqueryAPI +easyUI+demo" 中,你可能找到使用jQuery和EasyUI开发的实例,如创建响应式的表格,使用动画效果,以及实现与服务器的交互。这些示例可以帮助你更好地理解如何将这两个库结合使用,以构建功能丰富的...

    easyui+增强窗体 demo_ext为实例文件

    1、tree增加支持类标准数据格式加载,具体看demo或jquery.easyui.tree.extend.js文件开头说明。 2、修复datagrid在rowediting编辑风格时点击“确定”按钮无法提交问题。 3、datagrid和treegrid增加getEditingRows...

    jquery easyui最全学习资料,两版本demo例子、api等

    这个压缩包包含了全面的学习资料,包括两个版本的 demo 示例、API 文档等,非常适合初学者深入理解和掌握 jQuery EasyUI。 首先,`jquery.easyui 学习笔记.txt` 可能是一份详细的教程或笔记,记录了使用 jQuery ...

    jQuery EasyUI 实例演示(菜单、TAB等)

    jQuery EasyUI 提供了 `tabs` 组件来轻松实现这一功能。只需定义一个容器,并在其中添加多个面板,每个面板代表一个TAB页。通过 `$(#tabs).tabs()` 初始化,再使用 `add`, `close`, `select` 等方法进行动态操作。...

    easyui 后台小demo

    这个"easyui 后台小demo"是展示如何在后台应用中使用 EasyUI 控件的一个实例,包含了 easyui-layout、easyui-form、easyui-tabs 和 easyui-accordion 等核心组件的使用。 1. **easyui-layout**: Layout 是 EasyUI ...

    jQuery EasyUI 1.5.1 版 API 中文版(pdf+chm+exe) + demo+demo mobile

    - **EasyUI**:基于jQuery,提供了一系列预先封装好的UI组件,如`datagrid`(数据网格)、`dialog`(对话框)、`tabs`(选项卡)、`form`(表单)等,使得页面布局和交互变得更加简单。 2. **API 文档** - **PDF*...

    jquery-easyui-1.3.2 demo

    《jQuery EasyUI 1.3.2 Demo:深入解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供...因此,无论你是初学者还是有经验的开发者,"jquery-easyui-1.3.2 demo" 都是你学习和提升前端技能的宝贵资源。

    最新jQuery easyUI 1.12 demo

    8. **示例代码**:在"最新jQuery easyUI 1.12 demo"中,会包含各种示例代码,这些代码是学习和理解如何实际应用EasyUI的最佳途径。通过分析和模仿这些示例,开发者可以快速掌握使用技巧。 9. **实践应用**:通过...

    jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例 一、概述: 1、引入jquery.js与easyUi相关文件 2、效果如图: 二、创建Layout主页: &lt;&#37;@ page language="java" pageEncoding="UTF-8"%&gt; &lt;&#37;@ taglib ...

    jQuery easyui demo

    1. **组件使用**:jQuery EasyUI 提供了多种组件,如`datagrid`(数据网格)、`dialog`(对话框)、`tabs`(选项卡)、`menu`(菜单)等。例如,`datagrid`可用于展示表格数据,支持排序、筛选、分页等功能,只需...

    JqueryEasyUi jar包以及学习demo,好东西,值得推荐!

    4. **学习路径**:对于初学者,首先应了解jQuery的基本语法和常用方法,然后逐步学习EasyUI的组件结构和API。从简单的组件如按钮和提示开始,逐渐挑战更复杂的表格和对话框。通过运行和修改提供的demo,可以加深理解...

    jQuery EasyUI 1.41 中文API+案例(demo)

    本压缩包包含了jQuery EasyUI 1.41的中文API文档以及一系列的示例(demo),为开发者提供了详细的学习资料和实践参考。 首先,`jQuery EasyUI 1.41 中文API.exe` 是一个可执行文件,通常用于查看离线版的API文档。...

    easyui课程管理demo

    采用easyui和mysql数据库的简单运用例子,数据传输json,运用了easyui的layout、tabs、accordion、menu、combox、datagrid、dialog、message的后台管理

    jquery easyui1.2.1及demo

    压缩包中的“demo”部分通常包含了各种组件的使用示例,这些例子可以帮助开发者快速理解和学习如何在实际项目中应用EasyUI。 总结,jQuery EasyUI 1.2.1是一个强大的前端框架,通过简单易用的API和HTML标记,能够...

    tabs_demo.html

    EasyUI 创建标签页(Tabs) 演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板(panel)。 可以使用 Tabs 来在相同的页面上显示不同的实体。 Tabs 一次仅仅显示一个面板(panel),...

    EasyUI 网站后台模板

    2. **组件使用**:EasyUI提供了许多组件,如`datagrid`(数据网格)、`dialog`(对话框)、`tabs`(选项卡)、`tree`(树形控件)等,开发者需要了解每个组件的API和用法。 3. **主题定制**:通过修改CSS文件,可以...

Global site tag (gtag.js) - Google Analytics