courses
Showing posts with label courses. Show all posts
Showing posts with label courses. Show all posts

Introduction to jQuery Mobile

7:54 PM Add Comment

jQuery Mobile is a front-end framework for creating mobile-side web applications.

Before you learn this tutorial you need to understand first

Before you start learning jQuery Mobile, you should know the basics:
  • HTML
  • CSS
  • jQuery
If you want to learn this knowledge, you can visit the homepage of this site .

What is jQuery Mobile?

jQuery Mobile is a web development framework for touchscreen smartphones and tablets.
jQuery Mobile works with all the mainstream smartphones and tablets on:

jQuery Mobile is built on jQuery and jQuery UI class libraries, and if you know jQuery, you can easily learn jQuery Mobile.
jQuery Mobile uses very little HTML5, CSS3, JavaScript and AJAX script code to complete the page layout rendering.

Why use jQuery Mobile?

By using jQuery Mobile you can "write less code to do more things": it can be a flexible and simple way to layout web pages and is compatible with all mobile devices.
lampDifferent devices using different development languages, jQuery Mobile can be very compatible with different devices or operating systems:
  • Android and Blackberry (BlackBerry) use JAVA language.
  • iOS uses the Objective C language
  • Windows Phone uses C # and .net, etc.
jQuery Mobile solves the problem of compatibility with different devices because it only uses HTML, CSS and JavaScript, which is the standard for all mobile web browsers!

The best reading experience

Although jQuery Mobile is compatible with all mobile devices, it is not fully compatible with PC (due to limited CSS3 support).
For better reading this tutorial, we recommend using Google Chrome.

Add jQuery Mobile to your page

You can add jQuery Mobile to your web page in the following ways:
  • Loading jQuery Mobile from CDN (recommended)
  • Download the jQuery Mobile library from jQuerymobile.com

Load jQuery Mobile from CDN

lampThe full name of the CDN is the Content Delivery Network, the content distribution network. The basic idea is to avoid as much as possible on the Internet may affect the speed and stability of data transmission bottlenecks and links, so that the content transmission faster and more stable. The
Use the jQuery kernel, you do not need to install anything on your computer; you just need to load the following cascading styles (.css) and JavaScript libraries (.js) on your web pages to use jQuery Mobile:

jQuery Mobile CDN:

<head>

<! - meta uses viewport to ensure that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">

<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<! - Introducing the jQuery library ->
<script src = "http://code.jquery.com/jquery-1.11.3.min.js"> </ script>

<! - Introducing jQuery Mobile library ->
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </ script>

</ head>

try it"
Domestic users recommend using CDN:

jQuery Mobile CDN :

<head>

<! - meta uses viewport to ensure that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">

<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<! - Introducing the jQuery library ->
<script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </ script>

<! - Introducing jQuery Mobile library ->
<script src = "http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"> </ script>

</ head>

try it"
The library referenced in this tutorial is the Baidu CDN repository.

Download jQuery Mobile

If you want to put jQuery Mobile in your host, you can download the file from jQuerymobile.com .
 <head>
 <meta name = "viewport" content = "width = device-width, initial-scale = 1">
 <link rel = "stylesheet" href = "jquery.mobile-1.4.5.css">
 <script src = "jquery.js"> </ script>
 <script src = "jquery.mobile-1.4.5.js"> </ script>
 </ head>
Tip: Place the downloaded file in the same directory as the web page. 
lampDo you want to know why you did not insert type = "text / javascript" in the <script> tag?

HTML5 already does not need this attribute. JavaScript is the default scripting language for HTML5 in all modern browsers!

Ionic Tutorial

11:12 PM Add Comment


Ionic is a powerful HTML5 application development framework (HTML5 Hybrid Mobile App Framework). Can help you build Web applications that are close to native experiences using Web technologies such as HTML, CSS, and Javascript.
The main focus is on the look and feel, and the UI interaction with your application, especially for Hybird-based HTML5 mobile application development.
is a lightweight mobile phone library, with fast, modern interface, beautiful and so on. In order to solve some other UI library running on the phone slow problem, it directly to the IOS6 and Android4.1 following version support, to get a better experience.


characteristics
·         1.ionic based on Angular grammar, easy to learn.
·         2.ionic is a lightweight framework.
·         3.ionic perfect blend of next-generation mobile framework, support Angularjs features, MVC, code easy to maintain.
·         4.ionic provides a beautiful design, build applications through SASS, it provides a lot of UI components to help developers develop powerful applications.
·         5.ionic focus on the original, so you can not see the mixed application and the difference between the original
·         6.ionic provides a powerful command line tool.
·         7.ionic superior performance, running fast.

Do you need to understand this tutorial?
Before you study this tutorial, you need to know the basics:
·         HTML
·         CSS
·         Javascript
·         Angular

Ionic install Guide

This example uses the ionic v1.3.2 version, the use of the CDN library address:
<link href = "https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel = "stylesheet">
<script src = "https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"> </ script>
The latest version of the download address: http://ionicframework.com/docs/overview/#download .
After downloading, extract the compressed package, including the following directory:
css / => style file
fonts / => font files
js / => Javascript files
version.json => version update description
You can also download the following resource file on Github: https://github.com/driftyco/ionic (in the release directory).
Next, we only need to introduce the above directory css / ionic.min.css and js / ionic.bundle.min.js file in the project to create the ionic application.

Example

< The Ion-header-bar class = " bar-positive " > < h1 class = " title " > the Hello World! </ H1 > </ the Ion-header-bar > < the Ion-Content > < the p- > My first application. </ p > </ ion-content >

try it"
Click the "Try" button to view the online instance.
This tutorial focuses on the application of the ionic framework, and most of the examples run in the browser, and the mobile device can be run in the next command line installation tutorial.
Note: In mobile applications such as phonegap we only need to add the corresponding js and css files to the repository can be.

Command line installation

First you need to install Node.js , we need to use the NPM tool in the next installation, more NPM introduction can see our NPM usage introduction .
And then install the latest version of cordova and ionic from the command line tool . By referring to Android and iOS official documents to install.
Open the command line tool on Window and Linux Execute the following command:
$ npm install -g cordova ionic
Use the following command on your Mac system:
sudo npm install -g cordova ionic
Tip: IOS needs to be installed under Mac Os X. and Xcode environments.
If you have already installed the above environment, you can update the version by executing the following command:
npm update -g cordova ionic
or
sudo npm update -g cordova ionic

Create an application

Create an ionic application using an off-the-shelf application template provided by the official government, or a blank project:
$ ionic start myApp tabs

Run the ionic project we just created

Use the ionic tool to create, test, run your apps (or create directly from Cordova).

Create an Android app

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ether emulate android
If everything will pop up the simulator, the interface will look like this:

Create an iOS app

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ion emulate ios
If the "ios-sim was not found." Error occurs, you can execute the following command:
npm install -g ios-sim
If everything will pop up the simulator, the interface will look like this:

Ionic Lab

Ionic Lab is the desktop version of the development environment, if you do not like the use of command line operation, Ionic Lab will meet your needs.
Ionic Lab provides developers with a simpler way to start, compile, run, and simulate running Ionic applications.
Ionic Lab supports the following platforms: Window, Mac OS X, Linux, download address: http://lab.ionic.io/ , download directly after installation. The entire user interface is as follows:
Through the above interface you can do the following:
  • Create an application
  • Preview application
  • Compile the application
  • Run the application
  • Upload application
  • Run log view
    • ...
We recommend using Sublime Text as the editor for the Ionic project. We can open the project directly on Sublime Text via Ionic Lab as shown below:



Subscribe to: Posts (Atom)

Popular Posts