Hay dos formas de agregar jQuery Mobile a su sitio web:
- Enlace a una biblioteca de jQuery Mobile almacenada en un CDN (recomendado)
- Enlace a una biblioteca de jQuery Mobile almacenada en su computadora
Enlace a jQuery Mobile desde un CDN
(Un CDN (Red de entrega de contenido) se utiliza para distribuir archivos de uso frecuente en la web.
Esto hace que la velocidad de descarga sea mucho más rápida para el usuario)
Nota:Al igual que con jQuery core, no hay nada que instalar en su computadora; solo incluye la siguiente hoja de estilo (.css) y las bibliotecas de JavaScript (.js) directamente en su página HTML, para que jQuery Mobile funcione:
jQuery Mobile CDN:
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Nota: La etiqueta viewport <meta> dentro del elemento <head> especifica cómo el navegador debe controlar el nivel de zoom y las dimensiones de la página.
El width=device-width establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Enlace a jQuery Mobile almacenado en su computadora
Si desea alojar la biblioteca de jQuery Mobile usted mismo, primero debe descargarla de jQuerymobile.com .
Luego agrega el siguiente código a tu página:
<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>
<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>
Sugerencia: coloque los archivos descargados en el mismo directorio que las páginas donde desea usarlos.
¿Se pregunta por qué no tenemos type = "text / javascript" dentro de la etiqueta <script>?
Esto no es necesario en HTML5. ¡JavaScript es el lenguaje de script predeterminado en HTML5 y en todos los navegadores modernos!
Esto no es necesario en HTML5. ¡JavaScript es el lenguaje de script predeterminado en HTML5 y en todos los navegadores modernos!
Nota: se recomienda su uso desde un CDN
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.css">
jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js">
</script>
</script>
<script src="http://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.js">
jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Bienvenido a JQuery <i class="fas fa-mobile-alt"></i></h1>
</div>
<div data-role="main" class="ui-content">
<p>Soy un desarrollador de WebApss Mobiles!!</p>
</div>
<div data-role="footer">
<h1>Esto es un pie de pagina</h1>
</div>
</div>
</body>
</html>
Nota:Guarda tu archivo con extensión (.HTML), claro mientras no uses lenguaje del lado servidor como php, cuando así sea se guardará con extensión php(más adelante se mostrara su uso con php)
Resultado en Firefox:
No hay comentarios:
Publicar un comentario