jQuery选项卡插件
html结构
- <ul id="tabs" class="tabs">
- <li data-tab="users">Users</li>
- <li data-tab="groups">Groups</li>
- </ul>
- <div id="tabsContent" class="tabsContent">
- <div data-tab="users" class="tab-item"> item1 </div>
- <div data-tab="groups" class="tab-item"> item2 </div>
- </div>
css样式
- .tabs{
- width:500px;
- height:30px;
- background:#eee;
- }
- .tabs li{
- float:left;
- width:250px;
- font:18px/30px "Microsoft YaHei";
- color:#333;
- text-align: center;
- cursor: pointer;
- }
- .tabs li.active{
- background:#0aa;
- }
- .tabsContent{
- width:498px;
- border:1px solid #888;
- }
- .tabsContent .tab-item{
- height:250px;
- width:100%;
- font-size: 45px;
- display: none;
- }
- .tabsContent .active{
- display: block;
- }
js脚本
- (function ($) {
- /*
- * jquery tabs 插件
- */
- $.fn.tabs = function (control) {
- var $element = $(this), // 切换的触点 li => tabs
- $control = $(control); // 切换的内容 tab-item => tabsContent
- // 委托li的点击事件
- $element.delegate("li", "click", function () {
- // li 对应的 data-tab属性值
- var tabName = $(this).attr("data-tab");
- $element.trigger("change.tab", tabName);
- });
- // change.tab 第一步:改变li.active
- $element.bind("change.tab", function (e, tabName) {
- $element.find("[data-tab]").removeClass("active");
- $element.find("[data-tab="+ tabName +"]").addClass("active");
- });
- // change.tab 第二步:改变tab-item.active
- $element.bind("change.tab", function (e, tabName) {
- $control.find("[data-tab]").removeClass("active");
- $control.find("[data-tab="+ tabName +"]").addClass("active");
- });
- // 激活第一个选项卡
- $element.trigger("change.tab", $element.find("li:first").attr("data-tab"));
- return this; // 返回链式调用
- };
- })(jQuery);
- // 基本示例
- $("#tabs").tabs("#tabsContent");
- /*
- * 应用扩展
- * 切换时将tabName写入hash
- * 当hashchange的时候触发tabs切换
- */
- // 当切换的时候,把tabName写入hash
- $("#tabs").bind("change.tab", function (e, tabName) {
- location.hash = tabName;
- });
- // 目前除了 ie67 外都原生支持 hashchange 事件
- $(window).bind("hashchange", function () {
- var tabName = location.hash.slice(1);
- $("#tabs").trigger("change.tab", tabName);
- });
jQuery选项卡插件的更多相关文章
- 【特效】jquery选项卡插件,页面多个选项卡统一调用
把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本 ...
- jQuery选项卡插件、Tabs插件
效果图: <!DOCTYPE html> <html> <head> <title></title> <script src=&quo ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- JQ实现选项卡(jQuery原型插件扩展)
下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
随机推荐
- 用Ultra ISO制作启动U盘装系统
用UltraISO制作启动U盘可以在没有光驱的情况下装系统. 现在有大容量U盘的越来越多,而且不装光驱的也越来越多. 那么用U盘装系统成为了可能和必须,不多废话了. 首先,需要准备的有: Ultra ...
- Hot OS'15 summary
My OS Ought to Know Me Better: In-app Behavioural Analytics as an OS Service Earlence Fernandes, U ...
- 磁盘测试工具fio
https://wiki.mikejung.biz/Benchmarking #blocksize This options determines the block size for the I/O ...
- AX函数,将EXCEL列号转为列名
str GetExcelColName( int i_col) { int j; str ret; int v_div,v_mod; str tmp1,tmp2; int i_col_ascii; ; ...
- C# 发送邮件方法2
一. 发送邮件程序:(使用System.Web.Mail下的类) "; //SMTP服务密码 strFrom = "jailu@163.com"; //发送方邮件地址 C ...
- Groovy轻松入门——通过与Java的比较,迅速掌握Groovy (更新于2008.10.18)
摘自: http://www.blogjava.net/BlueSUN/archive/2007/03/10/103014.html Groovy轻松入门--通过与Java的比较,迅速掌握Groovy ...
- No deleted LINE chat messages recovered on iOS 9.1 after UFED extraction
The evidence is iPhone 5s with iOS 9.1 and not jail breaked. I use UFED to do advanced logical extra ...
- 仿AS语法来写HTML5—第1章,显示一张图片
最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...
- Mysql连接测试代码
<?php $link=mysql_connect('localhost','root','htuidc'); if($link) echo "success"; ?>
- VS2008调试快捷键
F5: 启动调试 Ctrl+F5: 开始执行(不调试) F10: 逐过程(不进入函数单步) F11: 逐语句(进入函数单步) Shift+F11跳出(实用) Ctrl+F10: 运行到光标处 F6: ...