The Hands Frame application's basic version was developed in chapter 8. The application was upgraded with advanced functions in chapter 12. The application's final version's source code is provided here to give a practical guide for readers.
To the previous Hands Frame advanced version, the latest verson added the VOD URL management technique and a subscene (i.e., Info Scene) management example.
The complete sample application package can be downloaded from the following URL.
▸ Download URL: https://bitbucket.org/handstudio/handsframe/
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>HG_Layout</title> <!-- TODO : Style sheets code --> <link rel=“stylesheet” href=“app/stylesheets/Main.css” type=“text/css”> <!-- TODO: Plugins --> </head> <body onload=“Main.onLoad();” onunload=“Main.onUnload();”> <div id=“scene_main” > <div id=“header”></div> <div id=“category”> <ul> <li class=“work”>Work</li> <li class=“people”>People</li> <li class=“dream”>Dream</li> </ul> </div> <div id=“content”> <div class=“work”> <img alt=“ ” src=“./images/img_title_work.png” class=“title”/> <ul> <li> <img alt=“ ” src=“./images/1_1.png” class=“title”/> <label>What is killer contents? <p>2012.06</p></ label> </li> <li> <img alt=“ ” src=“./images/1_2.png” class=“title”/> <label>Handmade application <p>2012.05</p></label> </li> </ul> </div> <div class=“people”> <img alt=“ ” src=“./images/img_title_people.png” class=“title”/> <ul> <li> <img alt=“ ” src=“./images/2_1.png” class=“title”/> <label>2012 Moments to Remember! <p>2013.01</p></ label> </li> <li> <img alt=“ ” src=“./images/2_2.png” class=“title”/> <label>People<p>2011.01</p></label> </li> </ul> </div> <div class=“dream”> <img alt=“ ” src=“./images/img_title_dream.png” class=“title”/> <ul> <li> <img alt=“ ” src=“./images/4_1.png” class=“title”/> <label>What does your work mean to you? <p>2011.11</ p></label> </li> <li> <img alt=“ ” src=“./images/4_2.png” class=“title”/> <label>Workplace with true visions, is there one in Korea? <p>2011.07</p></label> </li> </ul> </div> </div> <!-- anchor as focus for key events --> <a href=“javascript:void(0);” id=“anchor_category” onkeydown=“Main. category.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_content” onkeydown=“Main. content.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_player” onkeydown=“Main. player.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_info” onkeydown=“Main. info.keyDown();”></a> </div> <!-- INFO Scene element Scene --> <div id=“scene_info” style=“display: none;”> <img src=“./images/img_philosophy.png”> </div> <!-- Player container --> <div id=“player_container”></div> </body> <!-- TODO : Common API --> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/ Common/API/Widget.js”></script> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/ Common/API/TVKeyValue.js”></script> <script type=‘text/javascript’ language=‘javascript’ src=‘$MANAGER_WIDGET/ Common/jquery.js’></script> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/ Common/webapi/1.0/webapis.js”></script> <!-- TODO : Javascript code --> <script language=“javascript” type=“text/javascript” src=“app/javascript/ GetPath.js”></script> <script language=“javascript” type=“text/javascript” src=“app/javascript/ Main.js”></script> </html>
Main.js
var widgetAPI = new Common.API.Widget(); var tvKey = new Common.API.TVKeyValue(); var Main = { category : { elem : jQuery(‘#category’), li : jQuery(‘#category’).find(‘ul > li’), anchor : jQuery(‘#anchor_category’) }, content : { elem : jQuery(‘#content’), div : jQuery(‘#content > div’), anchor : jQuery(‘#anchor_content’) }, // added Player anchor element player : { anchor : jQuery(‘#anchor_player’) }, info : { elem : jQuery(‘#scene_info’), anchor : jQuery(‘#anchor_info’) } }; var index = 0; var content_index = 0; // stores the currently focused element for INFO Scene var focused_comp = ‘category’; // nested URL array indexed by Category and Contents var url = [[getAbsPath(‘resource/1_1.mp4’), getAbsPath(‘resource/1_2.mp4’)], [getAbsPath(‘resource/2_1.mp4’), getAbsPath(‘resource/2_2.mp4’)], [getAbsPath(‘resource/3_1.mp4’), getAbsPath(‘resource/3_2.mp4’)]]; var Player = { init : function(){ try{ var playerInstance = webapis.avplay; playerInstance.getAVPlay(Player.onAVPlayObtained, Player. onGetAVPlayError); }catch(e){ alert(‘######getAVplay Exception :[‘ +e.code + ’] ’ + e.message); } }, onAVPlayObtained : function(avplay){ // callback function that initializes AVPlayer module Main.AVPlayer = avplay; Main.AVPlayer.init({containerID : ‘player_container’, displayRect: { top: 0, left: 0, width: 1280, height: 720 }, autoRatio: true }); }, onGetAVPlayError : function(){ // error handling function for initializing AVPlayer module alert(‘######onGetAVPlayError: ’ + error.message); }, onError : function(){ alert(‘######onError: ’); }, onSuccess : function(){ alert(‘######onSuccess: ’); }, play: function() { try{ jQuery(‘#player_container’).addClass(‘show’); Main.AVPlayer.open(url[index][content_index]); Main.AVPlayer.play(Player.onSuccess, Player.onError); }catch(e){ alert(e.message); } }, stop: function() { jQuery(‘#player_container’).removeClass(‘show’); Main.AVPlayer.stop(); } }; Main.onLoad = function() { this.focus(); // assigns the initial focus widgetAPI.sendReadyEvent(); Main.loadContent(); // loads View contents linked to the current Category Player.init(); }; // changes contents to match new Category selection Main.loadContent = function(){ Main.content.div.hide(); Main.content.div.eq(index).show(); }; Main.onUnload = function() { }; Main.enableKeys = function() { }; // application's initial focus Main.focus = function(){ Main.category.anchor.focus(); Main.category.elem.addClass(‘focus’); Main.category.li.eq(index).addClass(‘focus’); }; Main.category.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: widgetAPI.sendReturnEvent(); break; case tvKey.KEY_RIGHT: Main.content.anchor.focus(); Main.category.elem.removeClass(‘focus’); Main.content.elem.addClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(content_index). addClass(‘focus’); focused_comp = ‘content’; break; case tvKey.KEY_UP: if(index > 0){ Main.category.li.eq(index).removeClass(‘focus’); Main.category.li.eq(--index).addClass(‘focus’); Main.loadContent(); } break; case tvKey.KEY_DOWN: if(index < Main.category.li.size() − 1){ Main.category.li.eq(index).removeClass(‘focus’); Main.category.li.eq(++index).addClass(‘focus’); Main.loadContent(); } break; case tvKey.KEY_INFO : Main.info.elem.show(); Main.info.anchor.focus(); break; default: alert(“Unhandled key”); break; } }; Main.content.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: widgetAPI.sendReturnEvent(); break; case tvKey.KEY_LEFT: if(content_index == 1){ Main.content.div.eq(index).find(‘li’).eq(content_index). removeClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(--content_index). addClass(‘focus’); }else{ Main.category.anchor.focus(); Main.content.elem.removeClass(‘focus’); Main.category.elem.addClass(‘focus’); focused_comp = ‘category’; } break; case tvKey.KEY_RIGHT: if(content_index == 0){ Main.content.div.eq(index).find(‘li’).eq(content_index). removeClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(++content_index). addClass(‘focus’); }else{ return false; } break; case tvKey.KEY_ENTER: Player.play(); Main.player.anchor.focus(); break; case tvKey.KEY_INFO : Main.info.elem.show(); Main.info.anchor.focus(); break; default: break; } }; Main.player.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: event.preventDefault(); Player.stop(); Main.content.anchor.focus(); break; case tvKey.KEY_PLAY: Player.play(); break; case tvKey.KEY_STOP: Player.stop(); Main.content.anchor.focus(); break; default: break; } }; Main.info.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: event.preventDefault(); Main.info.elem.hide(); if(focused_comp==‘category’){ Main.category.anchor.focus(); }else if(focused_comp==‘content’){ Main.content.anchor.focus(); } break; default: break; } };
function getAbsPath(linkString) { var sPath = null; var sLocation = window.location.href; var sRoot = sLocation.substring(0, sLocation.lastIndexOf(‘/’) + 1); sLocation = unescape(sLocation); sRoot = unescape(sRoot); if (sRoot.indexOf(‘file://localhost/’) != −1 && (sLocation.indexOf(‘C:’) != −1 || sLocation.indexOf(‘D:’) != −1)) { sPath = sRoot.split(‘file://localhost/’)[1].replace(/\/g, ‘/’); } else if (sRoot.indexOf(‘file://localhost/’) != −1) { sPath = ‘/’ + sRoot.split(‘file://localhost/’)[1]; } else if (sRoot.indexOf(‘file://C/’) != −1 || sRoot.indexOf(‘file://c/’) != −1) { sPath = ‘C://’ + (sRoot.indexOf(‘file://C/’) != −1 ? sRoot. split(‘file://C/’)[1] : sRoot.split(‘file://c/’)[1]); } else if (sRoot.indexOf(‘file://D/’) != −1 || sRoot.indexOf(‘file://d/’) != −1) { sPath = ‘D://’ + (sRoot.indexOf(‘file://D/’) != −1 ? sRoot. split(‘file://D/’)[1] : sRoot.split(‘file://d/’)[1]); } else { sPath = sRoot; } return sPath+linkString; }
Main.css
* { padding: 0; margin: 0; border: 0; } /* Layout */ body { width: 1280px; height: 720px; overflow: hidden; } #scene_main{ display: inline-block; width: 1280px; height: 720px; background : url(“../../images/bg_main.jpg”) no-repeat; } #header { height: 65px; } #header .slogan{ float: left; } #header .appName{ float: right; } #category { float: left; width: 235px; position: absolute; top: 87px; } #category ul{ list-style: none; } #category ul li{ width: 235px; height: 50px; color: #fff; font-size: 20px; line-height: 50px; text-align: center; } #category.focus ul li.focus{ color: #fff; background: url(“../../images/btn_menu.png”) top; } #category.focus ul li.selected{ color: #c62ad3; background: url(“../../images/btn_menu.png”) bottom; } #content{ float: right; position: absolute; left: 313px; top: 92px; width: 900px; } #content > div{ width: 100%; display: none; } #content > div > div.title{ display: inline-block; width: 380px; height: 23px; } #content.focus > div{ color: red; } #content ul { list-style: none; position: relative; top: 35px; } #content ul li{ float: left; width: 450px; } #content ul li img{ width: 394px; height: 219px; } #content.focus ul li.focus img{ border: 6px solid #c409d2; } #content ul li label{ font-size: 24px; color: #fff; position: relative; display: block; top: 10px; } #content ul li label p{ font-size: 18px; color: #acacac; } #scene_info{ width: 1280px; height: 650px; background: #242424; position: absolute; top: 70px; } #scene_info img{ position: relative; top: 50px; left: 15px; } #player_container { position: absolute; width: 1280px; height: 720px; opacity: 0; left: 0; top: 0; } #player_container.show { opacity: 1; }
<!DOCTYPE html> <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>HG_Layout</title> <!-- TODO : Style sheets code --> <link rel=“stylesheet” href=“app/stylesheets/Main.css” type=“text/ css”> <!-- TODO: Plugins --> </head> <body onload=“Main.onLoad();” onunload=“Main.onUnload();”> <!-- Main Scene element --> <div id=“scene_main” style=“display: block;”> <div id=“convergence_help”>Connecting to a Mobile Device…</div> <div id=“header”> <div class=“login”> ID : <input type=“text” id=“login_form” maxlength=“5” onkeydown=“Main.login.keyDown();”/></div> </div> <div id=“category”> <ul> <li class=“work”>Work</li> <li class=“people”>People</li> <li class=“dream”>Dream</li> </ul> </div> <div id=“content”> <div class=“work”> <img alt=“” src=“./images/img_title_work.png” class=“title”/> <ul> <li> <img alt=“” src=“./images/1_1.png” class=“title”/> <label>What is killer contents? <p>2012.06</p></ label> </li> <li> <img alt=“” src=“./images/1_2.png” class=“title”/> <label>Handmade application <p>2012.05</p></label> </li> </ul> </div> <div class=“people”> <img alt=“” src=“./images/img_title_people.png” class=“title”/> <ul> <li> <img alt=“” src=“./images/2_1.png” class=“title”/> <label>2012 Moments to Remember! <p>2013.01</p></ label> </li> <li> <img alt=“” src=“./images/2_2.png” class=“title”/> <label>People<p>2011.01</p></label> </li> </ul> </div> <div class=“dream”> <img alt=“” src=“./images/img_title_dream.png” class=“title”/> <ul> <li> <img alt=“” src=“./images/4_1.png” class=“title”/> <label>What does your work mean to you? <p>2011.11</ p></label> </li> <li> <img alt=“” src=“./images/4_2.png” class=“title”/> <label>Workplace with true visions, is there one in Korea? <p>2011.07</p></label> </li> </ul> </div> </div> <!-- anchor as focus for key events --> <a href=“javascript:void(0);” id=“anchor_category” onkeydown=“Main. category.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_content” onkeydown=“Main. content.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_player” onkeydown=“Main. player.keyDown();”></a> <a href=“javascript:void(0);” id=“anchor_info” onkeydown=“Main. info.keyDown();”></a> </div> <!-- INFO Scene element --> <div id=“scene_info” style=“display: none;”> <img src=“./images/img_philosophy.png”> </div> <div id=“player_container”></div> </body> <!-- TODO : Common API --> <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/TVKeyValue. js”></script> <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/Widget. js”></script> <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/Plugin. js”></script> <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/Plugin/Define. js”></script> <!-- IME Module --> <script type=“text/javascript” language=‘javascript’ src=“$MANAGER_WIDGET/ Common/IME_XT9/ime.js”></script> <script type=“text/javascript” language=‘javascript’ src=“$MANAGER_WIDGET/ Common/IME_XT9/inputCommon/ime_input.js”></script> <script type=‘text/javascript’ language=‘javascript’ src=‘$MANAGER_WIDGET/ Common/jquery.js’></script> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/ Common/webapi/1.0/webapis.js”></script> <!-- TODO : Javascript code --> <script language=“javascript” type=“text/javascript” src=“app/javascript/ GetPath.js”></script> <script language=“javascript” type=“text/javascript” src=“app/javascript/ Main.js”></script> </html>
Main.js
var widgetAPI = new Common.API.Widget(); var tvKey = new Common.API.TVKeyValue(); var Main = { category : { elem : jQuery(‘#category’), li : jQuery(‘#category’).find(‘ul > li’), anchor : jQuery(‘#anchor_category’), }, content : { elem : jQuery(‘#content’), div : jQuery(‘#content > div’), anchor : jQuery(‘#anchor_content’) }, player : { anchor : jQuery(‘#anchor_player’) }, info : { elem : jQuery(‘#scene_info’), anchor : jQuery(‘#anchor_info’) }, login : { elem : jQuery(‘#header > .login’), form : jQuery(‘#login_form’) } }; // declares an IME object var oIME = null; // toggles login status var login_flag = false; var index = 0; var content_index = 0; var focused_comp = ‘category’; // stores the currently focused element for INFO Scene // nested URL array indexed by Category and Contents var url = [[getAbsPath(‘resource/1_1.mp4’), getAbsPath(‘resource/1_2.mp4’)], [getAbsPath(‘resource/2_1.mp4’), getAbsPath(‘resource/2_2.mp4’)], [getAbsPath(‘resource/3_1.mp4’), getAbsPath(‘resource/3_2.mp4’)]]; var Player = { init : function(){ try{ var playerInstance = webapis.avplay; playerInstance.getAVPlay(Player.onAVPlayObtained, Player. onGetAVPlayError); }catch(e){ alert(‘######getAVplay Exception :[‘ +e.code + ’] ’ + e.message); } }, onAVPlayObtained : function(avplay){ // callback function that initializes AVPlayer module Main.AVPlayer = avplay; Main.AVPlayer.init({zIndex : 2, containerID : ‘player_container’, displayRect: { top: 0, left: 0, width: 1280, height: 720 }, autoRatio: true }); }, onGetAVPlayError : function(){ // error handling function for initializing AVPlayer module alert(‘######onGetAVPlayError: ‘ + error.message); }, onError : function(){ alert(‘######onError: ’); }, onSuccess : function(){ alert(‘######onSuccess: ’); }, play: function() { try{ alert(‘url[index][content_index] : !!!!!!!!!!’+url[index] [content_index]); jQuery(‘#player_container’).addClass(‘show’); Main.AVPlayer.open(url[index][content_index]); Main.AVPlayer.play(Player.onSuccess, Player.onError); }catch(e){ alert(e.message); } }, stop: function() { jQuery(‘#player_container’).removeClass(‘show’); Main.AVPlayer.stop(); } }; Main.onLoad = function() { this.focus(); // assigns the initial focus widgetAPI.sendReadyEvent(); Main.loadContent(); // loads View contents linked to the current Category Player.init(); // initializes Player module }; Main.loadContent = function(){ jQuery(‘#content’).find(‘div’).hide(); jQuery(‘#content’).find(‘div’).eq(index).show(); }; // event handling function for the application exit event Main.onUnload = function() { if(oIME){ oIME.onClose(); } }; Main.enableKeys = function() { }; Main.focus = function(){ Main.category.anchor.focus(); Main.category.elem.addClass(‘focus’); Main.category.li.eq(index).addClass(‘focus’); }; Main.category.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: widgetAPI.sendReturnEvent(); break; case tvKey.KEY_LEFT: break; case tvKey.KEY_RIGHT: Main.content.anchor.focus(); Main.category.elem.removeClass(‘focus’); Main.content.elem.addClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(content_index). addClass(‘focus’); focused_comp = ‘content’; break; case tvKey.KEY_UP: if(index == 0){ if(!login_flag){ Main.login.form.focus(); Main.category.elem.removeClass(‘focus’); Main.login.elem.addClass(‘focus’); } }else{ Main.category.li.eq(index).removeClass(‘focus’); Main.category.li.eq(--index).addClass(‘focus’); Main.loadContent(); } break; case tvKey.KEY_DOWN: if(index < Main.category.li.size() − 1){ Main.category.li.eq(index).removeClass(‘focus’); Main.category.li.eq(++index).addClass(‘focus’); Main.loadContent(); } break; case tvKey.KEY_INFO : Main.info.elem.show(); Main.info.anchor.focus(); break; default: alert(“Unhandled key”); break; } }; Main.content.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: case tvKey.KEY_PANEL_RETURN: widgetAPI.sendReturnEvent(); break; case tvKey.KEY_LEFT: if(content_index == 1){ Main.content.div.eq(index).find(‘li’).eq(content_index). removeClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(--content_index). addClass(‘focus’); }else{ Main.category.anchor.focus(); Main.content.elem.removeClass(‘focus’); Main.category.elem.addClass(‘focus’); focused_comp = ‘category’; } break; case tvKey.KEY_RIGHT: if(content_index == 0){ Main.content.div.eq(index).find(‘li’).eq(content_index). removeClass(‘focus’); Main.content.div.eq(index).find(‘li’).eq(++content_index). addClass(‘focus’); }else{ return false; } break; case tvKey.KEY_ENTER: Player.play(); Main.player.anchor.focus(); break; case tvKey.KEY_INFO : Main.info.elem.show(); Main.info.anchor.focus(); break; default: break; } }; Main.player.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: event.preventDefault(); Player.stop(); Main.content.anchor.focus(); break; case tvKey.KEY_PLAY: Player.play(); break; case tvKey.KEY_STOP: Player.stop(); Main.content.anchor.focus(); break; default: break; } }; Main.info.keyDown = function() { var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: event.preventDefault(); Main.info.elem.hide(); if(focused_comp==‘category’){ Main.category.anchor.focus(); }else if(focused_comp==‘content’){ Main.content.anchor.focus(); } break; default: break; } }; Main.login.keyDown = function(){ var keyCode = event.keyCode; switch(keyCode) { case tvKey.KEY_RETURN: event.preventDefault(); widgetAPI.sendReturnEvent(); break; case tvKey.KEY_DOWN: Main.category.anchor.focus(); Main.login.elem.removeClass(‘focus’); Main.category.elem.addClass(‘focus’); break; case tvKey.KEY_ENTER: focusIME(); break; default: break; } }; var focusIME = function() { oIME = new IMEShell_Common(); oIME.inputboxID = “login_form”; oIME.onKeyPressFunc = function(nKeyCode) { switch(nKeyCode) { case tvKey.KEY_RETURN: break; case tvKey.KEY_EXIT: break; case tvKey.KEY_ENTER: form_submit(); return false; break; } }; Main.login.form.focus(); oIME.onShow(); }; var form_submit = function(){ Main.login.elem.empty(); Main.login.elem.text(‘Welcome ! ‘+Main.login.form.val() + ‘.’); login_flag = true; // toggles login status Main.category.anchor.focus(); Main.login.elem.removeClass(‘focus’); Main.category.elem.addClass(‘focus’); }; var Convergence = { api: window.webapis.customdevice || {}, aDevice: [], init: function() { this.api.registerManagerCallback(Convergence.registerManager); this.api.getCustomDevices(Convergence.getCustomDevices); }, registerManager: function(oManagerEvent) { var _this = Convergence; switch(oManagerEvent.eventType) { case _this.api.MGR_EVENT_DEV_CONNECT: _this.api.getCustomDevices(Convergence.getCustomDevices); break; case _this.api.MGR_EVENT_DEV_DISCONNECT: _this.api.getCustomDevices(Convergence.getCustomDevices); break; default: break; } }, getCustomDevices: function(aDevice) { var _this = Convergence; _this.aDevice = aDevice; for(var i = 0; i < aDevice.length; i++) { var sID = aDevice[i].getUniqueID(); aDevice[i].registerDeviceCallback(function(oDeviceInfo) { _this.registerDevice(sID, oDeviceInfo); }); } }, registerDevice: function(sID, oDeviceInfo) { var mobileKeyEvent = jQuery.parseJSON(oDeviceInfo.data.message1); handleMobileEvent(mobileKeyEvent.msg); }, sendMessage: function(oDevice, sMessage) { return oDevice.sendMessage(sMessage); }, broadcastMessage: function(sMessage) { return this.aDevice[0] && this.aDevice[0].broadcastMessage(sMessage); }, uploadFile: function(sName) { // : image filename var sUrl = ‘http://127.0.0.1/ws/app/’ + curWidget.id + ‘/file/’ + sName; return ‘<img src=“’ + sUrl + ‘”/>’; } }; Convergence.init(); // processes the requested event var handleMobileEvent = function(event){ switch(event) { case ‘msg_show’ : $(‘#convergence_help’).show(); break; case ‘msg_hide’ : $(‘#convergence_help’).hide(); break; } };
GetPath.js
function getAbsPath(linkString) { var sPath = null; var sLocation = window.location.href; var sRoot = sLocation.substring(0, sLocation.lastIndexOf(‘/’) + 1); sLocation = unescape(sLocation); sRoot = unescape(sRoot); if (sRoot.indexOf(‘file://localhost/’) != −1 && (sLocation.indexOf(‘C:’) != −1 || sLocation.indexOf(‘D:’) != −1)) { sPath = sRoot.split(‘file://localhost/’)[1].replace(/\/g, ‘/’); } else if (sRoot.indexOf(‘file://localhost/’) != −1) { sPath = ‘/’ + sRoot.split(‘file://localhost/’)[1]; } else if (sRoot.indexOf(‘file://C/’) != −1 || sRoot.indexOf(‘file://c/’) != −1) { sPath = ‘C://’ + (sRoot.indexOf(‘file://C/’) != −1 ? sRoot. split(‘file://C/’)[1] : sRoot.split(‘file://c/’)[1]); } else if (sRoot.indexOf(‘file://D/’) != −1 || sRoot.indexOf(‘file://d/’) != −1) { sPath = ‘D://’ + (sRoot.indexOf(‘file://D/’) != −1 ? sRoot. split(‘file://D/’)[1] : sRoot.split(‘file://d/’)[1]); } else { sPath = sRoot; } return sPath+linkString; }
Main.css
* { padding: 0; margin: 0; border: 0; } /* Layout */ body { width: 1280px; height: 720px; background-color: #fff; background : url(“../../images/bg_main.jpg”) no-repeat; overflow: hidden; } #scene_main{ display: inline-block; width: 1280px; height: 720px; } #header { height: 65px; } #header .slogan{ float: left; } #header .appName{ float: right; } #category { float: left; width: 235px; position: absolute; top: 87px; } #category ul{ list-style: none; } #category ul li{ width: 235px; height: 50px; color: #fff; font-size: 20px; line-height: 50px; text-align: center; } #category.focus ul li.focus{ color: #fff; background: url(“../../images/btn_menu.png”) top; } #category.focus ul li.selected{ color: #c62ad3; background: url(“../../images/btn_menu.png”) bottom; } #content{ float: right; position: absolute; left: 313px; top: 92px; width: 900px; } #content > div{ width: 100%; display: none; } #content > div > div.title{ display: inline-block; width: 380px; height: 23px; } #content.focus > div{ color: red; } #content ul { list-style: none; position: relative; top: 35px; } #content ul li{ float: left; width: 450px; } #content ul li img{ width: 394px; height: 219px; } #content.focus ul li.focus img{ border: 6px solid #c409d2; } #content ul li label{ font-size: 24px; color: #fff; position: relative; display: block; top: 10px; } #content ul li label p{ font-size: 18px; color: #acacac; } #scene_info{ width: 1280px; height: 650px; background: #242424; position: absolute; top: 70px; } #scene_info img{ position: relative; top: 50px; left: 15px; } /*Advanced Functions*/ #header .login { position: absolute; top: 20px; left: 750px; color: #fff; } #header .login #login_form { height: 25px; } #header .login.focus #login_form{ border: 6px solid #c409d2; } #convergence_help{ position: absolute; top: 23px; left: 510px; color: #eee; display: none; } #player_container { position: absolute; width: 1280px; height: 720px; opacity: 0; left: 0; top: 0; } #player_container.show { opacity: 1; }