Manual de jQuery Mobile

Manual de jQuery Mobile, el framework para el desarrollo compatible de sitios web orientados a dispositivos móviles, basado en el popular jQuery.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Introducción a jQuery Mobile

Características de jQuery Mobile, el framework Javascript para desarrollo de aplicaciones web para móviles, basado en jQuery.

2.- Configuraciones por defecto de jQuery Mobile

Breve introducción a las configuraciones predeterminadas que vienen instaladas con jQuery Mobile y todo lo que ellas involucran.

3.- Página básica en jQuery Mobile Framework

Cómo es la estructura de la página más básica que podríamos hacer con el framework jQuery Mobile.

4.- Estructura multipágina de jQuery Mobile

Cómo hacer una página multipágina, de modo que se puedan reunir varias páginas en un archivo HTML, en jQuery Mobile Framework.

5.- Crear Botones con jQuery Mobile

Crear botones con jQuery Mobile es muy sencillo y no requiere mucho esfuerzo, sin embargo los resultados son excitantes.

6.- Con jQuery Mobile las listas son mejores

Creación de listas y los usos que le podemos dar en jQuery Mobile dentro de nuestras aplicaciones web móviles.

7.- Los cuadros de diálogo son diferentes en jQuery Mobile

Cómo crear cuadros de diálogo con jQuery Mobile. Diversos usos y configuraciones que convierten a los cuadros de diálogo una poderosa herramienta.

8.- Iconos con jQuery Mobile

Para facilitar la creación de interfaces gráficas, jQuery Mobile incluye una gran gama de iconos prediseñados, que podemos incluir en las páginas muy fácilmente.

9.- Las barras de navegación y transiciones en jQuery Mobile

Artículo dedicado a las barras de navegación, que conseguimos con el role navbar, y las transiciones entre páginas en jQuery Mobile.

10.- Elemento Slider de jQuery Mobile

Con jQuery Mobile obtenemos elegantes sliders e interruptores, con los que podemos enriquecer visualmente nuestras aplicaciones móviles.

11.- Elementos Collapsible de jQuery Mobile

Uno de los widgets extraordinariamente atractivos que podemos encontrar en jQuery Mobile son los collapsible. Te explicamos cómo funcionan.

12.- Hacer columnas y grillas con jQuery Mobile

Creación de documentos web con grillas o contenidos dispuestos en columnas mediante jQuery Mobile.

13.- Crear temas personalizados para tus aplicaciones jQuery Mobile

El equipo de jQuery Mobile, pone a disposición una herramienta con la cual, podemos crear temas personalizados para las aplicaciones basadas en el framework.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

ral_emilio_bilbao_barrenechea

04/1/2012
Más capitulos
Buenas Tardes.
Quisiera saber si sacarán mas capítulos para este manual ya que tengo más información pero solo en Inglés...

Gracias!

Emanuel

26/1/2012
duda
Estoy quediendo armar una version de mi web para moviles y por lo que veo hasta ahora es muy sencillo. Mi dada es... como hago para detectar si el usuario esta visitando mi web desde un dispositivo y ahi llevarlo a la pagina con jquery movile


Saludos

casadepacas

15/3/2012
Redireccionar version pc a version movil
Respondiendo a Emanuel.
Yo puse el siguiente Java en la index pc y me funcional correctamente.
----------------
<script type ="text/javascript" >
//<![CDATA[

function isMobile(){
var ret=false;

var re=[];
re.push(/Android/gi);
re.push(/Fennec/gi);
re.push(/iPhone/gi);
re.push(/iPad/gi);
re.push(/iPod/gi);
re.push(/BlackBerry/gi);
re.push(/Opera Mini/gi);
re.push(/Opera Mobi/gi);
re.push(/Symbian/gi);
re.push(/PalmOS/gi);

for(var i=0, l=re.length; i<l;i++){
ret=ret || !!re[i].test(navigator.userAgent);
}

ret=ret && window.innerWidth<801;
return ret;
}

if(isMobile()){
location.href="http://url_version_mobil";
}
//]]>

</script>

Esau

21/3/2012
Duda con header y footer
Hola, estoy trabajando en una app con jquery mobile y phonegap, la duda que tengo es como lograr que el header y el footer queden fijos al hacer scroll.

Por defecto tienen la propiedad data-position="fixed" sin embargo al hacer scroll el header y footer desaparecen y al finalizar el scroll vuelven a aparecer y tratan de acomodarse en el top y el bottom respectivamente, el problema con esto que casi nunca lo logran perfectamente y se sitúan en el centro de la pantalla.

Espero alguien pueda ayudarme con esto.

Saludos.

@yavallejo

