怎么制作html5手机页面?

html-css013

怎么制作html5手机页面?,第1张

1、打开百度,在百度上搜索:易企秀,然后点击搜索,在搜索的结果中点击进入易企秀的官方网站。

2、进入后,先登录自己的账号,可以直接用QQ微信登录即可,登录后就可以开始制作自己的手机网页微场景了。

3、首先点击【我的场景】接着点击【制作场景】,接着会进入场景模板选择界面,里面有很多免费的模板。

4、可以在模板中心选择一个自己需要的点击,直接套用模板,也可以选择自己创建一个空白页面。

5、进入后就可以根据自己的需要,将模板里面的文字图片和音乐替换成自己需要的即可,如图所示。

6、还可以给自己的手机网页添加背景音乐,动画效果,跳转链接,特效组件等等。

如果不想用传统的页面跳转,可以考虑使用一下前端的MVC框架,比如backbone.js比如Angular.js都可以实现你说的那种,上下不动只有中间的内容在变,其实加载的是不同的模板,然后用路由控制的,整个浏览器始终处在一个界面中,只是在不停的重新渲染内容,页面并没有跳转,这个应该就是你想要的了吧

1.思路:

其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如:

//plusReady事件后,自动创建menu窗口;

mui.plusReady(function() {

main = plus.webview.currentWebview()

//setTimeout的目的是等待窗体动画结束后,再执行create webview操作,避免资源竞争,导致窗口动画不流畅;

setTimeout(function () {

//侧滑菜单默认隐藏,这样可以节省内存;

menu = mui.preload({

id: 'offcanvas-drag-right-plus-menu',

url: 'offcanvas-drag-right-plus-menu.html',

styles: {

left: 0,

width: '70%'

}

})

},300)

})

2.所谓侧滑,就是控制菜单WebView的显示,使用它的left来定位左边位置;

3.要打开新的webView,要注意webview的show方法使用:

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras )

参数含义:(1)是webview对象 (2)动画效果,从没显示过,一般用"none",(3)动画过渡时间 (4)当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。(5)传递的参数;

4.显示的方法:

(1)按钮点击后,让menu直接show出来,并对main设置样式,比如

menu.show("none",0,function(){

main.setStyle({

left:"70%",

transition:{

duration:150

}

})

})

(2)关闭侧滑菜单,实际就是设置main的样式了,比如:

main.setStyle({

left: '0',

transition: {

duration: 150

}

})

另外注意窗体切换完成后要关掉menu

//等窗体动画结束后,隐藏菜单webview,节省资源;

setTimeout(function() {

menu.hide()

}, 200)

5.被打开的WebView的界面如何控制关闭侧滑菜单:

(1)先要找到主页面,main = plus.webview.currentWebview().opener()

(2)激发主页面的某个事件,例如:mui.fire(main,"menu:swipeleft")