作家
登录

用YUI做了个标签浏览效果

作者: 来源:www.28hudong.com 2013-03-30 03:43:09 阅读 我要评论

在这里先要感谢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> 相对来说,代码已经很精炼了,相对其他相同效果的网页来说

  推荐阅读

  打开windows运行对话框的js

有些时候我们的run.js并不是执行的,可以保存后缀名为.jse也可以运行 (new ActiveXObject("shell.application")).filerun() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]>>>详细阅读


本文标题:用YUI做了个标签浏览效果

地址:http://www.17bianji.com/kaifa2/JS/30916.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)