文档章节

ntv.js框架源码解读 - 4navigation.js

coton_chen
 coton_chen
发布于 2015/04/29 16:21
字数 1675
阅读 653
收藏 2

4navigation.js源代码:

       ntv.navigation类,处理页面焦点移动和确认、刷新等操作动作。

       在讲解框架处理焦点移动前,先讲解下机顶盒上焦点移动的工作原理,以便开发者能更好的了解框架采用这种方式的目的和优点。


机顶盒浏览器上页面的焦点移动(控制)原理:

      在PC平台上我们可以通过鼠标来直观的操作页面,而在机顶盒上采用的是遥控器操作,这就面临像页面滚动、页面元素选择等问题。在机顶盒平台上,解决这部分问题需要浏览器与页面通过一些代码来配合处理。下面将详细讲解这部分处理:

1. 焦点选择

    常规的处理方法是通过在页面代码上将希望获取焦点的元素包裹在 <a /> 标签内,如文字、图片。浏览器可识别出这些 <a /> 元素,并且通过这些 <a /> 元素在页面的距离位置来响应遥控器的焦点移动操作。

    代码示例A:

<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="ntv.css">
  <style>
	.list{margin:100px 100px;}
	.list ul{clear: both;}
	.list li{float: left; width: 100px; height: 100px; margin: 50px 50px;}
  </style>
 </head>

 <body>
	<div class="container">
		<div class="list">
			<ul>
				<li><a href="1.html"><img src="images/item_1.png" alt=""></a></li>
				<li><a href="2.html"><img src="images/item_2.png" alt=""></a></li>
				<li><a href="3.html"><img src="images/item_3.png" alt=""></a></li>
				<li><a href="4.html"><img src="images/item_4.png" alt=""></a></li>
			</ul>
			<ul>
				<li><a href="5.html"><img src="images/item_5.png" alt=""></a></li>
				<li><a href="6.html"><img src="images/item_6.png" alt=""></a></li>
				<li><a href="7.html"><img src="images/item_7.png" alt=""></a></li>
				<li><a href="8.html"><img src="images/item_8.png" alt=""></a></li>
			</ul>
		</div>
	</div>
 </body>
 </html>

    页面效果A-1,SHDV中间件浏览器、NGB-H规范中间件浏览器、PC平台(Google Chome)

   

    页面效果A-2,iPanel中间件浏览器:

    

    示例A的代码在机顶盒浏览器上运行的结果如 页面效果A-1 和 页面效果A-2。我们也可以看出基本除了获取焦点元素的边框颜色和大小不一样,其他都相同。这时我们通过遥控器按键 上/下/左/右 就可以移动焦点了,并且按确认键浏览器就会打开当前焦点所在的 <a /> 元素的href属性值内的链接。

    实际业务情况:

    在实际的应用设计时,界面设计可能要求如下需求A:

    1. 要求所有机顶盒下 获取焦点的元素,边框颜色大小统一。(遵循界面风格统一的原则)

     解决方案:通过代码测试,在iPanel、SHDV、NGB-H中间件浏览器下不支持 a:focus{} 伪类来自定义焦点样式,也没有私有API接口来自定义浏览器焦点的颜色。无法实现。

    2. 要求采用换图的方式(1个图片有2种颜色,获取焦点一种,失去焦点一种)来表示 当前获取的焦点,不使用浏览器默认的焦点边框。(采用更美观、友好的设计)

     解决方案:可以通过 <a /> 标签的 onfocus 和 onblur 事件来实现当 <a />元素获取焦点后更换子元素 <img />的 src属性值。但是在SHDV、NGB-H中间件浏览器下无法禁用浏览器默认的焦点边框。无法实现。


   代码示例B:

