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){
		//todo
		if(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);
			//default
			groupsObj.init();

			//iframe
			var iframedoc = null;
			if (document.all){//IE
				iframedoc = 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>