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

时间 2019-11-12

标签 ntv.js ntv 框架源码解读 4navigation.js navigation 栏目 JavaScript 繁體版

原文原文链接

4navigation.js源代码：
javascript

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

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

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

在PC平台上咱们能够经过鼠标来直观的操做页面，而在机顶盒上采用的是遥控器操做，这就面临像页面滚动、页面元素选择等问题。在机顶盒平台上，解决这部分问题须要浏览器与页面经过一些代码来配合处理。下面将详细讲解这部分处理：
浏览器

‍1. 焦点选择‍框架

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

代码示例A：ui

<!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)：spa

页面效果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-1，iPanel中间件浏览器：

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

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