你的位置:首页 > 网页设计

[网页设计]HTML5+学习笔记1


document.addEventListener('touchstart',function(){  return false;},true);

touchstart当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

document.oncontextmenu=function(){  return false;};

oncontextmenu取消鼠标右键

var _domReady=false;document.addEventListener('DOMContentLoaded',function(){  _domReady=true;  compatibleAdjust();},false);

domready事件,类似jq的$(document).ready()

var _adjust=false;function compatibleAdjust(){  if(_adjust||!window.plus||!_domReady){    return;  }  _adjust=true;  // iOS平台使用div的滚动条  if('iOS'==plus.os.name){    document.getElementById('content').className='scontent';  }  // 预创建二级窗口//  preateWebviews();  // 关闭启动界面  setTimeout(function(){    plus.navigator.closeSplashscreen();  },500);}

// 兼容性样式调整

var _openw=null;function clicked(id,a,s){  if(_openw){return;}  a||(a=as);  _openw=preate[id];  if(_openw){    _openw.showded=true;    _openw.show(a,null,function(){      _openw=null;//避免快速点击打开多个页面    });  }else{//    var wa=plus.nativeUI.showWaiting();    _openw=plus.webview.create(id,id,{scrollIndicator:'none',scalable:false,popGesture:'hide'},{preate:true});    preate[id]=_openw;    _openw.addEventListener('loaded',function(){//叶面加载完成后才显示//    setTimeout(function(){//延后显示可避免低端机上动画时白屏//      wa.close();      _openw.showded=true;      s||_openw.show(a,null,function(){        _openw=null;//避免快速点击打开多个页面      });      s&&(_openw=null);//避免s模式下变量无法重置//    },10);    },false);    _openw.addEventListener('close',function(){//页面关闭后可再次打开      _openw=null;      preate[id]&&(preate[id]=null);//兼容窗口的关闭    },false);  }}

//处理点击事件

var preate={};function preateWebviews(){  preateWebivew('plus/webview.html');  var plist=document.getElementById('plist').children;  // 由于启动是预创建过多Webview窗口会消耗较长的时间,所以这里限制仅创建5个  for( var i=0;i<plist.length&&i<2;i++){    var id=plist[i].id;    id&&(id.length>0)&&preateWebivew(id);  }}function preateWebivew(id){  if(!preate[id]){    var w=plus.webview.create(id,id,{scrollIndicator:'none',scalable:false,popGesture:'hide'},{preate:true});    preate[id]=w;    w.addEventListener('close',function(){//页面关闭后可再次打开      _openw=null;      preate[id]&&(preate[id]=null);//兼容窗口的关闭    },false);  }}

 

 

// 清除预创建页面(仅)function preateClear(){  for(var p in preate){    var w=preate[p];    if(w&&w.showded&&!w.isVisible()){      w.close();      preate[p]=null;    }  }}

 

通过 HTML5 开发移动 App 时,会发现 HTML5 很多能力不具备。为弥补 HTML5 能力 的不足,在 W3C 中国的指导下成立了 www.HTML5Plus.org组织,推出 HTML5+规范。

HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。