ipanel数字电视（DVB），方向键控制设计+代码
数字电视遥控器，只有为数不多的控制键，怎么样利用好，是对开发者一个挑战。
其中上、下、左、右、选择、五个键是最为重要的，本案例是一个电视短信，主要页面是左右两栏
左边是一个菜单列表，右边是详细列表。
一、采用ipanel浏览器
特点是兼容JS大部分，有自己特有的JS对象。
调试太麻烦，没有较有先进的调试工具，建议采用firefox等工具调试。
二、封装各功能点
各功能点封装成一个对象，取名为marker.
增加三个事件，即
a）选中事件，当控制键选中时触发。
b）失选事件，当控制键离开时触发。
c）单击事件，当控制键选中时按下确定键触发。
/***元素*/_$.Marker = function(_id,_tagid,_ext){this.id = _id;this.tagid = _tagid;this.ext = _ext;this.events = null;this.eventType = { EVENT_CLICK : "click", EVENT_SELECTED : "selected", EVENT_UNSELECTED : "unselected"};}/***元素绑定事件*/_$.Marker.prototype.bind = function(event ,cb){this.events = this.events == null ? {}:this.events;this.events[event] = cb;return this;}/***元素的单击事件*/_$.Marker.prototype.click = function(e){if(this.events && this.events[this.eventType.EVENT_CLICK])this.events[this.eventType.EVENT_CLICK](e);};/***元素选中事件*/_$.Marker.prototype.selected = function(e){_$.focusmarker = this;if(this.events && this.events[this.eventType.EVENT_SELECTED])this.events[this.eventType.EVENT_SELECTED](e);};/***元素失选事件*/_$.Marker.prototype.unselected = function(e){if(this.events && this.events[this.eventType.EVENT_UNSELECTED])this.events[this.eventType.EVENT_UNSELECTED](e);_$.focusmarker = null;};?三、功能点封装成一个组
当功能点会有集合成一个功能点组，用户可以在各个组之间切换。
a）选中事件，当控制键选中时触发。
b）失选事件，当控制键离开时触发。
c）单击事件，当控制键选中时按下确定键触发。
/***组*/_$.Group = function(_id ,_markers ,_pos){this.id = _id;this.markers = _markers;this.defaultpos = _pos;this.pos = _pos;this.events = null;this.eventType = {EVENT_SELECTED : "selected"};//排序//未实现//}//设置组里元素_$.Group.prototype.setMarkers = function(_markers){this.markers = null;this.markers = _markers;}/***原来有就复盖，没有追加到最后*/_$.Group.prototype.addMarker = function(_marker){for(var i=0;i<this.markers.length;i++){if(_marker.id == this.markers[i].id){this.markers[i] = _marker;return;}}this.markers[this.markers.length] = _marker;}/***组的下一个元素*/_$.Group.prototype.next = function(){var oldmarker = this.markers[this.pos];oldmarker.unselected({target:oldmarker});var temp_pos = (this.pos + 1) % this.markers.length;var marker = this.markers[temp_pos];this.pos = temp_pos;marker.selected({target:marker});return marker;}/***组的上一个元素*/_$.Group.prototype.prev = function(){var oldmarker = this.markers[this.pos];oldmarker.unselected({target:oldmarker});this.pos = this.pos == 0 ? this.markers.length : this.pos;var temp_pos = (this.pos - 1) % this.markers.length;var marker = this.markers[temp_pos];this.pos = temp_pos;marker.selected({target:marker});return marker;}/***组的默认元素*/_$.Group.prototype.defaultMarker = function(){return this.markers[this.defaultpos];}/***组的当前元素*/_$.Group.prototype.currentMarker = function(){return this.markers[this.pos];}/***组的事件绑定*/_$.Group.prototype.bind = function(event ,cb){this.events = this.events == null ? {}:this.events;this.events[event] = cb;return this;}/***组的选中事件*/_$.Group.prototype.selected = function(e){_$.focusgroup = this;if(this.events && this.events[this.eventType.EVENT_SELECTED])this.events[this.eventType.EVENT_SELECTED](e);this.markers[this.pos].selected({target:this.markers[this.pos]});//设置当前焦点};/***组的失选事件*/_$.Group.prototype.unselected = function(e){//todoif(this.events && this.events[this.eventType.EVENT_UNSELECTED])this.events[this.eventType.EVENT_UNSELECTED](e);for(var i=0;i<this.markers.length;i++){this.markers[i].unselected({target:this.markers[i]});}//设置当前焦点_$.focusgroup = null;}?三、把组打包成一个管理类，通管理类管理这些组
代码如下
_$.GroupsObj = function(_groups ,_pos ,_focusmarker ,_focusgroup){this.groups = _groups;this.defaultpos = _pos;this.pos = _pos;//排序//未实现//_$.focusmarker = _focusmarker;_$.focusgroup = _focusgroup;}/***组群初始化*/_$.GroupsObj.prototype.init = function(){//alert(this.focusmarker);_$.focusmarker.selected({target:_$.focusmarker});_$.focusgroup.selected({target:_$.focusgroup});}/***设置组群*/_$.GroupsObj.prototype.setGroups = function(g){this.groups = null;this.groups = g;}/***原来有就复盖，没有追加到最后*/_$.GroupsObj.prototype.addGroup = function(g){$$("debug").innerHTML += g.id + ",";for(var i=0;i<this.groups.length;i++){if(g.id == this.groups[i].id){this.groups[i] = g;return;}}this.groups[this.groups.length] = g;}_$.GroupsObj.prototype.removeGroup = function(id){for(var i=0;i<this.groups.length;i++){if(id == this.groups[i].id){this.groups.splice(i,1);return;}}}/***组群的下一个元素*/_$.GroupsObj.prototype.next = function(){var oldgroup = this.groups[this.pos];oldgroup.unselected({target:oldgroup});var temp_pos = (this.pos + 1) % this.groups.length;var group = this.groups[temp_pos];this.pos = temp_pos;group.selected({target:group});return group;}/***组群的上一个元素*/_$.GroupsObj.prototype.prev = function(){var oldgroup = this.groups[this.pos];oldgroup.unselected({target:oldgroup});this.pos = this.pos == 0 ? this.groups.length : this.pos;var temp_pos = (this.pos - 1) % this.groups.length;var group = this.groups[temp_pos];this.pos = temp_pos;group.selected({target:group});return group;}?四、案例代码
//=========================================================var groupsObj = null;//初始化function init(){var reciverbox = new jok.Marker(0,"reciverbox","");var sendbox = new jok.Marker(1,"sendbox","");var infoadd = new jok.Marker(2,"infoadd","");var birthday = new jok.Marker(3,"birthday","");reciverbox.bind("click",clickHandle);sendbox.bind("click",clickHandle);infoadd.bind("click",clickHandle);birthday.bind("click",clickHandle);reciverbox.bind("selected",selectedHandle);sendbox.bind("selected",selectedHandle);infoadd.bind("selected",selectedHandle);birthday.bind("selected",selectedHandle);reciverbox.bind("unselected",unselectedHandle);sendbox.bind("unselected",unselectedHandle);infoadd.bind("unselected",unselectedHandle);birthday.bind("unselected",unselectedHandle);//============/*var record1 = new Marker(0,"record1","");var record2 = new Marker(2,"record2","");var record3 = new Marker(1,"record3","");var record4 = new Marker(3,"record4","");record1.bind("selected",selectedHandle);record2.bind("selected",selectedHandle);record3.bind("selected",selectedHandle);record4.bind("selected",selectedHandle);///record1.bind("unselected",unselectedHandle);record2.bind("unselected",unselectedHandle);record3.bind("unselected",unselectedHandle);record4.bind("unselected",unselectedHandle);record1.bind("click",clickHandle);record2.bind("click",clickHandle);record3.bind("click",clickHandle);record4.bind("click",clickHandle);*/function clickHandle(e){var taget = e.taget;alert(taget.tagid);}function selectedHandle(e){var target = e.target;////当用户下移或上移，得到焦点，组织数据var html = "";//变色document.getElementById(target.tagid).style.color = "red";if(jok.focusgroup.id != 0) return; //当是第一个组时进行动态加载,即左边的菜单条if(target.tagid == "reciverbox")html = createList("收件箱",5);if(target.tagid == "sendbox")html = createList("发件箱",4);if(target.tagid == "birthday")html = createList("生日信息",3);if(target.tagid == "infoadd"){groupsObj.removeGroup(1);$$("box2").innerHTML = "";return;}function createList(prefix,count){var box2 = $$("box2");var html = ""for(var i=0;i<count;i++){html += "<li><span id="record_"+i+"">"+prefix+"----记录"+i+"</span></li>";}return html;}if(html != ""){$$("box2").innerHTML = html;var spans = $$("box2").getElementsByTagName("span");var right_arr = [];for(var i=0;i<spans.length;i++){var record = new jok.Marker(i,spans[i].id,"");record.bind("selected",selectedHandle).bind("unselected",unselectedHandle).bind("click",clickHandle);right_arr[i] = record;}var right_group = new jok.Group(1,right_arr,0);groupsObj.addGroup(right_group);}}function unselectedHandle(e){var target = e.target;document.getElementById(target.tagid).style.color = "#000000";}var left_arr = new Array(reciverbox,sendbox,infoadd,birthday);//var right_arr = new Array(record1,record2,record3,record4);var left_group = new jok.Group(0,left_arr,0);//var right_group = new Group(2,right_arr,0);left_group.bind("selected",groupSelectedHandle);//right_group.bind("selected",groupSelectedHandle);function groupSelectedHandle(e){var target = e.target;}//groupsObj = new jok.GroupsObj([left_group], 0 , reciverbox , left_group);//defaultgroupsObj.init();//iframevar iframedoc = null;if (document.all){//IEiframedoc = document.frames["dataiframe"].document; }else{//Firefox iframedoc = document.getElementById("dataiframe").contentDocument; }/*var d = new Domm();d.init(10,20);d.prase();*///alert(iframedoc.getElementById("nv").innerHTML);}var $$ = function(id){return typeof(id) === "string" ? document.getElementById(id) : id;}/***控制键摸拟*/function donext(){var _focusmarker = jok.focusgroup.next();//alert("f_next>" + focusmarker.tagid);}function doprev(){var _focusmarker = jok.focusgroup.prev();//alert("f_prev>" + focusmarker.tagid);}function doleft(){var _focusgroup = groupsObj.prev();/*focusmarker = focusgroup.currentMarker();focusgroup.selected({target:focusmarker,group:focusgroup,groupsobj:groups});focusmarker.selected({target:focusmarker,group:focusgroup,groupsobj:groups});*/}function doright(){var _focusgroup = groupsObj.next();/*focusmarker = focusgroup.currentMarker();focusgroup.selected({target:focusmarker,group:focusgroup,groupsobj:groups});focusmarker.selected({target:focusmarker,group:focusgroup,groupsobj:groups});*/}/***确定按键*/function doexec(){jok.focusmarker.click({taget:jok.focusmarker,group:jok.focusgroup});}//?html:
<body onLoad="init();"><input type="button" onclick="donext();" value="下"/><input type="button" onclick="doprev();" value="上"/><input type="button" onclick="doleft();" value="左"/><input type="button" onclick="doright();" value="右"/><input type="button" onclick="doexec();" value="确定"/><div id="debug"></div><iframe id="dataiframe" src="data.html"></iframe><table><tr><td><ul id="box1"><li><span id="reciverbox">收件箱</span></li><li><span id="sendbox">发件箱</span></li><li><span id="infoadd">写信息</span></li><li><span id="birthday">生日信息</span></li></ul></td><td><ul id="box2"><li><span id="record1">记录1</span></li><li><span id="record2">记录2</span></li><li><span id="record3">记录3</span></li><li><span id="record4">记录4</span></li></ul></td></tr></table></body>?
?