用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实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
js实现京东轮播图效果
Jun 30 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
Javascript中的this,bind和that使用实例
Dec 05 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 字符串 小常识
2009/06/05 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php批量上传的实现代码
2013/06/09 PHP
php调用C代码的实现方法
2014/03/11 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python 图片去噪的方法示例
2019/07/09 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
小区门卫值班制度
2014/01/24 职场文书
小学毕业感言300字
2014/02/19 职场文书
幼儿园老师寄语
2014/04/03 职场文书
八项规定对照检查材料
2014/08/31 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
单位租房协议书样本
2014/10/30 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android