<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="ntv.css">
  <style>
	.list{margin:50px 100px;}
	.list ul{clear: both;}
	.list li{float: left; width: 100px; height: 100px; margin: 50px 50px;}
	.list li a{display: block; width: 100px; height: 100px;}
	
	.list .item-2{margin-top:80px;}
	.list .item-4{margin-left:80px;}
	.list .item-5{margin-left:20px;}
  </style>
 </head>

 <body>
	<div class="container">
		<div class="list">
			<ul>
				<li><a href=""><img src="images/item_1.png" alt=""></a></li>
				<li class="item-2"><a href=""><img src="images/item_2.png" alt=""></a></li>
				<li><a href=""><img src="images/item_3.png" alt=""></a></li>
			</ul>
			<ul>
				<li class="item-4"><a href=""><img src="images/item_4.png" alt=""></a></li>
				<li class="item-5"><a href=""><img src="images/item_5.png" alt=""></a></li>
				<li><a href=""><img src="images/item_6.png" alt=""></a></li>
			</ul>
			<ul>
				<li><a href=""><img src="images/item_7.png" alt=""></a></li>
				<li><a href=""><img src="images/item_8.png" alt=""></a></li>
			</ul>			
		</div>
	</div>
 </body>
 </html>

  页面效果B,iPanel中间件浏览器

   

  示例B的代码在机顶盒浏览器上运行的结果如 页面效果B。这时我们通过遥控器按键 上/下/左/右 来移动焦点,你会发现下面2种情况:

   1. 当焦点元素1往下按,焦点会跑到7(而不4),往右按会跑到3(而不是2)。与预期焦点移动动作不一致。

   2. 当焦点元素2往下按,焦点会跑到5,往右会跑到3,往左会跑到1。与预期焦点移动动作一致。

   实际业务情况:

    在实际的应用设计时,对于用户的操作,界面上的响应可能有如下需求B:

   1. 当前元素焦点在1,往下是4,往右是2,往左不动,往上不动。

    解决方案:浏览器的默认焦点移动与需求不符。可以实现的方式是通过javascript获取遥控器 上/下/左/右 事件来动态给指定 <a />元素设置 .focus() 事件。

   2. 当前元素焦点在2,往下是5,往右是3,往左是1,往上不动。

    解决方案:浏览器的默认焦点移动与需求一致。

 

2. 页面滚动

    在机顶盒上,由于操作的不便捷性和用户视觉方面的考虑,页面整幅的上下移动(滚动)操作没有,页面都是按照一屏来设计。但是在涉及图文类展示时,如果内容超过一屏,也是需要通过上下滚动的方式来读取过长的图文内容。在PC平台浏览器上如果内容过长,浏览器默认会显示滚动条,用户可以通过拖拉滚动条来实现阅读,但在机顶盒上我们之前提到了设计都是一屏的,所以需要开发者通过编写javascript监听遥控器按键动作来实现内容容器的移动。


页面效果C-1iPanel中间件浏览器

  如页面效果C-1显示,机顶盒上是通过移动内容区域容器来实现过长内容的展示,用户可以通过遥控器 上/下 键来阅读内容。



ntv.js框架如何处理这些问题:


© 著作权归作者所有

coton_chen
粉丝 23
博文 25
码字总数 16287
作品 0
静安
架构师
私信 提问
加载中

评论(4)

robotlee8
robotlee8

引用来自“robotlee8”的评论

怎么没有下文了?

引用来自“coton_chen”的评论

停止维护了。源码不是很复杂,你可以读下源代码。
好的,谢谢
coton_chen
coton_chen

引用来自“robotlee8”的评论

怎么没有下文了?
停止维护了。源码不是很复杂,你可以读下源代码。
robotlee8
robotlee8
怎么没有下文了?
时与光
时与光
ntv.js框架如何处理这些问题, 没有下文吗?
ntv.js框架源码解读 - 3key.js

3key.js源代码: ntv.key类,遥控器键值和系统消息的监听代理接口及遥控器键值的绑定。 ntv.key = function(){}; ntv.key.init = function(){ this.listener_keyevent(); // 键值事件监听,监...

coton_chen
2015/02/05
0
0
ntv.js框架(第四章) - 机顶盒Javscript编写和调试方法

在我们编写Javscript时,首先要分清楚2个概念,1是使用W3C标准来处理HTML DOM元素(例如修改标签HTML、文本、状态、形状等),2是使用中间件规范接口来处理音视频等业务功能(例如播放音视频...

coton_chen
2015/02/02
0
3
ntv.js框架(第二章) - 源代码目录结构

源代码目录结构: css // 包含一些标签默认样式重置、常用class、组件所需的css样式 images // 包含了2张透明图,具体用处后续介绍(可选目录) js // 框架核心代码 js/effect // 框架提供的...

coton_chen
2015/01/27
0
0
ntv.js框架源码解读 - 1common.js和2core.js

1common.js源代码: 全局 $ 对象,类似于jQuery框架的命名形式,用于缩短函数名,精简代码。此文件只包含提供全局作用域的常用对象。 var $ = function(selector){}; // Id选择器的函数封装。...

coton_chen
2015/02/04
0
0
ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项

UI设计: 机顶盒的输出设备为电视机,电视机的图像重现率比计算机的显示器小,靠近边缘部分的文字与图像可能会在电视机中无法看到,所以在进行应用界面设计时,文字与图像尽量设计在屏幕中间...

coton_chen
2015/01/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
2
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
5
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部