用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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
javascript测试题练习代码
Oct 10 Javascript
jquery常用操作小结
Jul 21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
electron实现静默打印的示例代码
Aug 12 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
5.PHP的其他功能
2006/10/09 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
班级体育活动总结
2014/07/05 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
运动会开幕词
2015/01/28 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL