用YUI做了个标签浏览效果

孔雀夜叉王

孔雀夜叉王

2016-02-19 10:41

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的用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
titleTabView 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;idest.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"emTab One Label/em/a/li   
         lia href="#tab2"emTab Two Label/em/a/li   
         lia href="#tab3"emTab Three Label/em/a/li   
     /ul               
     div class="yui-content"   
         divpTab One Content/p/div   
         divpTab Two Content/p/div   
         divpTab Three Content/p/div   
     /div   
/div 

相对来说,代码已经很精炼了,相对其他相同效果的网页来说
展开更多 50%)
分享

猜你喜欢

用YUI做了个标签浏览效果

Web开发
用YUI做了个标签浏览效果

uc浏览器云标签怎么用

浏览器
uc浏览器云标签怎么用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用JS实现HTML标签替换效果

Web开发
用JS实现HTML标签替换效果

用JavaScript实现浏览器地震效果

电脑网络
用JavaScript实现浏览器地震效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

搜狗浏览器如何管理标签

浏览器
搜狗浏览器如何管理标签

360浏览器如何新建标签

手机软件 应用软件
360浏览器如何新建标签

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Ubuntu安装Texmaker常见问题汇总

Ubuntu安装Texmaker常见问题汇总

ajax 技术和原理分析

ajax 技术和原理分析
下拉加载更多内容 ↓