用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 07 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
小程序实现列表倒计时功能
Jan 29 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
MySQL修改密码方法总结
2008/03/25 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
JavaScript Split()方法
2015/12/18 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
python映射列表实例分析
2015/01/26 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
tornado+celery的简单使用详解
2019/12/21 Python
python如何从键盘获取输入实例
2020/06/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
环境整治工作方案
2014/05/18 职场文书
语文课外活动总结
2014/08/27 职场文书
研究生导师推荐信
2014/09/06 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
祝酒词范文
2015/08/12 职场文书
2016中秋节问候语
2015/11/11 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python