[Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面 (转)
转自:http://www.cnblogs.com/ywqu/archive/2009/09/02/1558423.html
关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/ ,目前国内很多网站也在使用此插件,希望大家有时间了试用一下。
今天突然发现了一个更加轻量级的,功能更加丰富的 Jquery Tab插件。先展示一下其功能;
1、简单配置一下就可以实现如下效果:
http://flowplayer.org/tools/demos/tabs/index.html
2、扩展CSS样式就可以定做自己的tabs
/* alternate colors: skin2 */
ul.skin2 a {
background-color:#89a;
color:#fff !important;
}
/* mouseover state */
ul.skin2 a:hover {
background-color:#678;
}
/* active tab */
ul.skin2 a.current {
background-color:#4F5C6A;
border-bottom:2px solid #4F5C6A;
}
/* tab pane with background gradient */
div.skin2 div {
color:#fff;
background:#234 url(/img/global/gradient/h300.png) repeat-x scroll 0 -50px;
min-height:200px;
}
效果如下:
http://flowplayer.org/tools/demos/tabs/skins.html
3、只是浏览器的【前进】和【后退】
![](/assets/blank.gif)
![](/assets/blank.gif)
$(function() { $("ul.css-tabs").tabs("div.css-panes > div", {history: true}); });
效果如下:
http://flowplayer.org/tools/demos/tabs/history.html
4.通过Ajax调用每个Tab的内容,只有第一次点击Tab按钮的时候 调用Tab页内容
使用非常简单,效果如下:
http://flowplayer.org/tools/demos/tabs/ajax.html
5、Tab向导,比如形成购物车订单过程
完善个人信息->修改购物车商品->查看订单
效果如下:http://flowplayer.org/tools/demos/tabs/wizard.html
此种功能特别有用。
6、其他的还有手风琴效果,自己发掘吧,显示地址如下:
http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html
此插件的下载地址如下:
http://flowplayer.org/tools/download.html
jquery.tools.min.js是一个UI功能包,还包括其他的一个UI特效
Tooltip :很不错的提示功能插件
Scrollable :滚动效果插件
Overlay :很好用的遮罩层插件
Expose :背景变暗效果
转载于:https://www.cnblogs.com/ziyouyong/archive/2009/12/31/1636864.html
[Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面 (转)相关推荐
- 240多个jQuery常用到的插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- html树插件,推荐8款jQuery轻量级树形Tree插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- html5 jquery paint plugin,制作高质量的JQuery Plugin 插件的方法
JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插 ...
- jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
- 20+ 个很棒的 jQuery 文件上传插件或教程(此文值得“推荐”和“收藏”)
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload ...
- 13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式 本地集成 远程集成 jQuery笔记目录 JS的问题? onload ...
最新文章
- E8.Net 2005工作流平台版本发布
- 如何快速取消所有文件夹共享?进来瞧瞧
- hibernate开发错误及解决办法
- BZOJ2821: 作诗(Poetize)
- 待发箱outbox空间已满
- flume监控一个文件实时采集新增的数据输出到控制台
- 刷抖音18.5G、看视频22.5G,国美通报员工上班摸鱼:回应来了
- mysql 单向自动同步_mysql单向自动同步
- 你不可不知道的CSS水平+垂直居中方案大全
- 对抗神经网络对抗攻击_您将如何检测针对神经网络的网络攻击?
- 计算机二级lookup函数,LOOKUP函数用法全解(下)——LOOKUP函数的二分法原理
- 三年级计算机课标,三年级信息技术教案上册
- 远程过程调用失败而且未执行怎么办
- R语言的graphics画图功能
- 手动开启/关闭macOS HiDPI,让2k显示器完美适配macOS,解决紫屏问题
- 华为平板鸿蒙发布,华为新款平板与P50一同发布!有望搭载鸿蒙系统
- 如何查看win10专业版是否永久激活
- css 设置容器高度等于宽度,设置容器的宽高一致。
- 别再花时间统计考勤数据了,这个报表统计神器才是你最后出路
- 海康设备网络SDK开发NET_DVR_GetDeviceConfig
热门文章
- vim-python j教程_实践Vim配置python开发环境
- c语言中去掉最小值,2020-07-12(C语言)从顺序表中删除具有最小值的元素(假设唯一)并由函数返回被删除元素的值。空出的位置由最后一个元素填补,若顺序表为空则显示出错信息并退出运行。...
- mysql中文版下载_mysql数据库下载
- 最大流matlab代码,计算最小费用最大流MATLAB源代码.doc
- 巧用Notepad++代码粘贴功能
- 习题3.8 符号配对 (20分)
- 吴恩达深度学习2.1练习_Improving Deep Neural Networks_Gradient Checking
- linux下部署jdk+Tomcat
- 错误:Failed to start component [StandardEngine[Catalina].StandardHost[local
- TextView跑步灯效果及在特殊情况下无效的解决方式