EPGEvent使用文档

用于处理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)