初入移动端的手忙脚乱【html5+jQuery Mobile】(一)

刚入职一家公司,面试的是Web前端开发,进来后,直接让做一个手机端app,之前是学过html5,jQuery Mobile,但只仅限于学习,制作各种小demo,一旦做起东西来,还是有些摸不着头绪的,关键的问题是,没有一个资深的带着做,另外,前端的工作还是由我一个来做,入职第一天的时候,才弄明白入职后工作这整个的一个状况,当时真是头大了。

问领导,用什么软件开发,领导说,这个你自己来定。

哇!这也太看得起了吧,心里的无限的空落呀!就这样,第一天下午,就干瞪着电脑,惆怅+茫然的下班了,要在这里干下去吗?期间更是有好几个公司打电话面试,让自己更加的茫然+无措,找工作找了一星期,就定了,是不是有些太草率了?

各种顾虑,回到家后,和LG商量,到底该如何办?

是选择再找呢,还是?

讨论了半天,结论是,这是一个机会,并且公司做自己的产品,可能一下子由Web前端跨入移动前端,有些许不适应,但如果经历了前期的这些坎,之后是不是会稍好一些?

如果去其他的公司,Web端的页面,已经做的够多了,去了也纯属重复性工作,跨入移动端的,也是需要慢慢来并且看公司的需要。

如果有人带,多好呀?╯(╯▽╰)╰

第二天来了之后,开始查找相关信息,开发环境,使用技术等,好的地方是,下班走的时候,下载了几个html5移动demo,回家查看后,有了一些头绪,原来是这个样子。

接下来就是第三天了,继续查看网上技术,同时查看相关自认为的技术难题。

1、如何自定义图标

2、如何定义主题

3、如何实现自适应(传说中的响应式设计)

解决:1、.ui-icon-home:after{}重新定义,但页面中只需要写data-role=“home”,即可。

2、有一个在线资源,可以进行自定义化设计,当然,中间还是有些问题的,自己捯饬几次,就差不多明白了,软件是themeroller。

3、响应式,网上很多种,不过个人用的是css定义的,@media screen and (min-width:320px),min-width是因为max-width不管用,所以测试写min看效果如何,没想到ok。原因之后接触的多了,会有所了解吧。

基本这几个问题,就到了第二周的现在,当然将公司移动wap首页做出来了,细节优化,需要后期来做。

今天一个问题,思考了好长时间,也不知如何解答。最后去询问领导,领导说,每个页面的头都是不一样的,可以写死,哇,顿时轻松了不少,不过回头想想,还是将问题记录下来,以便之后忘记。

描述:一个模块,头不变,只要中间的内容不变,该如何处理呢?Web端,用iframe,asp.net中有母版等实现,手机端如何处理呢?

大家如果有什么好的建议和方法,欢迎指点迷津!

时间: 2024-11-07 19:11:05

初入移动端的手忙脚乱【html5+jQuery Mobile】(一)的相关文章

html5+jQuery Mobile开发移动端wap经验总结(二)- a / input样式重新定义

jQuery mobile中,很多样式都是写好的,虽然有主题,但是对于个性化的wap网站来说,还是很难驾驭的. 使用html5+jQuery Mobile做了几个页面之后,中间所遇到的问题,以及解决方法,现在加以总结,以便过后查阅. 问题: 1.a的颜色重新定义问题 2.input中button颜色问题. input输入框中,左边图标展示问题(文字缩进) 3.上文中的图标自定义问题[上文已经说明,通过ui-icon-XXX:after进行重新定义] 解决: 1-2.a / input的重新定义均

移动端开发:使用jQuery Mobile还是Zepto

原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobile相当于PC端的jQuery UI,它提供了很多页面的UI库,能够很快的开发出漂亮的界面,适合公司没有UI设计师的前端开发人员来进行移动端的开发.Zepto相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能,适合公司有UI设计师的前端开发人员来进行移动端的开发. jQu

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jquery Mobile提供了一套标准的工具和导航栏的工具,可以在绝大多数情况下直接使用:头部一般做网站或应用的标题,功能导航等,一般都是些文字或者按钮:尾部是一个页面的最下端,内容可以根据具体应用需要来排版,也可以放功能导航.各种链接等:内容中使用一般是作为功能的展示,显示内容同时附带着功能:jque

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

用jQuery Mobile做HTML5移动应用的三个优缺点

在过去大约一个月的时间里,我一直在使用JQuery Mobile为一个健身培训网站开发基于HTML5的手机/平板前端应用.我之前曾经写过Android和iOS应用程序(分别用Java和Objective-C),因此只要编写一段基础代码就可以在主流平台上运行并能够快速地用HTML和JavaScript迭代,这样的许诺十分诱人. JQuery Mobile & HTML5 使用HTML5和JavaSript构建一个手机应用,你需要写很多JavaScript代码.然而,带有触摸屏的设备的UI控制和处理

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案. 记录一下遇到的两个问题. 1)为了在手机上运行的更快,canvas中底图决定调用 putImageData 来复制,但在android 2.3系统上,canvas 的 putImageData 有很严重的锯齿,canvas.translate(0.5, 0.5)也是没有效果.如下图,前面是正常画出的底图,后面是 putImageData 后的底图. 解决办法, if (android 2

nodejs + jquery Mobile构建一个简单的移动web (客户端)

前面展示了使用nodejs技术和jqm来搭建一个简单的支持CRUD操作应用的服务端部分(参见:nodejs + jquery Mobile构建一个简单的移动web(服务端) ),服务端采用nodejs技术实现,使用了mongodb数据库和轻量级web开发框架expressJS, 路由使用restful风格,所以你也可以使用restify来开发. 客户端的实现主要通过ajax调用实现.使用jade模板引擎. 客户端主要包含两个文件:layout.jade和index.jade 1. layout.

jQuery Mobile+Html5开发手机端网站感想与总结-(初)

看jQuery Mobile相关方面的东西,看了几天,发现,其实除了里边默认的图标.主题.以及点击后跳转的效果之外,其他的东西,和普通的html页面一样. jQuery Mobile注意事项: 1.新的页面开始,标注:data-role="page" 2.页面中的角色:data-role="header",其中的header.footer.navbar等,对应的css中,均为:ui-header.ui-footer.ui-navbar等. 3.页面中的图标,若想要自

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H