用YUI做了个标签浏览效果


Posted in Javascript onFebruary 20, 2007

在这里先要感谢yahoo的工程师们无私的将他们的成果奉献出来——yui(yahoo! ui)
其实这是它自带的一个例子,我只是熟悉了一下,各种接口调用还是比较方便的
浏览:http://www.healdream.com/upload/html/tabview_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head> 
<title>TabView Test</title> 
<link rel="stylesheet" type="text/css" href="tabview1.css"> 
<link rel="stylesheet" type="text/css" href="border_tabs1.css"> 
<script type="text/javascript" src="yahoo.js"></script> 
<script type="text/javascript" src="dom.js"></script> 
<script type="text/javascript" src="event.js"></script> 
<script type="text/javascript" src="tabview.js"></script> 
<script type="text/javascript">    
var myTabs = new YAHOO.widget.TabView("demo");  
YAHOO.example.init = function() { 
    var tabView = new YAHOO.widget.TabView('demo'); 
    tabView.on('contentReady', function() { 
        obj=document.getElementById("nav"); 
        dest=obj.getElementsByTagName("li"); 
        for(var i=0;i<dest.length;i++){ 
            this.getTab(i).set('activationEvent', 'mouseover'); 
        } 
    }); 
}; YAHOO.example.init(); 
</script>   
<style> 
#demo{ 
border:1px solid #000000; 
width:40%; 
background-color:#c0c0c0; 
padding:5px; 
} 
.yui-navset.yui-content{ 
padding:10px; 
height:200px; 
} 
</style>    
<div id="demo" class="yui-navset">    
     <ul class="yui-nav" id="nav">    
         <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>    
         <li><a href="#tab2"><em>Tab Two Label</em></a></li>    
         <li><a href="#tab3"><em>Tab Three Label</em></a></li>    
     </ul>                
     <div class="yui-content">    
         <div><p>Tab One Content</p></div>    
         <div><p>Tab Two Content</p></div>    
         <div><p>Tab Three Content</p></div>    
     </div>    
</div> 

相对来说,代码已经很精炼了,相对其他相同效果的网页来说
Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 #Javascript
初探jquery——表单应用范例
Feb 20 #Javascript
动态调用css文件——jquery的应用
Feb 20 #Javascript
js压缩利器
Feb 20 #Javascript
通过jquery实现tab标签浏览效果
Feb 20 #Javascript
用jquery来定位
Feb 20 #Javascript
NiftyCube——轻松实现圆角边框
Feb 20 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python先序遍历二叉树问题
2017/11/10 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
对Python函数设计规范详解
2019/07/19 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
综合实践活动总结
2014/05/05 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
元旦趣味活动方案
2014/08/22 职场文书
法定代表人资格证明书
2014/09/11 职场文书
九九重阳节致辞
2015/07/31 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
GPU服务器的多用户配置方法
2022/07/07 Servers
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python