31/5/2012
Dudas con personalizacion
buenas tardes. saluds desde tulua valle colombia.

con respecto a la personalización (me imagino que se puede hacer en el archivo .css que uno descarga #soy novato) si utilizamos el cdn por logica esto no se podria hacer? dado el caso k se pueda cambiar los estilos de mis clases en el archivo mencionado jquery.mobile-1.0.min.css.

Aprovecho para agradecer por dicho curso #esperandoandophonegap.

Alejandro

04/6/2012
Jquery Mobile y gps
Hola,

Soy nuevo con jquery mobile, utilizo la librería phonegap para mostrar coordenadas del gps, pero necesitaría que desde mi app pudiera abrir el navigation o cualquier navegador de la lista que tuviese instalado en el móvil-tablet pasándole por parámetros mi posición y una ruta destino, para que me calculase la ruta y me llevase con gps desde mi posición hasta el destino, cómo puedo hacer para abrir algún gps de la lista y poder añadir esta funcionalidad a un botón de mi app?

caroto_caroto

06/7/2012
Para el header y footer fijo
pues es con colocar: data-position="fixed"

Tanto en tu data-role header como footer

:)

Ismael Torres

19/7/2012
No muestra estilos al regresar la infrmación con ajax
Estoy haciendo un desarrollo de mensajes con jquery mobile, tengo una pagina que muestra los mensajes haciendo una llamada mediante jquery y ajax a una pagina php que le reguesa todos los mensajes, el problema es que cuando me regresa los mensajes pierde el formato o css en esa seccion del codigo:<br />
<br />
escript para recibir los mensajes juevos:<br />
<br />
$(&#039;#btMnuevos&#039;).click(function(){<br />
$.ajax({<br />
type: &quot;POST&quot;,<br />
url: &quot;http://localhost/direction/_exe/fastq/mensajes.php&quot;,<br />
cache: false,<br />
dataType: &quot;text&quot;,<br />
success: fnSmensajes<br />
});<br />
$(&quot;#dvPreguntas&quot;).ajaxError(function(event,request,settings,exception){<br />
$(&quot;#dvPreguntas&quot;).html(&quot;Error calling: &quot; + settings.url + &quot;&lt;br /&gt; HTTP Code: &quot; + request.status);<br />
});<br />
function fnSmensajes(data){<br />
$(&quot;#dvPreguntas&quot;).html(data);<br />
}<br />
});<br />
<br />
script php que arma la tabla con los mensajes con los formatos de jquery mobile:<br />
&lt;?<br />
$vrValses = 1;<br />
require(&#039;../../c0nf1g.php&#039;);<br />
$cmPreguntas = &quot;<br />
SELECT<br />
mns_tbPregyresp.cpPreguntaid,<br />
mns_tbPregyresp.cpPregunta,<br />
mns_tbPregyresp.cpFecha<br />
FROM <br />
mns_tbPregyresp<br />
WHERE <br />
mns_tbPregyresp.cpEstatus = &#039;2&#039;<br />
&quot;;<br />
mysql_select_db($stSys[&#039;bdsasc&#039;]);<br />
$rgPreguntas = mysql_query($cmPreguntas);<br />
if($rgPreguntas){<br />
$ttPreguntas = mysql_num_rows($rgPreguntas);<br />
if($ttPreguntas){<br />
$dtPreguntas = mysql_fetch_assoc($rgPreguntas);<br />
$vrPreguntas = &#039;&lt;ul data-role=&quot;listview&quot; data-divider-theme=&quot;b&quot; data-inset=&quot;true&quot; id=&quot;ulPreguntas&quot;&gt;&#039;;<br />
do{<br />
$vrPreguntas .= &#039;<br />
&lt;li&gt;<br />
&lt;a class=&quot;csPregunta&quot; data-dtFecha=&quot;&#039;.$dtPreguntas[&#039;cpFecha&#039;].&#039;&quot; data-dtAsunto=&quot;&#039;.$dtPreguntas[&#039;cpAsunto&#039;].&#039;&quot; data-dtPregunta=&quot;&#039;.$dtPreguntas[&#039;cpPregunta&#039;].&#039;&quot; data-dtPreguntaid=&quot;&#039;.$dtPreguntas[&#039;cpPreguntaid&#039;].&#039;&quot; id=&quot;cpPregunta&#039;.$dtPreguntas[&#039;cpPreguntaid&#039;].&#039;&quot; href=&quot;#dvRmensaje&quot;&gt;<br />
&lt;p class=&quot;ui-li-aside&quot;&gt;&#039;.$dtPreguntas[&#039;cpFecha&#039;].&#039;&lt;/p&gt;<br />
&lt;h3&gt;Titulo&lt;/h3&gt;<br />
&lt;p&gt;&#039;.$dtPreguntas[&#039;cpPregunta&#039;].&#039;&lt;/p&gt;<br />
&lt;/a&gt;<br />
&lt;/li&gt;<br />
&#039;;<br />
}while ($dtPreguntas = mysql_fetch_assoc($rgPreguntas));<br />
$vrPreguntas .= &#039;&lt;/ul&gt;&#039;;<br />
}else{<br />
echo &quot;No hay preguntas que mostrar&quot;;<br />
}<br />
}else{<br />
echo &quot;Ocurrio un error al cargar las preguntas &quot;.mysql_error();<br />
}<br />
echo $vrPreguntas;<br />
?&gt;

carcalucho

08/8/2012
Agradecimientos y sugerencias
Saludos Amigos de Desarrolloweb.com
Les escribo para agradecerles de antemano por sus valiosos aportes realizados a través de la página, he estado leeyendo este manual de jQuery Mobile y me ha parecido muy bueno, asi como otros que he leido anteriormente y he tenido la oportunidad de verlos a traves de los videos.
Queria sugerirles o saber si tienes este manual de jQuery Mobile en video como los demas monotematicos, si no lo tienes seria muy bueno que los hicieran ya que a través de los videos he aprendido mucho.
Gracias nuevamente por sus aportes realizados a través de Desarrolloweb.com.
Saludos.

HakDomi

09/8/2012
Jquery Mobiel y MVC
Estoy implementando Jquery Mobile con MVC 3, aunque me funciona localmente en mi maquina, pero cuando lo publico en un Servidor Windows Server 2003 IIS 6.0 no me da acceso a la pagina. necesito saber cual seria la configuracion de este tipo de Pagina web en el IIS 6.0.

PomyLocuras

06/11/2012
Duda JQM
Buenos Días,
Os planteo mi problema, estoy desarrollando mi web con JQM y varias de las páginas las utilizo con el formato multipágina. Despues en otra página que no es del formato multipágina que esta en otro directorio de mi servidor, realizo un select, mediante javascript obtengo el número seleccionado por el cliente y lo envio a otra página para mostrar la información dependiendo de lo seleccionado. El problema viene ahora envio la variable por la url y al darle al botón de home (Pretendo volver al #home de la página en formato multipagina) no funciona debido a que la url dispone de ?variable=2 al final.
¿Como puedo pasar de otra forma la variable sin que aparezca en la url?
He probado a poner ../../index.html ../../index.html#home pero al volver al home no funcionan los botones de la lista para ir a otras secciones de mi página multipagina.

En otras páginas en las que no tengo select y que se encuentran en otro directorio al index al darle al botón de home vuelve perfectamente y funciona la navegación.

Un saludo y Gracias

JUlio

18/11/2012
ejecutar aplicacion jquerymobile en mi pc sin conexion a internet
Hola amigos, muy buenas las clases que las comprendi todo, pero me gustaria saber como puedo hacer para correr una aplicacion jquery mobile sin internet. Yo descargue llos archivos del zip peroc cuando ruteo de nuevo y ejecutar no da. Ademas cuando un o descarga el zip, siempre falta el archivo:
jquery-1.8.2.min.js
Como lo descargo y como se rutea al archvio html a ejecutar.
Gracias

Antonio

11/12/2012
Direccionamiento de mobiles ok
Instale el codigo de redireccionamiento utilizando android y perfecto
muchas gracias, que seria de mi sin un foro....

Alvaro Doune

01/5/2013
jQueryMobile
hola, tengo una consulta de jQuery Mobile..
tengo un listado de articulos y cada uno tiene su boton de eliminar, este me lleva a un popup que consulta si realmente estas seguro querer eliminar ese articulo, el problema es que no puedo hacer llegar el id del articulo hasta el popup, como se hace para pasarle el parametro?
muchas gracias

nahym

18/7/2013
imagen de fondo en jquery mobile
buen dia disculpa mi duda es como puedo agregar una imagen de fondo en la pantalla de jquery mobile trabajo en dreamweaver cs6 ya me rompi la cabeza pero no puedo hacerlo

thaylor mosquera castro

28/12/2013
pregunta rager slider
verán tengo un control input type ranger, y quiero ejecutar acciones cuando el usuario interactue con el componente, alguien a logrado esto.....!

chirajito el clown

17/8/2014
Excelente tutorial
Te felicito es la expresion de un profesional en la rama , gracias por compartirlo

Angel Robles

04/12/2015
Librerias o Directivas
Donde puedo descargar o encontrar las librerías para trabajar con JQuery Mobile