1. 利用滑動門做的TAB頁例子，用到 YUI框架
<textarea cols="90" rows="15" name="code" class="c-sharp"><html> <head> <mce:script type="text/javascript" src="./js/yui/yahoo/yahoo-min.js" mce_src="js/yui/yahoo/yahoo-min.js"></mce:script> <mce:script type="text/javascript" src="./js/yui/dom/dom-min.js" mce_src="js/yui/dom/dom-min.js"></mce:script> <mce:script type="text/javascript" src="./js/yui/event/event-min.js" mce_src="js/yui/event/event-min.js"></mce:script> <link href="reset.css" mce_href="reset.css" rel="stylesheet" type="text/css"/> <mce:script type="text/javascript"><!-- function select(flag,event){ if(flag=="short"){ var show = YAHOO.util.Dom.getElementsByClassName('longShow', 'div'); if(show){ YAHOO.util.Dom.removeClass(show,'longShow'); YAHOO.util.Dom.addClass(show,'shortShow'); } }else if(flag=="long"){ var show = YAHOO.util.Dom.getElementsByClassName('shortShow', 'div'); if(show){ YAHOO.util.Dom.removeClass(show,'shortShow'); YAHOO.util.Dom.addClass(show,'longShow'); } } var botton = YAHOO.util.Dom.getElementsByClassName('selected', 'li'); YAHOO.util.Dom.removeClass(botton,'selected'); var ev =event.srcElement ? event.srcElement : event.target; if(ev.tagName=='A'){ ev= ev.parentNode; } YAHOO.util.Dom.addClass(ev,'selected'); } function getFocus(event){ //支持了IE, FIREFOX var ev = event.srcElement ? event.srcElement : event.target; if(ev.tagName=='A'){ ev= ev.parentNode; } YAHOO.util.Dom.addClass(ev,'over'); } function lostFocus(event){ var ev = event.srcElement ? event.srcElement : event.target; if(ev.tagName=='A'){ ev= ev.parentNode; } YAHOO.util.Dom.removeClass(ev,'over'); } // --></mce:script> <mce:style><!-- .tab { width:450px; height:300px; border:1px; border-style:solid; border-color:#99BBE8; margin:100px; /* 複合屬性 border:1px solid #99BBE8; */ } .tab .head { height:45px; background-color:#DEECFD; border-bottom:1px solid #99BBE8; padding:0px; } .tab .head .button{ height:32px; /* background:url(images/line.gif) repeat-x bottom;*/ padding-top:6px; border-bottom:1px solid #99BBE8; } .tab .head .button .native{ background-color:#DEECFD; list-style:none; margin-left:10px; margin-top:1px; } .tab .head .button .native .unselected{ float:left; background:url(images/tabs-sprite-left.gif) no-repeat; margin-left:2px; background-position:left -50px; } .tab .head .button .native .unselected .link{ display:block; line-height:30px; background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right -49px; margin-left:10px; padding-right:20px; color:#15428B; outline: none; star:expression(this.onFocus=this.blur()); } .tab .head .button .native .over{ float:left; background:url(images/tabs-sprite-left.gif) no-repeat; background-position:left -100px; } .tab .head .button .native .over .link{ background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right -99px; } .tab .head .button .native .selected{ position:relative; top:1px; background:url(images/tabs-sprite-left.gif) no-repeat; background-position:left 0px; color:#15428B; font-weight:bold; } .tab .head .button .native .selected .link{ display:block; background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right 0px; /* padding-bottom:1px;*/ cursor:default; } body{ font-family:helvetica,tahoma,verdana,sans-serif; font-size:13px; } .tab .longShow { padding:10px; } .tab .longShow #long_text{ display:block; } .tab .longShow #short_text{ display:none; } .tab .shortShow { padding:10px; } .tab .shortShow #long_text{ display:none; } .tab .shortShow #short_text{ display:block; } .tab .head .button .native img{ float:right; position:absolute; top:12px; right:4px; src:url(images/img/close.gif) no-repeat; } .tab .head .button .native .close{ width:14px; position:absolute; top:1px; right:2px; background:url('img/close.gif') no-repeat 3px 4px; } --></mce:style><style mce_bogus="1"> .tab { width:450px; height:300px; border:1px; border-style:solid; border-color:#99BBE8; margin:100px; /* 複合屬性 border:1px solid #99BBE8; */ } .tab .head { height:45px; background-color:#DEECFD; border-bottom:1px solid #99BBE8; padding:0px; } .tab .head .button{ height:32px; /* background:url(images/line.gif) repeat-x bottom;*/ padding-top:6px; border-bottom:1px solid #99BBE8; } .tab .head .button .native{ background-color:#DEECFD; list-style:none; margin-left:10px; margin-top:1px; } .tab .head .button .native .unselected{ float:left; background:url(images/tabs-sprite-left.gif) no-repeat; margin-left:2px; background-position:left -50px; } .tab .head .button .native .unselected .link{ display:block; line-height:30px; background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right -49px; margin-left:10px; padding-right:20px; color:#15428B; outline: none; star:expression(this.onFocus=this.blur()); } .tab .head .button .native .over{ float:left; background:url(images/tabs-sprite-left.gif) no-repeat; background-position:left -100px; } .tab .head .button .native .over .link{ background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right -99px; } .tab .head .button .native .selected{ position:relative; top:1px; background:url(images/tabs-sprite-left.gif) no-repeat; background-position:left 0px; color:#15428B; font-weight:bold; } .tab .head .button .native .selected .link{ display:block; background:url(images/tabs-sprite-right.gif) no-repeat; background-position: right 0px; /* padding-bottom:1px;*/ cursor:default; } body{ font-family:helvetica,tahoma,verdana,sans-serif; font-size:13px; } .tab .longShow { padding:10px; } .tab .longShow #long_text{ display:block; } .tab .longShow #short_text{ display:none; } .tab .shortShow { padding:10px; } .tab .shortShow #long_text{ display:none; } .tab .shortShow #short_text{ display:block; } .tab .head .button .native img{ float:right; position:absolute; top:12px; right:4px; src:url(images/img/close.gif) no-repeat; } .tab .head .button .native .close{ width:14px; position:absolute; top:1px; right:2px; background:url('img/close.gif') no-repeat 3px 4px; } </style> </head> <body> <div class="tab"> <div class="head"> <div class="button"> <ul class="native"> <li class="unselected selected" οnmοuseοut="lostFocus(event)" οnmοuseοver="getFocus(event)" > <a class="link" href="#" mce_href="#" οnclick="select('short',event)">Short Text<div class="close"> </div></a> </li> <li class="unselected" οnmοuseοut="lostFocus(event)" οnmοuseοver="getFocus(event)" > <a class="link" href="#" mce_href="#" οnclick="select('long',event)">Long Textssss</a> </li> </ul> </div> </div> <div class="shortShow"> <div id="long_text" > <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. <br/> <br/> Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. </p> </div> <div id="short_text"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. <br/> <br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. </p> </div> </div> </div> </body> </html></textarea>