`
stworthy
  • 浏览: 525654 次
  • 来自: ...
社区版块
存档分类
最新评论

另一个jQuery的Tab选项卡插件,很精致

    博客分类:
  • AJAX
阅读更多

项目地址:http://jquery-easyui.wikidot.com/tutorial:tabs

 

使用方法,只需准备选项卡的各个面板的div,设置选项卡容器class="easyui-tabs",插件就会自动将其转换。

 

	<div id="tt" class="easyui-tabs" style="width:500px;height:150px;">
		<div title="Tab1" style="padding:20px;display:none;"> This is Tab1.</div>
		<div title="Tab2" closable="true" style="padding:20px;display:none;"> This is Tab2 width close button.</div>
		<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> This is Tab3 width icon.</div>
		<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
			<iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>
		</div>
		<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
			<div class="easyui-tabs" style="height1:100px;width:100%;">
				<div title="子标题1">子内容1</div>
				<div title="子标题2">子内容2</div>
				<div title="子标题3">子内容3</div>
			</div>
		</div>
	</div>

转换后的效果图如下:


  • 大小: 11.3 KB
分享到:
评论
16 楼 LewJun 2012-10-09  
本来是来学习jeasyui的,却又学习了etmvc。
15 楼 suleil1 2009-12-26  
这种选项卡为什么老是有点击关闭的按钮呢?用户想要再show出来怎么办?
14 楼 peng_joy 2009-10-28  
支持,蛮不错的说
13 楼 120153216 2009-10-27  
不错,试下先
12 楼 ghyghoo8 2009-10-23  
这个我喜欢。貌似139邮箱就用的这个
11 楼 meizanchen 2009-10-23  
不错,收藏了。
10 楼 facingSun 2009-10-23  
不错,收藏了~~
9 楼 pokerwen 2009-10-22  
好东西,先收藏啦。。。
8 楼 cn-done 2009-10-22  
相当的有意思,咋感觉JQ在模拟EXT的路线
7 楼 whaosoft 2009-10-22  
看着不错呢 不过什么时候开源呢~!~
6 楼 lhx222 2009-10-22  
不错。看上去挺好用的。
5 楼 wst302 2009-10-22  
不错,正需要这种东西,学习了
4 楼 arkxu 2009-10-21  
不错。支持
3 楼 linkobe 2009-10-21  
楼上好头像~~~~~~~~
2 楼 turionboy 2009-10-21  
看起来很精致,兄弟协议改一下吧,能不能把东西打包一下方便下载。还有就是能不能把标签的角改成园角。
1 楼 mlw2000 2009-10-21  
GPL协议的,意味着用这个插件的话就要公布源代码

相关推荐

    可多次使用的jQuery tab选项卡插件.zip

    在本案例中,"可多次使用的jQuery tab选项卡插件.zip"是一个包含资源的压缩包,提供了可以重复利用的jQuery插件代码,用于创建功能完备、易于定制的选项卡功能。 首先,jQuery是一个轻量级的JavaScript库,简化了...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    - **js**:这个文件夹包含了JavaScript代码,包括jQuery库和可能的自定义脚本,如选项卡插件的核心功能实现和配置设置。 在实际应用中,开发者需要在`index.html`中引入jQuery库和选项卡插件的JS文件,并根据需求...

    jquery Tab 选项卡插件

    在网页开发中,jQuery Tab 选项卡插件是一种常见的用户界面元素,用于组织和展示大量信息,通过在有限的空间内切换不同的内容区域来提供良好的用户体验。这个插件基于流行的JavaScript库jQuery构建,使得创建功能...

    简易实用的jQuery Tab选项卡菜单插件

    **jQuery Tab选项卡菜单插件**是一种常见的网页交互元素,用于组织和展示多部分内容,如文本、图片或视频。在网页设计中,Tab组件能够帮助用户更有效地浏览和导航,提高用户体验。本插件以其简易实用的特点,成为...

    jquery tab选项卡插件滑动选项卡淡隐淡现选项卡

    在网页设计中,jQuery Tab选项卡插件是一个广泛使用的交互元素,它允许用户在一个有限的空间内展示多个内容区域,通过切换选项卡实现不同内容的显示。这种设计模式极大地提升了用户体验,尤其是在处理大量信息时,...

    jQuery tab选项卡切换插件和css3属性结合动画选项卡切...

    在网页设计中,jQuery Tab选项卡切换是一种常见的交互元素,用于组织和展示大量内容,而不会使页面显得拥挤。这个插件允许用户通过点击不同的标签来切换显示相应的内容区域,提高了用户体验。结合CSS3属性,我们可以...

    jquery tab选项卡插件tabSlideMove

    **jQuery Tab选项卡插件TabSlideMove详解** 在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量信息。jQuery库因其轻量级和强大的DOM操作能力,成为创建交互式选项卡插件的首选工具。本文将...

    jQuery Tab选项卡插件.zip

    jQuery Tab选项卡插件是一个广泛应用于网页开发中的交互组件,尤其适合展示多组内容而有限的页面空间。这款插件简化了实现动态切换不同内容区域的过程,为用户提供了一个直观、友好的界面。在本插件中,我们主要关注...

    慕课网jQuery插件开发之tab选项卡插件练习

    根据慕课网tab选项卡插件开发教程,自己做了稍微改动,当然作为jQuery插件,里面并没有扩展,也没有全局变量防止冲突处理,对于结构类名也没有做处理

    jQuery纵向tab选项卡内容切换代码.rar

    jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡...

    简单的jquery tab选项卡切换代码样式

    "简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡(Tab)的交互功能。选项卡是网页设计中常用的布局方式,它可以有效地组织和展示大量内容,提高用户体验。下面我们将详细...

    可多次使用jQuery tab选项卡插件.zip

    一款基于jQuery实现的选项卡特效,可在同一个网页页面多次使用的tab选项卡插件。 js代码 [removed][removed] [removed] $(function(){  function tabs(tabTit,on,tabCon){  $(tabTit).children().hover...

    带CSS3过渡动画效果的jQueryTabs选项卡插件

    在本文中,我们将深入探讨"带CSS3过渡动画效果的jQueryTabs选项卡插件",这是一个结合了jQuery和CSS3技术的高效、轻量级的选项卡解决方案。jQueryTab插件以其简洁的API、响应式设计和丰富的CSS3动画效果为特点,广泛...

    tab在底部的jquery tabs选项卡插件

    在这个项目中,"tab在底部的jquery tabs选项卡插件"是利用jQuery库实现的一种特殊的导航组件。 选项卡是一种常见的用户界面元素,用于组织和展示分段的内容。在这款插件中,选项卡被放置在页面的底部,这样的布局...

    jQuery实现定位滚动tab选项卡效果.zip

    一个Tab选项卡通常由两部分组成:选项卡导航(包含了各个选项卡的标题)和内容区域(每个选项卡对应的内容)。HTML代码可以这样编写: ```html &lt;div class="tab-nav"&gt; &lt;button class="tab active" data-tab="tab1...

    jquery tab选项卡插件世界杯专题选项卡自动切换代码

    本专题将聚焦于使用jQuery创建一个世界杯专题的选项卡插件,特别关注自动切换功能。这个插件能够让用户在不同的世界杯相关主题之间轻松浏览,而无需手动点击每个选项卡。 首先,选项卡插件的基础在于HTML结构。你...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能.zip

    本资源提供了一个轻量级的jQuery Tab插件,它具有多项实用功能,包括鼠标滑过、点击、自动切换以及数据回调等,极大地提升了用户体验和页面的互动性。 首先,我们来详细了解一下这些功能: 1. **鼠标滑过**:这个...

    jquery选项卡插件多种tab标签切换效果

    在"jquery选项卡插件多种tab标签切换效果"中,我们可以预期看到不同的切换动画和交互模式。 1. **基本选项卡实现**:最基础的选项卡实现通常会使用`&lt;ul&gt;`和`&lt;li&gt;`元素来创建选项卡头,`&lt;div&gt;`或者其他容器来包裹...

    jQuery TAB选项卡自动切换插件

    在网页设计中,jQuery TAB选项卡自动切换插件是一个非常实用的工具,它极大地提升了用户交互体验,使得网站内容组织更为清晰,用户可以更轻松地浏览和导航。本插件利用了JavaScript库jQuery的强大功能,结合CSS样式...

    jquery tab 选项卡

    8. 插件化开发:jQuery社区有许多成熟的选项卡插件,如jQuery UI的Tab组件,它们提供了更丰富的功能和定制选项,可以快速实现选项卡效果,减轻开发工作量。 9. 兼容性和响应式设计:在开发过程中,需要注意不同...

Global site tag (gtag.js) - Google Analytics