Permalink
Browse files

add switch

  • Loading branch information...
1 parent ca233fd commit 4d1b14efb34d6b5bbc61e09729d985f6deabe780 @f2er committed May 25, 2012
View
@@ -0,0 +1,20 @@
+/*
+ @ Switchable : tab�л��������ӳټ��� (depend:javascript)
+ @ create : 2012-05-25 by ���
+*/
+
+����˵��:
+Switchable({tabid:"tab_type",bid:"tab_game",eventType:"mouseover"}).trigger(1);
+
+����˵��:
+tabid : "tab_type",/*tab��ID*/
+htag : "tab-item", /*tab���ʶ*/
+currentClass : "cur",/*��ǰѡ����ʽ*/
+cProp : "data-widget", /*�Զ���������*/
+bid : "tab_ooxx", /*������ID*/
+btag : "tab-content", /*�������ʶ*/
+dPro : "data-loaded",/*�Ƿ���ع�*/
+eventType : "click",/*�¼�����*/
+tabType : 1, // 0:��ͨ�л� 1:�ӳټ���
+callback : function(){} /*������ɺ�Ļص���*/
+
@@ -1,84 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>情封 手风琴效果</title>
-<link href="../../static/css/demo.css" rel="stylesheet" type="text/css"/>
-<link href="../../static/js/highlight/styles/sunburst.css" rel="stylesheet" type="text/css"/>
-<link href="css/accordion.css" rel="stylesheet" />
-
-</head>
-<body>
-<!--toolbar-->
-<div class="toolbar" id="toolbar"></div>
-<!--/toolbar-->
-<div class="ox_box">
- <!--mod_tabSlide-->
- <div class="mod_tabSlide" id="js_tabSlide">
- <div class="role_box">
- <dl class="role_xl">
- <dt>仙灵</dt>
- <dd>仙灵秉天地灵气而生,拥有得天独厚的资质,可以轻松驾驭各种法术,看似无力的法杖实则威力惊人。</dd>
- </dl>
- </div>
- <div class="role_box">
- <dl class="role_ms">
- <dt>魔神</dt>
- <dd>修魔者,以杀证道!集万千业力于一身,化戾气为自身战力,手中魔刀神挡杀神佛挡杀佛。</dd>
- </dl>
- </div>
- <div class="role_box">
- <dl class="role_dz">
- <dt>道尊</dt>
- <dd>修道者,清静无为,炼丹悟道,追求天人合一。手中三尺青锋可斩尽世间一切妖魔鬼怪。</dd>
- </dl>
- </div>
- <div class="role_box">
- <dl class="role_yj">
- <dt>妖精</dt>
- <dd>妖精千娇百媚颠倒众生,但修成人型的艰辛又有谁知,在千年的修行中,手中的圆环早已沾满鲜血。</dd>
- </dl>
- </div>
- </div>
- <!--mod_tabSlide-->
- <!--demo_resource-->
- <div class="demo_resource wrapper">
- <p>参数说明:</p>
- <pre class="DlHighlight"><code class="xml">id :容器ID
-eventTypeL : 事件触发类型
-currentClass : 当前选中的类名
-nornalClass : 默认类名
-effection : {
- effect : 效果 //slide : 展开,transparent : 透明度,
- start : 起始值,
- end : 终止值
- step : 步骤
- }
-trigger方法 : 设置默认开启数</code></pre>
-
- </div>
- <!--/demo_resource-->
-</div>
-<div class="bottomBar" id="bottomBar"></div>
-<script src="../../static/js/mod_f2er.js" type="text/javascript"></script>
-<script src="js/SwitchAccordion.js" type="text/javascript"></script>
-<script src="../../static/js/highlight/highlight.pack.js"></script>
-<script type="text/javascript">
-mod_f2er.topBar('手风琴效果','toolbar');
-mod_f2er.bottomBar('bottomBar');
-hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();
-SwitchAccordion({ id:"js_tabSlide",
- eventType :"click",
- currentClass:"on",
- nornalClass :"role_box",
- effection : {
- effect : "transparent",
- start : 0,
- end : 100,
- step : 10
- }
- }).trigger(0);
-</script>
-</body>
-</html>
@@ -1,146 +0,0 @@
-/**
- * to:TabSlide
- * author:f2er
- * time:12-03-27
-**/
-function SwitchAccordion(ctg){
- this.option = {
- _id : ctg.id, //容器ID
- _eventType : ctg.eventType, //事件触发类型
- _currentClass : ctg.currentClass, //选中类名
- _nornalClass : ctg.nornalClass, //默认类名
- _effection : ctg.effection //slide : 展开,transparent : 透明度,start:起始值,end:终止值,step:步骤
- }
- if( !( this instanceof arguments.callee )){
- return new arguments.callee(ctg);
- }
- this._timer = null;
- this.Initialization();
-}
-SwitchAccordion.prototype = {
- constructor : SwitchAccordion,
- addEvent : function( target,type,fn ){
- if( target.addEventListener ){
- target.addEventListener( type,fn,false );
- }else if( target.attachEvent ){
- target.attachEvent( "on"+type,fn );
- }else{
- target["on"+type] = fn;
- }
- },
- _$ : function(id){
- return typeof id == "string" ? document.getElementById(id) : id;
- },
- _tag : function(obj,tag){
- return tag != "" ? obj.getElementsByTagName( tag ) : obj.getElementsByTagName("*");
- },
- _var : function(){
- var that = this,
- _dtArray = that._tag( that._$( that.option._id),"dt" ),
- _divArray = that._tag( that._$( that.option._id),"div") ,
- _ddArray = that._tag( that._$( that.option._id),"dd" );
- return {
- _dtArray : _dtArray,
- _divArray : _divArray,
- _ddArray : _ddArray
- }
- },
- index : function(obj){
- var that = this,
- _dtArray = that._var()._dtArray;
- for( var i=0,_len = _dtArray.length;i<_len;i++){
- if( obj == _dtArray[i] ){
- return i;
- }
- }
- },
- getCss : function(element,property){
- if( element.currentStyle ){
- return element.currentStyle[property];
- }else{
- var computedStyle = document.defaultView.getComputedStyle(element,null)[property]
- return computedStyle;
- }
- },
- clearTimer : function(){
- var that = this;
- if( that._timer ){
- clearInterval( that._timer );
- }
- that._timer = null;
- },
- setOpacity : function(obj,num){
- obj.style.opacity = num/100;
- obj.style.filter = "alpha(opacity="+num+")";
- },
- setSlide : function(obj,num){
- obj.style.width = num +"px";
- },
- animateShow : function(obj){
- var that = this,
- step = that.option._effection.start;
- function show(){
- step += that.option._effection.step;
- switch( that.option._effection.effect ){
- case "transparent" :
- that.setOpacity(obj,step);
- break;
- case "slide" :
- that.setSlide(obj,step);
- break;
- }
- if( step >= that.option._effection.end ){
- that.clearTimer();
- step = that.option._effection.start ;
- }
- }
- that.clearTimer();
- that._timer = setInterval(show,50);
- },
- trigger : function(n){
- var that = this,
- _ddArray = that._var()._ddArray,
- _divArray = that._var()._divArray[n];
- _divArray.className = that.option._nornalClass+" "+that.option._currentClass;
- switch( that.option._effection.effect ){
- case "transparent" :
- that.setOpacity(_ddArray[0],100);
- break;
- case "slide" :
- that.setSlide(_ddArray[0],that.getCss(_ddArray[0],"width"));
- break;
- }
-
- return that;
- },
- effect : function(j){
- var that = this,
- _dd = that._tag( that._var()._divArray[j],'dd')[0];
- switch( that.option._effection.effect ){
- case "transparent" :
- that.setOpacity(_dd,that.option._effection.start);
- break;
- case "slide" :
- that.setSlide(_dd,that.option._effection.start);
- break;
- }
- },
- Initialization : function(){
- var that = this,
- _obj = that._$(that.option._id),
- _objArray = that._var()._divArray;
- that.addEvent( _obj, that.option._eventType,function(event){
- var _ev = event || window.event,
- _target = _ev.target || _ev.srcElement;
- if( _target.nodeName.toLowerCase() != "dt"){ return; }
- var _index = that.index( _target );
- for( var j = _objArray.length-1;j>=0;j-- ){
- that.effect(j);
- _objArray[j].className = ( j != _index ) ? that.option._nornalClass : that.option._nornalClass+" "+that.option._currentClass;
- var _targetImg = that._tag(_objArray[_index],'dd')[0];
- that.animateShow(_targetImg);
- }
- });
- return that;
- }
-}
@@ -3,17 +3,15 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>情封 普通切换模块</title>
-<link href="../../static/css/demo.css" rel="stylesheet" type="text/css"/>
-<link href="css/tabLazy.css" rel="stylesheet" />
-<link href="../../static/js/highlight/styles/sunburst.css" rel="stylesheet" type="text/css"/>
<style>
+ *{ margin:0;padding:0}
.ox_box{ width:1000px;}
</style>
+<link href="css/tabLazy.css" rel="stylesheet" />
+
</head>
<body>
-<!--toolbar-->
-<div class="toolbar" id="toolbar"></div>
-<!--/toolbar-->
+
<div class="ox_box">
<!--ui_tab-->
<ul id="tab_ooxx" class="clearfix tab_type">
@@ -50,33 +48,8 @@
</div>
</div>
</div>
-<!--demo_resource-->
-<div class="demo_resource wrapper">
- <p>调用说明:</p>
- <pre class="DlHighlight"><code class="xml">Switchable({tabid:"tab_ooxx",bid:"tab_game",eventType:"mouseover",tabType:"0"}).trigger(2);</code></pre>
- <p>参数说明:</p>
- <pre class="DlHighlight"><code class="xml">tabid:"tab_type",/*tab区ID*/
-htag:"tab-item", /*tab区标识*/
-currentClass:"cur",/*当前选中样式*/
-cProp : "data-widget", /*自定义属性名*/
-bid:"tab_ooxx", /*内容区ID*/
-btag:"tab-content", /*内容区标识*/
-dPro:"data-loaded",/*是否加载过*/
-eventType : "click",/*事件类型*/
-tabType : 1, // 0:普通切换 1:延迟加载
-callback : function(){} /*加载完成后的回调函数*/
-</code></pre>
-</div>
-<!--/demo_resource-->
-<div class="bottomBar" id="bottomBar"></div>
-<script src="../../static/js/mod_f2er.js" type="text/javascript"></script>
<script src="js/Switchable.js" type="text/javascript"></script>
-<script src="../../static/js/highlight/highlight.pack.js"></script>
<script type="text/javascript">
-mod_f2er.topBar('普通tab切换','toolbar');
-mod_f2er.bottomBar('bottomBar');
-hljs.tabReplace = ' ';
-hljs.initHighlightingOnLoad();
Switchable({tabid:"tab_ooxx",bid:"tab_game",eventType:"mouseover",tabType:"0"}).trigger(2);
</script>
</body>
@@ -3,17 +3,14 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>情封 tab切换+延迟加载(通过textarea)</title>
-<link href="../../static/css/demo.css" rel="stylesheet" type="text/css"/>
-<link href="../../static/js/highlight/styles/sunburst.css" rel="stylesheet" type="text/css"/>
-<link href="css/tabLazy.css" rel="stylesheet" />
-<style>
+<style>
+ *{ margin:0;padding:0}
.ox_box{ width:1000px;}
</style>
+<link href="css/tabLazy.css" rel="stylesheet" />
+
</head>
<body>
-<!--toolbar-->
-<div class="toolbar" id="toolbar"></div>
-<!--/toolbar-->
<div class="ox_box">
<!--ui_tab-->
<ul id="tab_type" class="clearfix tab_type">
@@ -386,31 +383,10 @@
</div>
</div>
</div>
-<!--demo_resource-->
-<div class="demo_resource wrapper">
- <p>调用说明:</p>
- <pre class="DlHighlight"><code class="xml">Switchable({tabid:"tab_type",bid:"tab_game",eventType:"mouseover"}).trigger(1);</code></pre>
- <p>参数说明:</p>
- <pre class="DlHighlight"><code class="xml">tabid:"tab_type",/*tab区ID*/
-htag:"tab-item", /*tab区标识*/
-currentClass:"cur",/*当前选中样式*/
-cProp : "data-widget", /*自定义属性名*/
-bid:"tab_ooxx", /*内容区ID*/
-btag:"tab-content", /*内容区标识*/
-dPro:"data-loaded",/*是否加载过*/
-eventType : "click",/*事件类型*/
-tabType : 1, // 0:普通切换 1:延迟加载
-callback : function(){} /*加载完成后的回调函数*/
-</code></pre>
-</div>
-<!--/demo_resource-->
-<div class="bottomBar" id="bottomBar"></div>
-<script src="../../static/js/mod_f2er.js" type="text/javascript"></script>
+
<script src="js/Switchable.js" type="text/javascript"></script>
-<script src="../../static/js/highlight/highlight.pack.js"></script>
+
<script type="text/javascript">
-mod_f2er.topBar('tab、内容延迟','toolbar');
-mod_f2er.bottomBar('bottomBar');
Switchable({tabid:"tab_type",bid:"tab_game",eventType:"mouseover"}).trigger(1);
</script>
</body>

0 comments on commit 4d1b14e

Please sign in to comment.