Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 112 lines (93 sloc) 3.96 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Responsive design testing for the masses">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>简单的XHTML页面</title>
<link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/app/dp/css/global.css">
<script type="text/javascript" src="http://a.tbcdn.cn/s/yui/3.4.1/build/yui/yui-min.js"></script>
</head>
<body>
<style>
/*--标准--*/
.t-tabview {position:relative;text-align:left;width:100%;}
.t-tabview .tab-nav {width:auto;*width:100%;border-color:#2647A0;border-style:solid;border-width:0 0 5px 0;}
.t-tabview .tab-nav li {float:left;border:1px solid #999999;color:black;padding:5px;margin:0 0.16em 0 0}
.t-tabview .tab-nav li a,
.t-tabview .tab-nav li a:link,
.t-tabview .tab-nav li a:visited,
.t-tabview .tab-nav li a:hover {color:black;text-decoration:none;}
.t-tabview .tab-nav li.selected a,
.t-tabview .tab-nav li.selected a:link,
.t-tabview .tab-nav li.selected a:visited,
.t-tabview .tab-nav li.selected a:hover {color:white;text-decoration:none;}
.t-tabview .tab-nav li.selected {background-color:#2647A0;border:1px solid #2647A0;font-weight:bold;}
.t-tabview .tab-content {border:1px solid gray;}
/*--标准--*/
.t-slide {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide .tab-nav li {float:left;}
.t-slide .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide .tab-content {width:600px;height:200px;overflow:hidden;z-index:1;}
.t-slide .tab-content img {width:600px;height:200px;}
/*--标准2-*/
.t-slide-2 {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide-2 .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide-2 .tab-nav li {float:left;}
.t-slide-2 .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide-2 .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide-2 .tab-content {width:100%;height:400px;overflow:hidden;z-index:1;}
.t-slide-2 .tab-content img {width:600px;height:400px;}
.bb {
background:gray;
}
</style>
<div id="J_tab_1" class="t-tabview my-hack">
<ul class="tab-nav clearfix">
<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="tab-content">
<div class="tab-pannel"><p>Tab One ContentTab One ContentTab One ContentTab One Content</p></div>
<div class="tab-pannel hidden"><p>Tab Two ContentTab Two ContentTab Two ContentTab Two ContentTab Two Content</p></div>
<div class="tab-pannel hidden"><p>Tab Three ContentTab Three ContentTab Three ContentTab Three Content</p></div>
</div>
</div>
<p></p>
<script>
YUI({
modules:{
'slide':{
fullpath:'slide.js',
requires:['node','anim']
}
}
}).use('slide','dump',function(Y){
new Y.Slide('J_tab_1',{
autoSlide:false,
eventype:'click',
ease:'easeOut',
effect:'none',
autoSlide:true,
timeout:3000,
speed:0.5,
hoverStop:true
});
});
</script>
<p class="bb">下边界位置</p>
<div id="J_tab_3" class="t-slide-2 mt20" style="display:none">
<ul class="tab-nav clearfix">
</ul>
<div class="tab-content">
<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s1.jpg" /></p></div>
<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s2.jpg" /></p></div>
<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s3.jpg" /></p></div>
<div class="tab-pannel"><p><img src="http://a.tbcdn.cn/app/dp/s/slide/demo/img/s4.jpg" /></p></div>
</div>
</div>
</body>
</html>