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框架如何處理這些問題：