jQuery Mobile - Configuración

En este capítulo, discutiremos cómo instalar y configurar jQuery Mobile.

Descarga jQuery Mobile

Cuando abra el enlace jquerymobile.com/ , verá que hay dos opciones para descargar la biblioteca móvil jQuery.

Custom Download - Haga clic en este botón para descargar una versión personalizada de la biblioteca.
Latest Stable - Haga clic en este botón para obtener la versión estable y más reciente de la biblioteca móvil jQuery.

Descarga personalizada con Download Builder

Con Download Builder, puede crear una compilación personalizada que incluya solo las partes de la biblioteca que necesite. Cuando descargue esta nueva versión personalizada de jQuery Mobile, verá la siguiente pantalla.

Puede seleccionar las bibliotecas según sus necesidades y hacer clic en el Build My Download botón.

Descarga estable

Haga clic en el botón Estable , que conduce directamente a un archivo ZIP que contiene los archivos CSS y JQuery, para obtener la última versión de la biblioteca móvil jQuery. Extraiga el contenido del archivo ZIP en un directorio móvil de jQuery.

Esta versión contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.

Descargar la biblioteca jQuery desde CDN

Una CDN (Content Delivery Network) es una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos desde sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si un visitante de su página web ya ha descargado una copia de jQuery mobile desde el mismo CDN, no tendrá que volver a descargarla. Puede incluir los siguientes archivos CDN en el documento HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial. Usamos el servidor AMPPS (AMPPS es una pila WAMP, MAMP y LAMP de Apache, MySQL, MongoDB, PHP, Perl y Python) para ejecutar todos nuestros ejemplos.

Ejemplo

A continuación se muestra un ejemplo simple de jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Los detalles del código anterior son:

Este código se especifica dentro del elemento head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

La ventana gráfica se utiliza para especificar (por el navegador) mostrar el nivel y la dimensión de zoom de la página.
content = "width = device-width" se utiliza para establecer el ancho de píxel de la página o del dispositivo de pantalla.
initial-scale = 1 establece el nivel de zoom inicial, cuando la página se carga por primera vez.

Incluya las siguientes CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

El contenido dentro de la etiqueta <body> es una página que se muestra en el navegador.

<div data-role = "page">
   ...
</div>

data-role = "header" crea el encabezado en la parte superior de la página.
data-role = "main" se utiliza para definir el contenido de la página.
data-role = "footer" crea el pie de página en la parte inferior de la página.
class = "ui-content" incluye relleno y margen dentro del contenido de la página.

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como simple_example.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/simple_example.html y se mostrará el siguiente resultado.

↰ Previous page Next page ↱