<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠-TAB切换-焦点图</title>
<style type="text/css">
html,body,div,ul,li,h3,p{margin:0; padding:0;}
ul,li{list-style:none;}
body{font:12px/1.8 "宋体",serif; text-align:left;}
.clear:after{content:"";height:0; display:block; clear:both; visibility:hidden;}
.content{border-bottom:1px solid #ddd;}
.set{width:900px; padding:20px; float:left; }
#toggle{width:200px; margin:20px; float:left;}
.toggle_tit{border:1px solid #d0d0d0; background-image:url(image/2.png);background-position:3px 50%; background-repeat:no-repeat; text-indent:20px; cursor:pointer;}
.toggle_tit_visited{background-image:url(image/1.png);}
.toggle_con{border:1px solid #d0d0d0; border-top:none; height:120px;}
#tab{width:200px; margin:20px; float:left;}
.tab_tit{width:40px; height:24px; line-height:24px; float:left; border:1px solid #999; text-align:center; cursor:pointer;}
#tab .wrap{margin-top:-1px;border:1px solid #999;}
.tab_con{height:120px; padding:12px 6px;}
#focus{width:200px; height:150px; padding:2px; float:left; margin:20px; border:1px solid #999; position:relative;}
#focus ul{height:20px; position:absolute;bottom:10px; right:10px;}
.focus_item{display:inline-block; width:18px; height:18px; cursor:pointer; border:1px solid #666; background:#fff; text-align:center;}
.focus_item_visited{background:#666; border:1px solid #fff; color:#fff;}
#focus img{width:200px; height:150px;}
</style>
<script type="text/javascript">
function id(name){
return typeof name == "string" ? document.getElementById(name) : name;
}
function hasClass(name, type, elem) {
var r = [];
var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
var e = (elem ? id(elem) : document).getElementsByTagName(type || "*");
for (var i = 0; i < e.length; i++) {
if (re.test(e[i].className)) r.push(e[i]);
}
return r;
}
var ttf = function(options){
this.setOptions = function(options){
return {
name:options["name"] || "",
item:options["item"] || "",
con:options["con"] || "",
event:options["event"] || "click",
visited:options["visited"] || "",
initCon:options["initCon"] || "none",
other:options["other"] || "hide",
autorun:options["autorun"] || "",
setTime:options["setTime"] || "2000",
callback:options["callback"] || ""
}
}
this.options = this.setOptions(options);
this.init = function(){
this.name = id(this.options.name);
this.item = hasClass(this.options.item,"",this.name);
this.con = hasClass(this.options.con,"",this.name);
this.currentItem = 0;
this.autorunTimer = null;
if(!this.name || this.item.length == 0 || this.con.length == 0){
return;
}
this.resetCon();
if(typeof this.options.initCon == "number"){
this.ctlCon(this.options.initCon - 1);
}else if(this.options.initCon == "show"){
for(var i = 0,j=this.con.length;i<j;i++){
this.con[i].style.display = "";
}
};
this.autorunFn();
this.setIndex();
}
this.setIndex = function(){
var _this = this;
for (var i = 0, j = this.item.length; i < j; i++) {
(function(n) {
_this.item[n]["on" + _this.options.event] = function() {
if (_this.options.autorun) {
clearTimeout(_this.autorunTimer);
_this.autorunTimer = null;
}
_this.ctlCon(n);
_this.currentItem = n + 1 == j ? 0: n + 1;
setTimeout(function() { _this.autorunFn() }, _this.options.setTime);
}
})(i);
};
}
this.ctlCon = function(index){
if(this.options.other == "hide"){
this.resetCon();
}
if(this.con[index].style.display == "none"){
this.con[index].style.display = "";
}else{
this.con[index].style.display = "none";
}
if (this.options.visited) {
this.ctlItem(index);
}
if(this.options.callback){
this.options.callback.call(this,index);
}
}
this.ctlItem= function(index) {
if(this.item[index].className.indexOf(this.options.visited) != -1){
var defaultClass = this.item[index].className.split(this.options.visited).join("");
}else{
var defaultClass = this.item[index].className;
}
if(this.options.other == "hide"){
for(var i = 0,j=this.item.length;i<j;i++){
this.item[i].className = defaultClass;
}
}
if(this.con[index].style.display =="none"){
this.item[index].className = defaultClass;
}else{
this.item[index].className = defaultClass +" "+this.options.visited;
}
},
this.resetCon = function(){
for(var i = 0,j=this.con.length;i<j;i++){
this.con[i].style.display = "none";
}
}
this.autorunFn = function(){
if(this.options.autorun){
var _this = this;
this.ctlCon(this.currentItem);
this.ctlItem(this.currentItem);
this.currentItem > this.item.length - 2 ? this.currentItem = 0 : this.currentItem++;
this.autorunTimer = setTimeout(function() { _this.autorunFn(); }, _this.options.setTime);
}
}
this.init();
}
</script>
</head>
<body>
<div class="content clear">
<div id="toggle">
<div class="toggle_tit">toggle_1</div>
<div class="toggle_con">toggle_1_con</div>
<div class="toggle_tit">toggle_2</div>
<div class="toggle_con">toggle_2_con</div>
<div class="toggle_tit">toggle_3</div>
<div class="toggle_con">toggle_3_con</div>
</div>
<div class="set">
<h3>应用于折叠层</h3>
<p>调用方法</p>
<code>new ttf({"name":"toggle","item":"toggle_tit","con":"toggle_con","initCon":1,"visited":"toggle_tit_visited","other":"hide"});</code>
<p>想要展开当前的同时，其它状态不变，修改"other"值为"show"。</p>
<p>想要初始化时确定哪一项展开，修改"initCon"值为有效数字</p>
<p><label></label></p><input type="button" value="查看效果" onclick="toggle.options.other = 'show'" />
</div>
</div>
<div class="content clear">
<div id="tab">
<ul class="clear">
<li class="tab_tit">tab_1</li>
<li class="tab_tit">tab_2</li>
</ul>
<div class="wrap">
<div class="tab_con">con_1</div>
<div class="tab_con">con_2</div>
</div>
</div>
<div class="set">
<h3>应用于选项卡</h3>
<p>调用方法</p>
<code>
new ttf({"name":"tab","item":"tab_tit","con":"tab_con","initCon":1,"callback":function(){ for(var i = 0,j=this.item.length;i>j;i++){ this.item[i].style.borderBottomColor = "#999"; } this.item[arguments[0]].style.borderBottomColor = "#fff"; }});
</code>
<p>本例使用callback函数来改变tab的样式。</p>
<p>"event"设置鼠标事件类型，"event":"mouseover"改为鼠标划过。</p>
<input type="button" value="改为划过" onclick="tab.options.event = 'mouseover';tab.init();" />
</div>
</div>
<div class="content clear">
<div id="focus">
<ul class="clear">
<li class="focus_item">1</li>
<li class="focus_item">2</li>
<li class="focus_item">3</li>
<li class="focus_item">4</li>
</ul>
<div class="wrap">
<div class="focus_con"><img src="image/l1.jpg" tit="图1" /></div>
<div class="focus_con"><img src="image/l2.jpg" tit="图2" /></div>
<div class="focus_con"><img src="image/l3.jpg" tit="图3" /></div>
<div class="focus_con"><img src="image/l4.jpg" tit="图4" /></div>
</div>
</div>
<div class="set">
<h3>应用于选项卡</h3>
<p>调用方法</p>
<code>
new ttf({"name":"focus","item":"focus_item","con":"focus_con","initCon":1,"visited":"focus_item_visited","autorun":true});;
</code>
<p>本例使用了自动播放，改修"autorun"值为"null"，停止播放。</p>
<input type="button" value="停止播放" onclick="iFocus.options.autorun = null;" />
</div>
</div>
<script type="text/javascript">
var toggle = new ttf({"name":"toggle","item":"toggle_tit","con":"toggle_con","initCon":1,"visited":"toggle_tit_visited","other":"hide"});
var tab = new ttf({"name":"tab","item":"tab_tit","con":"tab_con","initCon":1,"callback":function(){
for(var i = 0,j=this.item.length;i<j;i++){
this.item[i].style.borderBottomColor = "#999";
}
this.item[arguments[0]].style.borderBottomColor = "#fff";
}});
var iFocus = new ttf({"name":"focus","item":"focus_item","con":"focus_con","initCon":1,"visited":"focus_item_visited","autorun":true});
</script>
</body>
</html>
浙公网安备 33010602011771号