电视EPG（WEB）页面上的焦点导航方案

使用HTML、JS等相关Web前端技术基于Android机顶盒开发电视EPG页面。由于电视端使用遥控器进行焦点控制，我们需要对焦点导航进行处理，使用户进行便捷 的交互。

在Android开发中有一个默认的导航规则，开发者设置好相关属性之后可以通过遥控器导航。在 *** 作遥控器后，它会使当前元素的目标方向上的最近元素获取焦点。web没有这样的规则，我们需要建立一个类似的规则。对当前获得焦点元素在使用遥控器 *** 作（上、下、左、右键）时，使当前元素在上、下、左、右方向对应的元素获得焦点。

tabIndex属性可以设置键盘中的TAB键在页面元素中的移动顺序,即焦点的顺序。默认情况下，普通元素无法获取焦点，只有链接、表单等元素可以获取焦点。所以普通元素需要设置tabindex属性，再使用foucs()方法即可。当tabindex的值 >= 0时，可以通过Tab键获取焦点，而tabindex = -1时Tab键不能获取焦点，只能通过JS获取。当tabindex的值不为-1的时候，使用遥控器 *** 作时焦点获取位置不符合预期。

注：给元素添加样式 outline: none用于去除默认样式。

给需要获取焦点的元素都添加一个相同的类名，如 class="item"，将需要获取焦点的元素都筛选出来。

完成上诉步骤后，通过调用focus()方法给目标元素设置焦点。如：

通过 document.activeElement 可以得到当前界面正获得焦点的元素，十分重要，在建立导航规则后，我们需要通过该元素得到它在各个方向上对应的元素。

我们需要建立这样一个规则：当用户按左键时，由当前焦点元素的左边（合适）元素获取焦点。同理，按上、右、下键时，都有对应方向上合适的元素获得焦点。

原理：首先获取当前焦点元素的位置，在与页面中所有元素的位置进行比较，获取各个方向上最合适的元素。

可通过下面方法设置或修改，需和html中的class保持一致

以左方向为例

添加自定义属性：

nextLeftFocusId 当前元素 左 方向上指定的下一个焦点元素的id

nextUpFocusId当前元素 上 方向上指定的下一个焦点元素的id

nextRightFocusId 当前元素 右 方向上指定的下一个焦点元素的id

nextDownFocusId 当前元素 下 方向上指定的下一个焦点元素的id

在HTML中这样设置：

当该元素获取焦点时，按上键由id为 "nav_item1" 的元素获取焦点，按右键由id为 "img4" 的元素获取焦点。具体实现如下：

在遍历计算之前提前返回。

当元素获取焦点时，我们需要改变它的显示样式，来表示它获取了焦点。

onfocus ：获得焦点

onblur：失去焦点

如：

再实现search_focus和search_blur两个方法，可以分别处理获得焦点和失去焦点的两种样式。

设置未获取焦点的正常状态样式：

设置获得焦点后的样式：

见： https://github.com/fengfancky/WebEPG

博客怎么添加博告网广告赚钱？

关于网络里赚钱的方法，我曾经选择了很多很多，有填加广告的，也有有奖调查的，

...

使用新浪博客的帐户登录之后点击导航条中的管理博客

...q.blog.sina.com.cn/wood007/bbs/topic/tid=10920604

-

网页快照

如何开通博客和使用博客？-说给焦点的博客-

---