用YUI做了个标签浏览效果_javascript技巧

在这里先要感谢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> 

相对来说,代码已经很精炼了,相对其他相同效果的网页来说

时间: 2024-11-08 20:00:06

用YUI做了个标签浏览效果_javascript技巧的相关文章

基于Bootstrap实现tab标签切换效果_javascript技巧

本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script

javascript实现不同颜色Tab标签切换效果_javascript技巧

本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下 具体代码: <html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css">

JavaScript仿百度图片浏览效果_javascript技巧

本文实例为大家分享了js图片浏览效果的具体代码,供大家参考,具体内容如下 在线地址:http://www.hui12.com/nbin/demo/imgskim/index.html https://nbin2008.github.io/demo/imgskim/index.html 效果图: index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿

炫酷的js手风琴效果_javascript技巧

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不

纯css实现窗户玻璃雨滴逼真效果_javascript技巧

这里仅是用CSS技术来演示这样的一个场景,可能并不太实用.然而这是一个探索CSS新功能的最佳机会.可以让你尝试使用一些新特性和新工具.并且逐渐将在工作中实践.在制作窗口雨滴效果,将使用到HAML和Sass. 案例效果 查看演示  源码下载 看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊.咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果. 预处理器 在这个示例中,使用了HAML和Sass来替代我们熟悉的HTML和

JavaScript实现非常简单实用的下拉菜单效果_javascript技巧

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

JavaScript与jQuery实现的闪烁输入效果_javascript技巧

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果.分享给大家供大家参考,具体如下: html部分 <div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-14,I want to say:<br /> Baby, I love you forever

javascript运动框架用法实例分析(实现放大与缩小效果)_javascript技巧

本文实例讲述了javascript运动框架用法.分享给大家供大家参考,具体如下: 该运动框架可以实现多物体任意值运动 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red;

通过jquery实现tab标签浏览效果_jquery

效果和说明文档:http://www.healdream.com/upLoad/html/jquery/tabs/index_zh.html 下载:http://www.51files.com/?2LDPUOZ0F56P52ZLDNYD 之前通过yui也实现了相同的功能,但是yui有个比较大的缺点就是js文档太大了,一个tabview.js就有60k,再加上event.js也有近60k,实在是不能承受,之前一直没有发现这个问题,自从发现了jquery之后,就对这个小巧的轻量级的客户端工具有了好感