HTML5 + JS Mobile web development: jQuery Mobile, html5jquery

HTML5 + JS Mobile web development: jQuery Mobile, html5jquery
I. Start Language

I have been tossing web pages on my PC. How can I develop mobile Web pages around me? The reason is that the company used Java to develop products, which consumes a lot of human and financial resources, but the final effect is not very good. Because the Android system has a new set of things, and the iPhone is a new one.

As a result, the Director gave me hands on all the work and focused on the web version to see what the final effect was.

I have been developing and learning mobile phones for a long time, so I started to learn Mobile Phone development.

Sharing is a good way to improve your learning. This is because some unexpected experiences and gains are often learned during the sharing process. Naturally, you will be happy to do so. Therefore, at this historic moment in Chapter id> 2000, I created a "mobile-related" category directory to summarize, sort, and share mobile-related things, we encourage everyone.

2. My choice

Obviously, CSS 3 + HTML5 and JavaScript cannot be used in mobile web development. At present, many development frameworks have emerged, including the glue layer and the display layer (not listed ). It is determined by personal preferences and filtering.PhoneGapEnables interaction with the camera and address book of the device,jQuery MobileDisplay the page UI and Related interactions.

If time is enough, I think I will re-develop a more lightweight and flexible interaction framework for the project itself. Considering the actual situation, we decided to use another person's UI framework.

Next is the first runner-up in the morning ().PhoneGapAndroid mobile app:

HoweverPhoneGapIt takes time to deal with the glue layer. We can first focus on the UI framework related to page display. For example, jQuery Mobile.

Iii. jQuery Mobile in my eyes

So far, the official version of jQuery Mobile has not yet been released, but this does not prevent its use. The lightweight code is simple on the official homepage ). PossibleSencha TouchRelatively simple. However, in my opinion (the reason for the framework itself), the code is actually quite cool (for example, there are as many as 49K CSS files after min ). For actual projects, the skin style cannot coexist.a~eThe selection of the five templates is actually redundant, and many of them are soy sauce.

In addition, it is impossible for designers in actual projects to always followjQuery Mobile. Therefore, we will inevitably encounter the situation of modifying its template or adding a new one.

However, I am sure that jQuery Mobile will be awesome if I use jQuery Mobile on my website or other non-external small and medium projects!

Then, I have to admit it.jQuery MobileComparableSencha TouchIt's much faster. Its UI display is basically based on HTML5data-Like jQuery, the old father of the User-Defined attributeWrite less, do more.

The UI display of page elements can be completely based on the HTML code content and attributes, without any additional JavaScript code or CSS code. A mobile phone page with a similar effect can be displayed. In addition, you only need to calm down and spend a whole day reading the official introduction document. It's so simple.

For example, the following purely displayed page (Chrome browser is recommended for PC ).
You can click here: jQuery Mobile's UI display page

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

This is the display effect in the desktop version of opera 10.1 mobile:
Default entry:

Select "Search for articles" → click the search box:

For Android or iPhone, the gradient effect and smooth switching effect will be displayed.

The above adds up to more than 10 HTML pages, which came out after several hours. Of course, they are in invincible mode. Why? Because there is basically no new CSS or JavaScript code. Write HTML directly. It is faster if you are familiar with jQuery Mobile.

Semantic
To usejQuery MobileAnd pay attention to semantics. Instead of using tags such as HTML5 (considering progressive enhancement,jQuery MobileThe tags in the XHTML age are used.div,p,ul,li,h1~6.

InjQuery MobileUnder the tag, many of the UI Effects of Different tags have been fixed. For example:

<Div data-role = "header"> 
The above sectiondata-roleIsheaderIn the div,h1The tag is not just a title, but will directly modify the title value of the current page. Therefore, the title of the page corresponding to the above lines of code is "Xin space-xin Sheng ", even if the title in your head is "Today is Singles Day, hula la ~~".
AndaLabel text is not specifieddata-role="button"But who told him to be born?data-role="header"As a result, it is the life of a display button. And,JMobileIt is automatically positioned to the right.
The Semantic tag determines its location and display. It is really convenient, but it is limited. There are advantages and disadvantages.
ListliThe first image in the tag will automatically become a list thumbnail and so on. There are a lot of them. If you try it, you will find it interesting.
Well, you don't have to worry about it. Freezing is not a cold day, and everything is accumulating slowly. At the beginning, it may not be good to say too much. Therefore, this article is so nagging.

Android uses jquerymobile webview to develop js applications. css is stored locally for reading.
You have full freedom to place the File Location of html js css, which can be placed in the built-in storage of your mobile phone or the SD card, if encrypted storage is required or not for cross-platform applications, we recommend that you use android native for development to improve efficiency and interaction. You can integrate the upgrade module in the application to solve the system upgrade requirement.

After two years of web Front-end development, I am engaged in developing web apps for HTML5 and jQuery Mobile apps. It will soon end in my junior year and start school next semester.
I tell you: it may take some money to find a company that is both engaged in app R & D and app training, but you need to be diligent and concentrate on copying the master's experience for a few months, you are experienced.