用YUI做了个标签浏览效果

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

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

赞 (0)

相关推荐

  • 用YUI做了个标签浏览效果

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

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

    效果和说明文档: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之后,就对这个小巧的轻量级的客户端工具有了好感

  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

    类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体

  • android实现滑动标签页效果的代码解析

    实现效果: 实现功能: ViewPager+Fragment实现加载界面 SQLite数据获取并显示到ListView上 ListView的item监听并携带数据跳转到其他界面 使用SharedPreference存储部分测试数据 实现过程: 各方法和变量的作用请详见代码注释. listview的数据显示请见Android Studio获取SQLite数据并显示到ListView上Fragment+ViewParger实现界面加载 首先要创建两个类并继承Fragment,在viewpager中实

  • 如何简单地用YUI做JavaScript动画

    原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/ YUI的动画类简直就是一门艺术工作.不像其它的传统的JS库,提供了已经"预设好"的直接可运行的效果,相反,它由开发者做自己喜欢的.在这点,我比较喜欢适当地运行一些动画和变换效果,越多越好. 按照这么地说,也会有个问题.动画API是非常"底层"的工作,而且需要您花时间去弄的,子类的构

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • js实现的tab标签切换效果代码分享

    js实现的tab标签切换效果代码分享

    这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • Android UI控件之Gallery实现拖动式图片浏览效果

    Android UI控件之Gallery实现拖动式图片浏览效果

    我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过Gallery来实现拖动效果的. 通过Gallery可以实现各种各样的效果,此篇文章只是简要谈谈他的用法,至于后续的一些效果 有机会的时候做一个整理. 首先看看其简单实现吧!本次实例是通过选取图片实现类似设置背景的功能! 不过需要说明的是:图片不宜过大,否则容易内存溢出,android对大图片的支持不好

  • android LabelView实现标签云效果

    android LabelView实现标签云效果

    今天我们来做一个android上的标签云效果, 虽然还不是很完美,但是已经足够可以展现标签云的效果了,首先来看看效果吧. 额,录屏只能录到这个份上了,凑活着看吧.今天我们就来实现一下这个效果, 这次我选择直接继承view来, 什么? 这样的效果不是SurfaceView擅长的吗? 为什么要view,其实都可以了, 我选择view,是因为:额,我对SurfaceView还不是很熟悉. 废话少说, 下面开始上代码 public class LabelView extends View { priva

  • Android 自定义View结合自定义TabLayout实现顶部标签滑动效果

    最近需要做一个app,需要用到tablayout实现顶部的滑动,用到了自定义item,不过没有用到tabitem,贴出来供大家学习,先看图吧,觉得满意的继续往下面看 具体代码实现: 我直接贴啦,能说的不多 主布局: fragment_message.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.c

随机推荐