index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>superTv</title> <script src="js/jquery-2.1.3.min.js"></script> //引用包 <script src="js/vue.min.js"></script> //路由 <script src="js/vue-router.min.js"></script> //http接口请求 <script src="js/vue-resource.js"></script> <script src="js/main.js"></script> <link rel="stylesheet" type="text/css" href="css/home.css"> </head> <body> <div id="app"> <router-view></router-view> </div> <div class="container"> <a id="href_true" style="display: none;"></a> <input type="text" value="0" id="flg" name="flg"> <div class="title"></div> </div> <!--<form name="indexForm" id="indexForm" action="" method="post"></form>--> <script type="x-template" id="registerAgreement"> <div id="path" data-from="/registerAgreement"> <div class="superTvBackground"> <div class="button-list"> <button class="buts superTvBackgroundLeftBtn" id="superTvBackgroundLeftBtn"></button> <button class="buts superTvBackgroundCenterBtn" id="superTvBackgroundCenterBtn"></button> <button class="buts superTvBackgroundRightBtn" id="superTvBackgroundRightBtn"></button> </div> </div> <input type="hidden" id="pagename" value="pgtitle=专题H5;pgcate=10003"> </div> </script> <script> function getParam(key) { return decodeURIComponent((new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; } var actId = getParam('actId'); var sevenActUrl = ''; var prizeActUrl = ''; var lowPriceActUrl = ''; var jump = ''; var jumpParams = ''; var registerAgreement = { template: '#registerAgreement', data: function () { return {} }, mounted: function () { $(".title").html("注册协议"); var _v=this; _v.$http.jsonp('https://URL/api/ats/activity/activity_5002_getTemplate',{ params: { actId:actId, format : 'jsonp', cb: 'callback' }, jsonp : 'callback', jsonpCallback : 'callback' }).then(function(res){ if(res.data.statuSCode==10000){ var result = res.data.result.list; $.each(result, function(i, sale){ if(i == 0) { sevenActUrl = sale.redirectUrl; } else if(i == 1) { prizeActUrl = sale.redirectUrl; } else if(i == 2) { lowPriceActUrl = sale.redirectUrl; jump = JSON.parse(lowPriceActUrl); jumpParams = { 'position': -1, 'jump': jump }; } }); } }),function(){ }; } }; var routes = [ {path: '/', redirect: '/registerAgreement'}, {path: '/registerAgreement', component: registerAgreement, name: 'registerAgreement'}, ]; var router = new VueRouter({routes: routes}); var app = new Vue({router: router}).$mount('#app'); !(function (win) { var setBasicFontSize = function () { var element = win.document.documentElement; element.style.fontSize = element.clientWidth / 7.2 + 'px'; }; setBasicFontSize(); win.addEventListener("DOMContentLoaded", setBasicFontSize, false); win.addEventListener("resize", setBasicFontSize, false); })(window); </script> </body> </html>
辅助功能的main.js
//(function(){ var MAIN = (function () { var body = $('body'); return { area: 0, move0: '', moveRight: { "superTvBackgroundLeftBtn": "superTvBackgroundCenterBtn", "superTvBackgroundCenterBtn": "superTvBackgroundRightBtn" }, moveLeft: { "superTvBackgroundRightBtn": "superTvBackgroundCenterBtn", "superTvBackgroundCenterBtn": "superTvBackgroundLeftBtn" }, //得到焦点 onFocus: function (_class) { $('.' + _class).addClass('_foc'); }, //失去焦点 lostFocus: function (_class) { $('.' + _class).removeClass('_foc'); }, //键盘事件 keyHandler: function (event) { console.log(event); // $(".membershipStatutesBut").blur(); // $(".bar").blur(); var keyCode = event.which ? event.which : event.keyCode; switch (keyCode) { case 37: this.move_left(); break; case 39: this.move_right(); break; case 13: event.preventDefault(); this.key_ok(); break; case 8: this.goback(); break; default: break; } }, //返回事件 goback: function () { router.push("/"+$("#path").html()); location. reload(); }, //确认点击事件 key_ok: function () { var _id = $('._foc')[0].id; var from = $("#path").attr("data-from"); if (from != undefined) { var timestamp = (new Date()).getTime(); if (_id == 'superTvBackgroundLeftBtn') { $("#flg").val(0); AndroidWebView.reloadUrl(sevenActUrl); } if (_id == 'superTvBackgroundCenterBtn') { $("#flg").val(1); AndroidWebView.reloadUrl(prizeActUrl); } if (_id == 'superTvBackgroundRightBtn') { $("#flg").val(2); AndroidWebView.showInfoFromJs(JSON.stringify(jumpParams)); } //window.location.href = url; //this.actionForm(url); } }, //actionForm: function(url) { //document.getElementById('indexForm').action = url; //document.getElementById("indexForm").submit(); //}, move_right: function () { var _v = this; switch (_v.area) { case -1: break; case 0: if (_v.moveRight[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveRight[_v.move0]; _v.onFocus(_v.move0); } break; default: break; } if ($('._foc')[0] != undefined) { var _id = $('._foc')[0].id; if (_id == 'prev' || _id == 'next') { $("#" + _id).click(); } } }, move_left: function () { var _v = this; switch (_v.area) { case -1: break; case 0: if (_v.moveLeft[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveLeft[_v.move0]; _v.onFocus(_v.move0); } break; default: break; } if ($('._foc')[0] != undefined) { var _id = $('._foc')[0].id; if (_id == 'prev' || _id == 'next') { $("#" + _id).click(); } } }, move_up: function () { var _v = this; switch (_v.area) { case -1: $(".bar").focus(); var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); var rulesbarH = $('.rules-bar').height(); var barH = $('.rules-bar .bar').height(); var barNm = Math.ceil((textH - boxH) / 400); if (barNm == 2) { var barmove = rulesbarH - barH; } else { var barmove = (rulesbarH-68) / barNm; } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { var newRulesTransY = $('.rules-txt')[0].style.webkitTransform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.webkitTransform.replace(/[^0-9|.]/g, ''); if (newRulesTransY >= 400) { if (parseInt(newRulesTransY) >= textH - boxH) { newRulesTransY = (barNm) * 400; console.log("最后二页"); } $('.rules-txt').css('webkitTransform', 'translateY(' + -(newRulesTransY - 400) + 'px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(' + (parseFloat(barmoveY) - barmove) + 'px)'); } else { return; } } else { var newRulesTransY = $('.rules-txt')[0].style.transform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.transform.replace(/[^0-9]/g, ''); if (newRulesTransY >= 400) { $('.rules-txt').css('transform', 'translateY(' + -(newRulesTransY - 400) + 'px)'); $('.rules-bar .bar').css('transform', 'translateY(' + (parseInt(barmoveY) - barmove) + 'px)'); } else { return; } } break; case 0: if (_v.moveUp[_v.move0] != 0 && _v.moveUp[_v.move0] != undefined) { if (_v.moveUp[_v.move0] == "bar") { _v.area = -1; } _v.lostFocus(_v.move0); _v.move0 = _v.moveUp[_v.move0]; _v.onFocus(_v.move0); } break; case 1: //跳出再进 this.move0 = 'membershipStatutesBut'; this.onFocus("membershipStatutesBut"); this.area = 0; AndroidWebView.ButttonFocus(false); break; default: //首次 if ($('.rules-bar').is(':hidden')) { this.move0 = 'membershipStatutesBut'; this.onFocus("membershipStatutesBut"); this.area = 0; } else { this.onFocus("bar"); this.area = -1 } AndroidWebView.ButttonFocus(false); break; } }, move_down: function () { var _v = this; switch (_v.area) { case -1: $(".bar").focus(); var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); var rulesbarH = $('.rules-bar').height(); var barH = $('.rules-bar .bar').height(); var barNm = Math.ceil((textH - boxH) / 400); if (barNm == 2) { var barmove = rulesbarH - barH; } else { var barmove = (rulesbarH-68) / barNm; } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { var newRulesTransY = $('.rules-txt')[0].style.webkitTransform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.webkitTransform.replace(/[^0-9|.]/g, ''); // console.log(barmoveY); // console.log(barmove); var list = +parseFloat(barmoveY) + +barmove; if (newRulesTransY >= (textH - boxH)) { this.lostFocus("bar"); if($(".privacyPolicyBut").length > 0) { this.move0= 'privacyPolicyBut'; this.onFocus("privacyPolicyBut"); this.area = 0; } else { //跳到系统按钮 this.area= 1; AndroidWebView.ButttonFocus(true); } return; } else { if (parseInt(newRulesTransY) + 400 >= textH - boxH) { console.log(newRulesTransY); console.log("最后一页"); newRulesTransY = textH - boxH - 400; } } if (textH > boxH) { $('.rules-txt').css('webkitTransform', 'translateY(' + -(parseInt(newRulesTransY) + 400) + 'px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(' + (list) + 'px)'); } } else { var newRulesTransY = $('.rules-txt')[0].style.transform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.transform.replace(/[^0-9]/g, ''); if (newRulesTransY >= (textH - boxH)) { return; } if (textH > boxH) { $('.rules-txt').css('transform', 'translateY(' + -(parseInt(newRulesTransY) + 400) + 'px)'); $('.rules-bar .bar').css('transform', 'translateY(' + (parseInt(barmoveY) + barmove) + 'px)'); } } break; case 0: if (_v.moveDown[_v.move0] != undefined) { //跳到系统按钮 if(_v.moveDown[_v.move0]=="appBut") { _v.lostFocus(_v.move0); this.area= 1; AndroidWebView.ButttonFocus(true); } else { _v.move0 = _v.moveDown[_v.move0]; _v.onFocus(_v.move0); _v.lostFocus(_v.move0); } } break; default: break; } }, lastPage: function () { var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); var newRulesTransY = $('.rules-txt')[0].style.webkitTransform.replace(/[^0-9]/g, ''); if (parseInt(newRulesTransY) >= textH - boxH) { return true } return false; }, initBox: function () { var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); if (textH - boxH > 0) { this.moveUp["membershipStatutesBut"] = "bar"; this.moveUp["agreementBut"] = "bar"; this.moveUp["privacyPolicyBut"] = "bar"; $('.rules-bar').show(); $('.rules-bar .bar').show(); if ((textH - boxH) >= 400) { var barNum = Math.ceil((textH - boxH) / 400); $('.rules-bar .bar').height(68); } else { $('.rules-bar .bar').height(boxH - 400); } } else { $('.rules-bar').hide(); $('.rules-bar .bar').hide(); } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { $('.rules-txt').css('webkitTransform', 'translateY(0px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(0px)'); } else { $('.rules-txt').css('transform', 'translateY(0px)'); $('.rules-bar .bar').css('transform', 'translateY(0px)'); } }, init: function () { console.log(); var flg = $("#flg").val(); if(flg == 0 || flg=='' || flg==undefined) { this.move0 = 'superTvBackgroundLeftBtn'; this.onFocus("superTvBackgroundLeftBtn"); } else if(flg==1){ this.move0 = 'superTvBackgroundCenterBtn'; this.onFocus("superTvBackgroundCenterBtn"); } else if(flg==2) { this.move0 = 'superTvBackgroundRightBtn'; this.onFocus("superTvBackgroundRightBtn"); } } } })(); $(function () { MAIN.init(); $("body").keydown(function (event) { MAIN.keyHandler(event); }); }); //}(window));