Javascript- focus map to achieve (a)

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Points of knowledge:

Function as a constructor

Use the prototyoe prototype object.

This pointing to the current instance to the class.

The use of class, all instances of the class are pointing to the same prototype object, there is only a prototype.

Examples of their own value, in the constructor, each class will be instantiated to a constructor, create a new copy.

Effect:


Code:

html:

<style>
#focus_view td{
    height:200px;
}

</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="focus_view">
  <tr>
    <td style="background:#f00; display:none;">&nbsp;</td>
    <td style="background:#ff0; display:none;">&nbsp;</td>
    <td style="background:#f0f; display:none;">&nbsp;</td>
    <td style="background:#0f0; display:none;">&nbsp;</td>
    <td style="background:#000; display:none;">&nbsp;</td>
    <td style="background:#00f; display:none;">&nbsp;</td>
  </tr>
</table>
<button id="focus_prev">A</button><button id="focus_next">The next item</button>

javascript:

<script>

/*
    This focus map code for example, the completion of the basic function of demonstrating, for additional features, not here and provide. 
    The code is not fully tested, if necessary, the user could modify and test. 

    JS code: 
    "_": As private property, method
    
*/
    
    //Constructor
    function Focus(focusItems,callBackFn,effectFn){
        this._focusItems=focusItems||[];//The focus for the array
        this._callBackFn=callBackFn||function(){};//Call callback function changes after each
        this._effectFn=effectFn||function(index,items){
            for(var i=0,len=items.length;i<len;i++){
                items[i].style.display="none";    
            }
            items[index].style.display="block";
                
        }//Effect of function, used to focus when switching effect
        this._currentIndex=0;//The focus of the current index
        this.init();
    }
    
    //The prototype object
    Focus.prototype={
        constructor:Focus,//Specify the constructor
        init:function(){
            this.goto(0);    
        },
        addFousItem:function(obj){//Add focus public
            if(!obj)return;
            if(typeof obj==="string"){
                obj=document.getElementById(obj);    
            }
            this._focusItem.push(obj);    
        },
        size:function(){//Returns the current focus of total length
            return this._focusItems.length;    
        },
        _check:function(num){//Check the boundary
            return num<this.size()&&num>=0;    
        },
        getCurrentIndex:function(){//Returns the current index
            return this._currentIndex;    
        },
        setIndex:function(num){//Num in the boundary set
            if(this._check(num)){
                this._currentIndex=num;
            }
        },
        goto:function(num){//Set the focus items arrive
            this.setIndex(num);
            this._effectFn&&this._effectFn.call(this,this._currentIndex,this._focusItems);
            this._callBackFn&&this._callBackFn.call(this,this._currentIndex,this._focusItems);
        },
        prev:function(){//The next focus items
            var curIndex=this.getCurrentIndex();
            curIndex--;
            if(!this._check(curIndex)){
                curIndex=this.size();                
                curIndex--;
            }
            
            this.goto(curIndex);
        },
        next:function(){//A focus of study
            var curIndex=this.getCurrentIndex();
            curIndex++;            
            if(!this._check(curIndex)){                
                curIndex=0;
            }
            this.goto(curIndex);    
        }
        
    }
</script>

<script>

//Test, only the completion of the basic test, later will be adding effects, and expansion of the above code

var prev=document.getElementById("focus_prev");
var next=document.getElementById("focus_next");

var focusView=document.getElementById("focus_view");
var focusItems=focusView.getElementsByTagName("td");
var fos=new Focus(focusItems);
next.onclick=function(){
    fos.next();    
}
prev.onclick=function(){
    fos.prev();    
}
// Test auto play setInterval(function(){fos.next()},3000)


</script>

To be continued. . .

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Roderick at November 13, 2013 - 5:05 PM