用于处理EPG开发中的焦点移动、事件监听回调、页面滚动、焦点路径记忆等。
强制要求
类名：item
id格式：如area0_0
处理焦点移动思路
遍历查找出指定方向（遥控器方向键所指方向）上与当前焦点元素最合适（按照指定规则）的元素，并将该元素设置为焦点元素。
焦点与暗焦点
焦点用于展示EPG中用户通过遥控器操作选中的元素，通常使用高亮或特殊的样式来区别展示。在本EPGEvent组件中，设置item类的元素可以获得焦点。在css中使用focus类来设置元素获取焦点后的样式，如：
.floatEPG .item.focus{
color: white !important;
background: linear-gradient(116deg,rgba(230,115,0,1)0%,rgba(237,154,0,1)100%);
}
获得焦点的元素的子元素，通过如下设置：
.floatEPG .item.focus .name{
color: white !important;
}
.floatEPG .item.focus .num{
color: white !important;
}
结合使用!important来覆盖其他样式设置
暗焦点用于特别标识用户选择的分类、栏目等，用于提示用户展示的子分类、列表、页面等与该项存在联系。使用第三种样式来区别展示，不同于默认样式和焦点样式。
方式一：使用select类（适合单个元素）
//css
.floatEPG .item.select{
color: red;
}
//...
//js
EPGEvent.selectViewFun:function(view) //指定元素设置暗焦点
EPGEvent.unSelectViewFun()//清除暗焦点
方式二：使用dark类，与焦点路径记忆功能联合使用。（适合多分类）
//css
.floatEPG .item.dark {
color:rgba(230,115,0,1);
}
//...
//js
EPGEvent.setOpenFocusMemory(true);//开启路径记忆
两种方式不建议同时使用
指定焦点（特殊处理）
给元素设置nextXXXFocusId属性，支持html和js两种方式
html方式:
<div class = "item" id="area0_0" nextLeftFocusId = "area0_1"><div/>
js方式：
view.setAttribute("nextLeftFocusId ","area0_1");
共5种这类属性：
nextLeftFocusId：向左
nextUpFocusId：向上
nextRightFocusId：向右
nextDownFocusId：向下
nextNoFocusId：禁止移动
使用
EPGEvent为window的对象，可直接调用，如：EPGEvent.initFocus($("area0_0"))。
1.焦点初始化、
//初始化焦点
initFocus:function(view)
2.初始化页面居中滚动
/**
* 初始化页面居中滚动
* @param {是否居中滚动} isScrollCenterMode1
* @param {容器到页面顶部的距离} viewMargin1
* @param {容器长度} contentD1
* @param {滚动元素ID} scrollId1
* @param {区域标示} flag1
* @param {页面长度} pageHeight1
*/
initFocusData:function(isScrollCenterMode1,viewMargin1,contentD1,scrollId1,flag1,pageHeight1)
多个需居中滚动列表调用示例：
EPGEvent.initFocusData(true, 110, 500, "scroll", "area2_", 750);
EPGEvent.initFocusData(true, 0, 720, "vodScroll", "area3_",80*20);
3.页面需滚动到指定元素初始化焦点
//初始化页面时的初始化焦点
initPageFocus:function(view)
4.获取居中滚动列表信息
//获取滚动列表信息
getScrollContents:function()
5.获取当前焦点元素
//获取当前焦点元素
getCurrentEle:function()
6.清除焦点元素
clearCurrentEle:function()
7.清除焦点状态
blurFocus:function()
8.设置焦点移动模式
//MODE_MIN_DISTANCE :0,默认,就近模式
//MODE_LEFT :1,左模式
//MODE_NO_BOUNDARY :2,无界模式
setFocusMode:function(mode)
调用示例：
EPGEvent.setFocusMode(EPGEvent.MODE_NO_BOUNDARY);
9.开启焦点路径记忆
//b 布尔值
setOpenFocusMemory:function(b)
10.是否保留焦点路径
//b 布尔值
isSaveNeedLoop:function(b)
11.元素列表是否动态刷新
//b 布尔值
setDynamicQuery:function(b)
12.焦点拦截
//intercept 布尔值
setInterceptOnce:function(intercept)
13.焦点拦截回调
//fun 回调函数
interceptFocusCallback:function(fun)
14.创建区域
//flags 区域标示数组，如：["area0_"];
//返回区域对象数组
createArea:function(flags)
示例：
var areas = EPGEvent.createArea(["area0_","area1_"]);
区域监听示例：
//点击事件监听
areas[0].clickListener = function(view,num){}
//进入区域监听
areas[0].enterAreaListener = function(view,num){}
//退出区域监听
areas[0].exitAreaListener = function(view,num){}
//获取焦点监听
areas[1].focusListener = function(view,num){}
//失去焦点监听
areas[1].blurListener= function(view,num){}
15.获取焦点路径
getFocusPath:function()
16.添加蒙层
mask:function()
17.移除蒙层
removeMask:function()
18.监听焦点得失事件
/**
* 监听焦点的得失状态
* @param {获得焦点} fun1
* @param {失去焦点} fun2
*/
addFocusListener:function(fun1,fun2)
19.监听点击事件
//fun 回调函数
onEnter:function(fun)
20.监听方向键
//fun 回调函数
addDIRListener:function(fun)
21.监听返回键
//fun 回调函数
backEvent:function(fun)
22.监听音量键
//fun静音回调、fun1音量加回调、fun2音量减回调
volumeEvent:function(fun,fun1,fun2)
23.菜单键
//fun 回调函数
menuEvent:function(fun)
24.按键监听
//fun 回调函数
actionEventListener:function(fun)
网友评论