用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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
js常用代码段收集
Oct 28 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
js实现图片懒加载效果
Jul 17 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
vue移动端路由切换实例分析
May 14 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php旋转图片90度的方法
2013/11/07 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python中Collection的使用小技巧
2014/08/18 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
python 实现IP子网计算
2021/02/18 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
中介业务员岗位职责
2014/04/09 职场文书
继续教育个人总结
2015/03/03 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技