auto-keyboard

.focusclass:focus

HTML

new View()

<link href="./css/view.css" type="text/css" rel="stylesheet">
<div class="search_keyborad" id="search">
    <a data-key="A">A</a>
    <a data-key="B">B</a>
    <a data-key="B">C</a>
    ...
</div>
<ul class="search_list" id="list">
    <li class="search_item">
        <img src="" >
        <h3>11DNA</h3>
    </li>
    <li class="search_item">
        <img src="" >
        <h3>22DNA</h3>
    </li>
    ...
</ul>
<script type="text/javascript" src="./js/smoothscroll.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>

var S = $('search');	
var L = $('list');
var V = new View(S);
var Vl = new View(L);
V.init(S.getElementsByTagName('a'));
Vl.init(L.getElementsByTagName('li'));
V.onfocus();

**** new View(container)

API

new View(#container)``n*m

V.init(children)``nodeList

new View(container)

var con = document.getElemetById('con');
var V = new View(con);

container

V.init(nodeList)

getElementsByTagName

var child = [ nodeA,nodeB,nodeC ];
V.init(child)

a

<div id="con">
    <a></a>
    <div>
        <span></span>
        <a></a>
        <a></a>
    </div>
    <a></a>
</div>

V.init(S.getElementsByTagName('a'));

//
ajax({
    url:'XXX',
    sunccess:function(data){
        var html = '';
        for(var i=0;i<data.length;i++){
            html+='<a>'+data[i]+'</a>';
        }
        S.innerHTML = html;
        V.init(S.getElementsByTagName('a'));
    }
})

V.insertAfter(nodeList)

ajax({
    url:'XXX',
    sunccess:function(data){
        var div = document.createElement("div");
        var html = '';
        for(var i=0;i<data.length;i++){
            html+='<a>'+data[i]+'</a>';
        }
        div.innerHTML = html;
        M.appendChild(div);
        V.insertAfter(M.getElementsByTagName('a'));
    }
})

M.appendChild(node)``M.inderHTML+=html

M.inderHTML += html;

//

M.inderHTML = M.inderHTML + html;

V.insertBefore(nodeList)

insertAfter

V.onfocus()

()

var V = new View(S);
V.onfocus();

focus``focus

autofocus``0

autofocus=true(DOM)

<div>
    <a></a>
    <a autofocus="true"></a>
    <a></a>
    <a></a>
</div>

V.focusById(id)

id()

V.focusByIndex(index)

index()

index

<div>
    <a></a> <!--0-->
    <div>
        <span></span>
        <a></a>  <!--1-->
        <a></a>  <!--2-->
    </div>
    <a></a>  <!--3-->
</div>

V.findByDir(dir)

index``null

dir``left``right``up``down

V.findByDir['right','down','down'] //

if(!this.findByDir['down','down']){
    //...
    this.down();
    //...
}

V.sortby(arr)

V.init(nodeList)

var rules = [
    [1,1,3,null],//0
    [null,2,3,0],
    [1,null,3,1],
    [1,2,null,0],
]
V.sortby(rules);

00``[1,1,3,null]

V.ok

pressIn

V.isCurrent

V.ok = function(item){
    if(this.isCurrent){
        console.log('');
    }else{
        console.log(item)//dom
    }
}

V.leftV.rightV.upV.down

///

V.left``shake300mscss/view.css

V.left = function(){
    Vl.onfocus();//VVl
}

V.back

V.move

V.move = function (prev, current) {
    //prev
    //current
}

V.saveCurrent

current``tab``false

V.saveCurrentDelay

current``tabokfalse

current

V.scrollAnimate

true

scrollTop``scrollLeft``overflow:hidden|auto

scroll-behavior: smooth

smoothscroll.min.js``V.scrollAnimate = true

V.onkey(action)

actionup``right``down``left``ok``back

V.right = function () {
    Vnav.onfocus();
    Vnav.onkey('right');
    Vnav.onkey('down');
}

moveLeft``moveUp``moveRight``moveDown``doConfirm``keyBack

//console
moveLeft();
moveUp();
//...

ok

demo

overflow:auto,overflow:hidden

http://xboxyan.codelabo.cn/auto-keyboard/example/index.html