未加星标

jQuery Mobile Lesson 1

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

In a new series of articles, we will talk about jQuery Mobile framework, which easily allows you to create responsive mobile websites.

GETTING STARTED WITH jQuery MOBILE

WHAT IS JQUERY MOBILE

jQuery Mobile is a reliable support for all the abundance of mobile development kits and tools that makes a mobile site responsive, flexible and simple.

jQuery Mobile is fundamentally be defined as a set of jQuery plug-ins and widgets that aim to provide a cross platform API for creating mobile web applications.

In terms of code implementation, jQuery Mobile is very similar to jQuery UI, but while jQuery UI is focused on desktop applications, jQuery Mobile is built with mobile devices in mind.

‘A MUST KNOW’ ABOUT CREATING A MOBILE WEB

While developing a mobile web bear these three key words in mind, which that a mobile web MUST be

Responsive Flexible Simple Responsiveness entails how a page looks when it transits; a button is tapped and how content loads on mobile. Flexibility entails that mobile web should be free customizable by the user to suits his/her desire Simplicity means that a mobile should be site an easy navigating site. A MUST KNOW ABOUT jQuery MOBILE FOR DEVELOPERS

jQuery have made a great impact in the emerging world of fascinating web development and designing, changed the way developers implement and use javascript on websites and web applications that Microsoft has chosen it as a preferred javascript framework, and Microsoft has included full auto-completion support for jQuery inside visual studio therefore JQuery mobile an extract /extension of/in the amazing jQuery library is supportive and reliable.

WHY JQUERY MOBILE {NEED TO KNOW jQuery MOBILE AS A DEVELOPER}

As I have illustrated in ‘ a must know about jQuery mobile for developers ‘; As mobile device generation emerges so as the need for mobile responsive, flexible and simple web application grows therefore the need and demand for jQuery mobile (jQuery frame work) rapidly increases, and now is a great time for you guru or beginner in mobile web API to jump in and get involved with the project.

DEVICE THAT CAN RUN jQUERY MOBILE

Running of jQuery on different device depends on the browser and operating system.

Browsers that support jQuery mobile are those modern browsers that have support for html5 tags and some CSS 3 supports.

The devices that support jQuery mobile are desktop, laptop, all-in-one systems, tablets, Smartphones, Android, ios, Blackberry (high version), webOS, windows mobile and eReader Devices. jQuery mobile supports kindle devices that include the experimental webkit-based browser.

WHAT AN ADVANCE OR AN AMATURE DEVELOPER NEEDS FOR CREATING MOBILE SITE USING jQuery MOBILE

1. Development applications to use

Development application for windowsinclude Komodo IDE, eclipse, iWeb, Microsoft FrontPage, Aptana studio, Dreamweaver, notepad++. We are using Dreamweaver in this tutorial

Development applications for OsXinclude Coda, espresso, textwrangler, kod

2. The language the mobile web developer should or should have known are HTML5, CSS 3 and Javascript.

jQuery Mobile consists of four files: a JavaScript file, a CSS file, and two PNG graphic sprites.

The JavaScript fileis meant to be loaded after the base jQuery library. This script file performs various tasks, like creating widgets, applying event listeners, and enabling the API.

A Cascading Style Sheet( CSS ) which specifies layout and appearance of jQuery Mobile page elements. The Style Sheet also specifies transitions and animations with CSS3 transforms.

You can download the entire jQuery Mobile package (the JavaScript library, the CSS, and the graphics) or you can access them through the project’s CDN. See the jQuery Mobile project download page for specifics . In our examples for this tutorial, we will be using the CDN.

THE DOCTYPE FOR BUILDING HTML CONTENT FOR MOBILE SITE

HTML4 TRANSITIONAL DOCTYPE

Developers who are still satisfied using deprecated HTML tags but want to move on to HTML 4 can use the transitional DOCTYPE which allows the browser to parse through deprecated tags and displays without throwing any errors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Fig 1.1 section 1.1 html 4 transitional doctype

HTML4 STRICT DOCTYPE

