myFocus-tab v1.2 demo
Author:koen Date:2010.9.21 Blog:hi.baidu.com/koen_li
type:'none'
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
type:'slide'
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
type:'fade'
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
type:'slide',auto:true
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
支持无限嵌套
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
请稍候...- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
请稍候...- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
支持高度自适应设置height:'auto'
请稍候...
- 朋友
- 兄弟
- 亲人
- 情人
-
朋友朋友朋友
朋友朋友朋友
朋友朋友朋友
朋友朋友朋友
朋友朋友朋友
朋友朋友朋友
朋友朋友朋友
-
兄弟兄弟兄弟
-
亲人亲人亲人
-
情人情人情人
仿QQ今日要闻实例
请稍候...
- 新闻
- 财经
- 娱乐
- 体育
-
- 新闻左列表
- 新闻左列表
- 新闻左列表
- 新闻左列表
- 新闻中列表
- 新闻中列表
- 新闻中列表
- 新闻中列表
- 新闻右列表
- 新闻右列表
- 新闻右列表
- 新闻右列表
-
- 财经左列表
- 财经左列表
- 财经左列表
- 财经左列表
- 财经中列表
- 财经中列表
- 财经中列表
- 财经中列表
- 财经右列表
- 财经右列表
- 财经右列表
- 财经右列表
-
- 娱乐左列表
- 娱乐左列表
- 娱乐左列表
- 娱乐左列表
- 娱乐中列表
- 娱乐中列表
- 娱乐中列表
- 娱乐中列表
- 娱乐右列表
- 娱乐右列表
- 娱乐右列表
- 娱乐右列表
-
- 体育左列表
- 体育左列表
- 体育左列表
- 体育左列表
- 体育中列表
- 体育中列表
- 体育中列表
- 体育中列表
- 体育右列表
- 体育右列表
- 体育右列表
- 体育右列表
myFocus-tab的HTML结构
<div id="yourTabID"> <div class="loading"><span>请稍候...</span></div><!--载入画面--> <ul class="btn"><!--标题--> <li>标题1</li> <li>标题2</li> <li>标题3</li> <li>标题4</li> </ul> <ul class="cont"><!--内容--> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ul> </div>
myFocus-tab的调用和参数设置:
myFocus.setting({ style:'mF_tab',//风格样式(对这款tag来说这是固定的) id:'yourTabID',//绑定ID trigger:'click',//tab切换模式:'click'(点击切换)/'mouseover'(悬停切换,这模式下默认有100毫秒延迟) type:'slide',//切换效果:'none'(无效果)/'fade'(淡入效果)/'slide'(滑动效果) auto:false,//是否自动切换,true为自动,false为非自动 time:2,//自动切换模式下的切换时间间隔,单位秒 width:424,//宽(内容区),单位像素 height:61//高(内容区),单位像素,支持'auto'自适应设置 });
* 高级参数:其中有隐藏参数delay(mouseover模式中的延迟)、index(开始时显示tab序号,默认是0,即显示第一个tab),可自行添加设置
* 高级嵌套:由于IE和其他浏览器的JS引擎解释顺序不同(很蛋疼),如果用到tag嵌套则需要按顺序调用,上面demo已有具体例子,可参考使用,但注意一定要把嵌套tag调用放在其他非嵌套tag调用之前,否则在IE中无效!
* 此源文件为限制字数部分进行了压缩,想看清晰代码可以下载附件,如果遇到什么问题或任何意见可以直接在帖子中留言,谢谢大家支持!^^