数字电视遥控交互设计
本文介绍了一种基于数字电视遥控器的交互设计方案，通过自定义的JS对象实现遥控器上、下、左、右按键的功能控制。案例展示了如何使用这些自定义对象管理不同功能点及其事件，包括选中、失选及点击事件。
数字电视遥控器，只有为数不多的控制键，怎么样利用好，是对开发者一个挑战。
其中上、下、左、右、选择、五个键是最为重要的，本案例是一个电视短信，主要页面是左右两栏
左边是一个菜单列表，右边是详细列表。
一、采用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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