Developers who do not want to include support for deprecated tags and the possible formatting errors that may ensue when using a ‘compatibility’ mode can use the strict DOCTYPE which tells the browser to throw errors when deprecated tags are included in the HTML file it is trying to load. This can be useful as it guarantees your work is at least up to the HTML 4 standard.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/scrict.dtd"> Fig 1.2 section 1.1 html 4 strcit doctype

HTML5 DOCTYPE

Using the HTML5 DOCTYPE works on almost all legacy browsers and is already in use on many websites today.

To use the HTML5 DOCTYPE in your HTML file, use the following snippet:

<!DOCTYPE html> Fig 1.3 section 1.1 html 5 doctype BASIC SITE STRUCTURE USING HTML5 DOCTYPE <!DOCTYPE html> <html> <head><title></title></head> <body></body> </html> Fig 1.4 section 1.1 basic site structure using html 5 doctype WORKING WITH HTML5 STRUCTURE, CSS AND JAVASCRIPT BUILDING AND PRESENTING CONTENT IN HTML5 <!DOCTYPE html> <html> <head> <title>Titles should be short descriptions of the page</title> <meta charset="utf-8"> </head> <body> <div> <h1>h1 tags should contain the most important information on your site</h1> <p>Paragraph tags should be where most of your text content lives, or used as a separation between sections.</p> <ul> <li>This is a list element</li> <li>This is another element, notice the bullets and indentation </li> </ul> <p>You probably noticed that I used a "div" tag to wrap these other tags in. I'm using it as a container.</p> </div> </body> </html> Fig 1.5 section 1.2 building and presenting content in html 5

We know what the code does, but let’s take a look at what it actually looks like. The image below shows what the rendered HTML looks like.


jQuery Mobile Lesson 1

Fig 1.6 section 1.2 browser preview of building and presenting content in html 5

CSS IN BUILDING AND PRESENTING CONTENT IN HTML5

Just after the <title> </title> tags press enter and insert snippet as shown in the preceding image link a stylesheet file .css to the main .html file


jQuery Mobile Lesson 1

Fig 1.7 section 1.2 linking css to Html 5 in building and presenting web content

The below following script are found in the css file [hist.css] @charset "utf-8"; /* CSS Document */ body { background:#0CF; font-family: Helvetica, Arial, sans-serif; font-size: 0.75em; } h1 { font-size: 200% } p { margin: 5px 0; padding: 0 3px; } #year{ text-align:center; font-weight:bold; font-size:200%; } .small { font-size: 80%; } Fig 1.8 section 1.2 linking css to Html 5 in building and presenting web content

The image below shows what the rendered HTML will now look like after linking the .CSS file.


jQuery Mobile Lesson 1

Fig 1.9 section 1.2 rendered HTML browser preview after linking the .CSS file.

JAVASCRIPT IN BUILDING AND PRESENTING CONTENT IN HTML5

A summary of placing JavaScript tags in your document:

Loading scripts in the headelement makes them load first but can adversely affect the perceived load time.

Loading scripts inside the bodymay seem like a good idea but creates issues with maintenance and throws possible loading delays.

Loading scripts just before the closing body tagmakes your site appear to load quickly but may have an unintended consequence of missing site functionality for up to the first few seconds.

Let’s practice using LOADING SCRIPTS IN THE HEAD which is the most preferable for every developer <script src="js/javascript.js" type="text/javascript"></script> </head> Fig 1.10 section 1.2 loading javascript scripts in the head of html5 The below following script are found in the .js file [javascript.js] // JavaScript Document window.onload = setYear; function setYear() { var currentYear = new Date(); document.getElementById('year').innerHTML = currentYear.getFullYear(); } Fig 1.11 section 1.2 loading javascript scripts in the head of html5

The image below shows what the rendered HTML will now look like after linking the .js file.


jQuery Mobile Lesson 1

Fig 1.12 section 1.2 rendered html look after loading .js scripts files in the head of html5

We just learned a little about current use of structuring HTML, linking CSS and loading Script (javascript) now lets get to know how to use our current learned skill in jQuery mobile

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryHTMLCSSHTML5JavaJavaScriptCDNWindowsAndroidCSS3
分页:12
转载请注明
本文标题:jQuery Mobile Lesson 1
本站链接:http://www.codesec.net/view/481829.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)