Crear aplicacions mòbils amb jQTouch

En aquest article vull introduir jQTouch, que és un plugin de jQuery que et permet desenvolupar aplicacions per a navegadors mòbils basats en WebKit, pel que és compatible amb iPhone US sistemes (iPhone i iPad) i Android.

Tot el treball es basa en simples HTML, CSS i JavaScript, però les aplicacions estan fetes per ser molt similar a les aplicacions natives per l'iPhone OS, ja que s'inspiren en l'estil i funcionant a la perfecció.

En primer lloc, marca el lloc web oficial de jQTouch patit des d'on es pot descarregar el plug-in que fa referència aquest article introductori breu.

Una vegada descarregat pots descomprimir l'arxiu i tindràs tot el necessari:

• jQTouch: en aquesta carpeta jQTouch plugin de jQuery i l'arxiu CSS;
• temes: Conté el CSS dels temes que es poden fer servir a les nostres aplicacions;
• extensions: hi ha algunes extensions (incloent una aplicació molt interessant que et permet crear utilitzable fora de línia);
• demostracions, exemples dels quals inspirar-se.

La primera aplicació jQTouch

L'exemple que proposo en aquest article és crear una navegació simple menú d'estil "iPhone", en què les pantalles de la nostra pàgina / aplicació es carrega sense pagaina refrescants i atractius efectes de transició (per a cada element utilitzar un efecte dioverso menú perquè pugui provar la funció).
Per crear aquest exemple, es va inspirar en un codi a la carpeta de donem a l'arxiu del plugin.

Inserir en la capçalera de la nostra pàgina web, en primer lloc, els detalls de la llibreria jQuery i jQTouch plugin:

 <style type="text/css" media="screen"> @ import "jQTouch / jqtouch.css" </ style>







 <style type="text/css" media="screen"> @ import "temes / jqt / theme.css" </ style>

A continuació, importar l'arxiu CSS de l'extensió i el tema:

 src = "qtouch/jquery-1.4.2.js" <script type="text/javascript"> </ script>







 <script type="application/x-javascript"> src = "jqtouch / jqtouch.js" </ script>

Destinació inserir aquest codi CSS necessari per estilitzar els elements que posarem a la nostra pàgina:

 <style type="text/css" media="screen">







 Casa # # Jqt.fullscreen. Info {



  



 display: none;







 }







 div # # Sobre {jqt



  



 padding: 10px 40px 100px;



  



 text-shadow: rgb (255, 255, 255, 0,3)-1px 0px 0;



  



 font-size: 13px;



  



 text-align: center;



  



 fons: # 161.618;







 }







 div # de p {# jqt



  



 margin-bottom: 8px;







 }







 div # # sobre un jqt {



  



 color: # FFF;



  



 font-weight: bold;



  



 text-decoration: none;







 }







 div # contingut {



  



 font-size: 1.5em;

 

  



 text-align: center;

 

  



 margin: 90px 0 160px;

 

  



 font-family marcador de feltre;







 }







 </ Style>

• <<
• 1
• 2
• >>