<div id="info" class="page"> <div class="contentBox"> <fieldset> <legend class="legText"> infoZone1 </legend> <div class="itemBox" id="infoZone1"> <div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div> <div class="item defItem" id="info_infoZone1_item_1"><span class="text">2</span></div> <div class="item defItem" id="info_infoZone1_item_2"><span class="text">3</span></div> <div class="item defItem" id="info_infoZone1_item_3"><span class="text">4</span></div> <div class="item defItem" id="info_infoZone1_item_4"><span class="text">5</span></div> <div class="item defItem" id="info_infoZone1_item_5"><span class="text">6</span></div> </div> </fieldset> </div> </div>
其中id=“info”的div即为一个Page.(id必须全文唯一)
<div class="itemBox" id="infoZone1"> <div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div> <div class="item defItem" id="info_infoZone1_item_1"><span class="text">2</span></div> <div class="item defItem" id="info_infoZone1_item_2"><span class="text">3</span></div> <div class="item defItem" id="info_infoZone1_item_3"><span class="text">4</span></div> <div class="item defItem" id="info_infoZone1_item_4"><span class="text">5</span></div> <div class="item defItem" id="info_infoZone1_item_5"><span class="text">6</span></div> </div>
其中id=“infoZone1”的div即为一个info Page的一个Zone.(id必须全文唯一)
<div class="item defItem" id="info_infoZone1_item_0"><span class="text">1</span></div>
其中id=“info_infoZone1_item_0”的div即为一个infoZone1 Zone的一个Item。(id必须全文唯一)
一个Page允许有多个不重复Zone，一个Zone允许有多个不重复Item。
Item id以英文字母开头，数字结束，_分隔，规则为：pageId_zoneId_itemName_index(eg: info_infoZone1_item_5),itemName为创建Item时的itemName属性，index从0开始依次累加。
<script type="text/javascript" src="js/vendor/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/mtvcore.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <script type="text/javascript" src="js/initial.js"></script> <script type="text/javascript" src="js/key.js"></script> <script type="text/javascript" src="js/keyevent.js"></script> <script type="text/javascript" src="js/uianimate.js"></script> <script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" language="JavaScript"> var pageParams = { id : 'homePage' }; frw.createPage(pageParams); </script>
<script type="text/javascript" language="JavaScript"> var zoneParams = { id : 'homeZone1',// zone id row : 2,// zone的行数 column : 3,// zone的列数，应设置最大列数 values : [],// zone的每一个Item的value right : 'homeZone2',// zone移动到最右端后切换至哪个zone，值为要切换到的 zone id，若无，可不设置该属性 down : 'homeZone3',// zone移动到最下端后切换至哪个zone，值为要切换到的 zone id，若无，可不设置该属性 left : '',// zone移动到最左端后切换至哪个zone，值为要切换到的 zone id，若无，可不设置该属性 up : ''// zone移动到最上方后切换至哪个zone，值为要切换到的 zone id，若无，可不设置该属性 }; </script>
<script type="text/javascript" language="JavaScript"> for(var i=0;i<6;i++){ zoneParams.values.push({Action:'Function',Function:homeZone2Fun,Value:i}); } </script>
1.{Action:'Function',Function:yourFunction,Value:ObjectValue}回车或按ok键执行开发者自定义function 2.{Action:'Page',Page:pageId}回车或按ok键跳转到指定的pageId Page
<script type="text/javascript" language="JavaScript"> frw.createZone('info',zoneParams); </script>
<script type="text/javascript" language="JavaScript"> var itemParam = { idPrefix : 'info_infoZone1_item_',// Item id前缀 itemName : 'item',// Item 公共className，永远不会被替换 defaultClassName: 'defItem',// Item 默认非聚焦时的className hoverClassName: 'focItem',// Item 聚焦时的className mouseSupport : true // Item 支持鼠标悬浮及单击，不填或false为不支持鼠标 }; frw.createItems('info','infoZone1',itemParam); // 为Zone批量创建Item（第一个参数为pageId，第二个参数为zoneId），需确保该zone属于该page； </script>
frw.console = false;//控制台不输出日志，默认输出，输出格式为：[2013-11-18 11:44:53:610] Key Arrow: down; frw.consoleLog('Key Arrow: down');//方法调用，输出日志
frw.createPage(pageParams);
frw.createZone(pageId,zoneParams);
frw.createItems(pageId,zoneId,itemParam);
frw.findPageById(pageId);//返回Page对象
frw.deletePageById(pageId);//返回被删除的Page对象
mtv.frw.Page[pageId]//返回Page对象 mtv.frw.Page[pageId].Zone[zoneId]//返回Zone对象 mtv.frw.Page[pageId].Zone[zoneId].items//返回Zone的items Item对象集合 mtv.frw.Page[pageId].Zone[zoneId].items[itemIndex]//返回Zone的Item对象 mtv.frw.Page[pageId].Zone[zoneId].values[itemIndex]//返回Zone的value
zoneParams = { id : 'scrollZone', row : 1, values : [], column : 12, up : 'homeZone4', down : 'scrollZone2', scrollObj : new mtv.frw.scrollControl({speed:500,scrollModel:1}),// 滚动对象创建 scrollFunc : testScrollZone//滚动方法调用 };
mtv.frw.scrollControl.prototype.scrollModel = { oneByOne : 1,//一个一个滚动 screenByScreen : 2,//一屏一屏滚动 rowByRow : 3//一行一行滚动 };
function testScrollZone(){ if(CurrentZone.scrollObj){ Loading = true; CurrentZone.scrollObj.horizontalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;}); } }
CurrentZone.scrollObj.verticalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;});
CurrentZone.scrollObj.horizontalScrollRow(mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].items[CurrentZone.item],function(){Loading = false;});
自定义实现方法在keyevent.js内完成
function OnArrowItem(Arrow){ }
function OnChangeItem(Arrow){ }
function OnScrollItem(Arrow){ }
function OnChangeZone(Arrow){ }
function OnEvtEnter(){ var value = mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].values[CurrentZone.item]; if(value){ switch(value.Action){ case 'Page': var page = value.Page; switch(page){ case 'info': keyController.showPage('info','down',true,500); CurrentZone = mtv.frw.Page['info'].Zone['infoZone1']; mtv.frw.Page['info'].currentZoneId = CurrentZone.id; keyController.defaultChangeItem(PrevPage,PrevZone,CurrentPage,CurrentZone); break; }; break; case 'Function': value.Function(value.Value); break; default: break; } } }
function OnEvtAlt(){ keyController.hidePage('down',true,500); }
showPage(pageId, direction, animate, speed, fun); keyController.showPage('info','down',true,500);
pageId：要显示的pageId；direction：从哪个方向显示出来（up,down,left,right）；animate：是否以动画的形式显示；speed：动画显示的速度，单位ms，fun：显示完页面后执行的回调方法.
hidePage(direction, animate, speed, fun); keyController.hidePage('down',true,500);
隐藏当前页面：CurrentPage。direction：从哪个方向开始隐藏页面（up,down,left,right）；animate：是否以动画的形式显示；speed：动画显示的速度，单位ms，fun：隐藏完页面后执行的回调方法.
keyController.returnPage