各种效果的tab选项卡
;(function($){
$.fn.tabso=function( options ){
var opts=$.extend({},$.fn.tabso.defaults,options );
return this.each(function(i){
var _this=$(this);
var $menus=_this.children( opts.menuChildSel );
var $container=$( opts.cntSelect ).eq(i);
if( !$container) return;
if( opts.tabStyle=="move"||opts.tabStyle=="move-fade"||opts.tabStyle=="move-animate" ){
var step=0;
if( opts.direction=="left"){
step=$container.children().children( opts.cntChildSel ).outerWidth(true);
}else{
step=$container.children().children( opts.cntChildSel ).outerHeight(true);
}
}
if( opts.tabStyle=="move-animate" ){ var animateArgu=new Object(); }
$menus[ opts.tabEvent]( function(){
var index=$menus.index( $(this) );
$( this).addClass( opts.onStyle )
.siblings().removeClass( opts.onStyle );
switch( opts.tabStyle ){
case "fade":
if( !($container.children( opts.cntChildSel ).eq( index ).is(":animated")) ){
$container.children( opts.cntChildSel ).eq( index ).siblings().css( "display", "none")
.end().stop( true, true ).fadeIn( opts.aniSpeed );
}
break;
case "move":
$container.children( opts.cntChildSel ).css(opts.direction,-step*index+"px");
break;
case "move-fade":
if( $container.children( opts.cntChildSel ).css(opts.direction)==-step*index+"px" ) break;
$container.children( opts.cntChildSel ).stop(true).css("opacity",0).css(opts.direction,-step*index+"px").animate( {"opacity":1},opts.aniSpeed );
break;
case "move-animate":
animateArgu[opts.direction]=-step*index+"px";
$container.children( opts.cntChildSel ).stop(true).animate( animateArgu,opts.aniSpeed,opts.aniMethod );
break;
default:
$container.children( opts.cntChildSel ).eq( index ).css( "display", "block")
.siblings().css( "display","none" );
}
});
$menus.eq(0)[ opts.tabEvent ]();
});
};
$.fn.tabso.defaults={
cntSelect : ".content_wrap",
tabEvent : "mouseover_on",
tabStyle : "normal",
direction : "top",
aniMethod : "swing",
aniSpeed : "fast",
onStyle : "current",
menuChildSel : "*",
cntChildSel : "*"
};
})(jQuery);
<!--tab选项卡开始-->
<div class="orders-tab color_8e flaot_left">
<ul class="tabbtn" id="orders-normaltab">
<li class="current current-left" id="orders-current"></li>
<li>借物 <span>[3]</span></li>
<li>售卖其他产品</li>
<li>发票信息</li>
</ul><!--tabbtn end-->
<div class="tabcon flaot_left" id="normalcon">
<div class="sublist sublist-orders-remark">
<div class="orders-remark">
<textarea class="orders-remark-main"></textarea>
</div>
</div><!--tabcon end-->
<div class="sublist"> </div><!--tabcon end-->
各种效果的tab选项卡的更多相关文章
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- tab选项卡不同样式的效果
一般的tab选项卡就只能两种样式,一种是选中或者是划过这个选项卡样式,一种是没选中或者没划过选项卡样式. 现在有这种需求,就是选中或划过tab选卡要不同样式.比如tab1选中或者划过是红色,tab2选 ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 工作当中实际运用(1)——tab选项卡
不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...
随机推荐
- 记录一次项目中使用memcatch添加端口以及自动运行
具体原因:多个项目同时使用一个memcatch服务情况需要分别为项目添加端口,如果只有一个项目使用则不需要去修改端口(memcatch有默认端口),当然已可以去修改默认端口. 下面我记录下我自己的使用 ...
- SQLServer2005+附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法
SQLServer2005+ 附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 我们在用Sql SQLServer2005+附加数据库文件时弹出错误信息如下图的处理办法: 方案一: ...
- EF CodeFirst 如何通过配置自动创建数据库<当模型改变时>
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本篇为进阶篇,也是弥补自己之前没搞明白的地方,惭愧 ...
- 【转】SQLServerDBA十大必备工具---让生活轻松点
曾经和一些DBA和数据库开发人员交流时,问他们都用过一些什么样的DB方面的工具,大部分人除了SSMS和Profile之外,基本就没有使用过其他工具了: 诚然,SSMS和Profile足够强大,工作的大 ...
- Netty之有效规避内存泄漏
有过痛苦的经历,特别能写出深刻的文章 —— 凯尔文. 肖 直接内存是IO框架的绝配,但直接内存的分配销毁不易,所以使用内存池能大幅提高性能,也告别了频繁的GC.但,要重新培养被Java的自动垃圾回收惯 ...
- Ant安装、环境变量配置及验证
一.安装ant 到官方主页http://ant.apache.org下载新版(目前为Ant1.8.1)的ant,得到的是一个apache-ant-1.8.1-bin.zip的压缩包.将其解压到你的硬盘 ...
- sklearn Model-selection + Pipeline
1 GridSearch import numpy as np from sklearn.datasets import load_digits from sklearn.ensemble impor ...
- ECMAScript 6教程 (二) 对象和函数
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ .该系列课程是 ...
- delphi的webBrowser操作HTML研究
测试例子: 外网电脑D:\TEST\delphiTest\webbrowsetest 参考文档: delphi 操作WebBrowser 元素值 http://hi.baidu.com/kinglik ...
- Java面试题问与答——编译时与运行时
在开发和设计的时候,我们需要考虑编译时,运行时以及构建时这三个概念.理解这几个概念可以更好地帮助你去了解一些基本的原理.下面是初学者晋级中级水平需要知道的一些问题. Q.下面的代码片段中,行A和行B所 ...