HTML5+JS Mobile Web development of jquery Mobile first involved

First, the language of the beginning

I have been on the PC Web page toss, now how the wind around to ramming the mobile Web development? The reason is that the company originally used Java development products, consumption of a lot of manpower and financial resources, but the final effect is not good. Because, the Android system a set of things, the iphone is a new set, tossing the dead.

So the director Fahen, let me put hands on the work to hand out, concentrate on the web version, see how the final effect.

Coupled with my coveted mobile phone development study for a long time, so, hit it off, engaged in the development of mobile phone learning.

Sharing is a good way to improve your learning. Because the sharing process to comb the learning, often some unexpected experience and harvest. It is natural for us to be willing to do so. So, in the article ID > 2000 of this historic moment, a new "mobile-related" category directory, the movement of some things to summarize, organize, share out, we encourage each other.

Second, my choice

Clearly, mobile web development is not moving away from CSS3 + HTML5 and JavaScript at the moment. At present, also came into being a lot of development of the framework, there is the glue layer, there is also a display layer (not listed). Because of personal preferences and filtering, it is decided to use the PhoneGap interaction with the device camera, contacts, etc. to jQuery Mobile achieve the display of the page UI and related interactions.

If time is enough, I think I'm going to re-engage a lighter and more flexible framework for the project itself. Consider the reality, or decide to use someone else's UI framework.

Next to this morning (2011-11-1 11:11) run through the first PhoneGap Android phone program:

But PhoneGap it's going to take some time to deal with the glue layer. We can first put the current into the UI framework related to the page display. For example, this article is about jquery Mobile.

Third, the jquery Mobile in my eyes

So far, the official version of JQuery Mobile hasn't come out yet, but that doesn't prevent it from being used. The official home page says its code is lightweight (lightweight codes). It may be Sencha Touch lighter than the actual weight. However, in my opinion (itself for the reason of the framework), in fact the code is quite verbose (such as CSS file min after 49K). For the actual project, the skin style can not be several coexistence, so, its a~e five kinds of template selection actually some superfluous, many are soy sauce life.

What's more, designers in real projects can't always follow the UI when designing stuff jQuery Mobile . As a result, we will inevitably encounter changes to their templates or new additions to the situation.

However, I can be sure that if you use jquery Mobile on your personal website or some other small and medium-sized project, you will be happy!

Then there's one more thing I have to admit. jQuery MobileIt's a Sencha Touch lot quicker to get started. Its UI display is basically based on HTML5 's data- custom attributes, just like its old dad jquery, which is write less,does more.

The UI display of the page element can be completely based on HTML code content and attributes, without any additional JavaScript code or CSS code, the model has a kind of mobile phone page effect can be baked. And, to make an effect page, you just have to ecstatic a 1-day time to read the official presentation document. It's so simple.

For example, the following is a purely displayed page (PC is recommended to use Chrome browser onlookers).
You can click here: JQuery Mobile UI Display page

The phone can access the following address: http://www.zhangxinxu.com/jq/mobile/

This is shown in the desktop version of opera 10.1 Mobile:
Default entry:

Select "Article Search" item → Click on the search box:

If it's on an Android or iphone, the fade effect will show up with a smooth transition.

It adds up to more than 10 HTML pages, and it comes out in a couple of hours, of course, in invincible mode. Why is it fast? Because there's basically no new CSS code or JavaScript code to move. Write the HTML directly. If you're familiar with jquery mobile, you can do it faster.

The semantics of
To use it jQuery Mobile , it is important to be aware of semantics. Instead of using tags such as HTML5 (with progressive enhancement, jQuery Mobile using the XHTML era label), instead,,,, div and p so ul on li h1~6 .

jQuery Mobileunder the label, many of the UI effects of the different labels have been fixed to death. For example:

<div data-role= "header" >     
The above section data-role header of the Div, the h1 label is not just a title, but directly modify the current page title value, so the above lines of code corresponding to the title of the page is "Xin Space-xin life", even if your head title is "Today is a small Singles day , Hula啦 ~ ~ ".
However, the following a label text, although not specified data-role="button" , but, who called him born data-role="header" under the Div, so, it is a display button life. Moreover, JMobile it is automatically positioned to the right.
The semantic label determines its location, display, and so on. It's really convenient, but it's limited. There are pros and cons.
lithe first picture in the List tab will automatically become a list thumbnail, and so on, a lot more, and you'll find it quite interesting if you try.
Well, but, do not hurry, Rome cold day, what things are slowly accumulated. Just beginning, saying more is not necessarily good. So, this article is nagging so much.