用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> 相对来说，代码已经很精炼了，相对其他相同效果的网页来说

　　推荐阅读

　　打开windows运行对话框的js

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

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

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

1/2 1