jQuery Mobile和HTML5开发App推广注册页

时间：2021-05-26

jQuery Mobile和HTML5的组合可以直接开发web版的app，所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发，那么html5+jqueryMobile你会立刻上手。

html5比html4多了很多的标签,特别是多媒体这块有了很好的支持，但是如果只是做一般的web手机页面，那么多数标签是用不上的，JqueryMobile与jquery的不同点就在一些事件名称上，当然这里封装的也是html5的原生事件,还要说一个关于html5提倡的一个规则，这里jquerymobile是遵循了这个规则的, html5里面给标签增加几个新的权限特征， data-role="page"、 data-role="header" 、data-role="content"、 data-role="footer", 为什么html5会增加这几个特征，我觉得多是为支持web版手机app开发而出的，因为html5提倡开发web版app只创建一个html页，然后每个段落=一个新页面，下面我贴一段几个div标签组合成的一个整体页面，当然它们都各自加了上面的特性。

<!--data-role="page"表示这个是一个html5单独页面，可以从另外一个加了page特性的div打开它 --><div data-role="page" id="phoneRegister"><!--data-role="header"这个特性你想成APP的navigationbar --><div data-role="header" id="heardId"></div><!--data-role="content"内容里面展示页面内容的，必入你放一张表在这个标签里面展示 --><div data-role="content"> </div><!--data-role="footer"这个特性你想成APP的tabbar --><div data-role="footer"> </div></div>

上面的div其实就组合成了一个html5页面了。

一、页面注意事项

1. 首先html5标准页面申明，页面中的第一行代码与html4不一样,

html5:<!DOCTYPE>

html4:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://monRegisterClick" style="text-align:center;border:1px solid #666666; background:#4dbb49;color:white;height:30px;width:100px; line-height:30px;">立即注册 </div> </aside> <aside style="margin-top:20px;"> <div style="float:right"><a href="#phoneRegister" data-transition="flip">手机注册(手机号)</a></div> </aside> <footer></footer> </article> </section> </div> <div data-role="footer" id="footerId" style="background:#666666;"> <div style="width:100%;height:90%;text-align:center;"> <div style="font-size:13px; height:25%;text-decoration:none;margin-top:0px;padding-top:0px; line-height:16px;">电话:400-900-8000</div> <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height:16px;">渝ICP备000000-c号</div> <div style="font-size: 13px; height: 25%;text-decoration:none; margin-top: 0px; padding-top: 0px; line-height: 16px;">版权所有</div> </div> </div> </div> <div data-role="page" id="dialog" style="padding-top:auto"> <div data-role="header" id="heardId" style="background:#4dbb49"> <h1>输入验证码</h1> </div> <div data-role="content" id="contentId"> <aside> 验证码: <input id="verifyCode" type="text" placeholder="请输入验证码!" /> </aside> <aside> <div id="inputVerifyCodeDiv" style="width: 100px; height: 30px; background: #4dbb49; color:white; line-height:30px; float:right; text-align:center">确 定</div> </aside> </div> <div data-role="footer" id="footerId" style="background:#4dbb49"> <h1></h1> </div> </div></body></html>

上面的代码直接copy到一个html页面可以运行。

以上所述是小编给大家介绍的jQuery Mobile和HTML5开发App推广注册页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章