Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • J Query Mobile

    Загружено:

    Jhon Pichihua H
    47 просмотров33 страницы

    Оригинальное название

    j Query Mobile

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    47 просмотров33 страницы

    J Query Mobile

    Загружено:

    Jhon Pichihua H

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 33

    jQUery Mobile

    Dr. Jo s M artn Mol in a Es pi no sa

    jQuery Mobile
    http://jquerymobile.com/ Cmo crear aplicaciones con el look-and-feel de Android a travs del uso de estilos CSS y de javascript? Actualmente encontramos: jQTouch, iUI, y Sencha Touch

    Libreras Javascript
    Jquery es una librera de funciones para Javascript que permite la manipulacin del DOM con funciones orientadas a la programacin. Jquery tambin no slo incluye funcionalidad sino tambin widgets grficos. Jquery Mobile, es la librera exclusiva para navegadores mviles.

    Interfaz grfica
    Emular el look & feel Usar el marco Colocar botones de accin en el marco Crear menus deslizantes Incluir botones de regreso Separar las ligas Usar el viewport Apagar la capacidad de zoom

    Elementos de diseo para dispositivos mviles


    Siempre en Internet Uso de AJAX para acceso de datos sin bloque de aplicacin Bajo consumo Limitado al navegador mvil Geo-Localizacin Posibilidad de acceso a la localizacin del dispositivo mvil desde web!!! Entrada / salida Uso de gestos

    Obtencin de la librera jQueryMobile


    Pgina web: http://jquerymobile.com Instalacin: Uso de los archivos contenidos en directorio de distribucin jquery.mobile-version.css jquery.mobile-version.js

    Desarrollando con jQuery


    <link rel="stylesheet" href="http:// code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/ 1.1.0/jquery.mobile-1.1.0.min.js"></script>

    Plataformas soportadas
    http://jquerymobile.com/original-gradedbrowser-matrix/

    Plataformas de desarrollo
    PhoneGap. SDK que puede integrarse a IDEs como eclipse para el desarrollo de aplicaciones hbridas. Costo, gratuito. Codiqa. Desarrollo de aplicaciones web a travs del navegador. Costo $19-$149 USD al mes. No permite la programacin en Javascript, pero genera HTML. Handheld designer. Aplicacin Mac para desarrollo exclusivo para iOS, costo $600 MXP Sencha Architect 2. Aplicacin win/Mac para desarrollo visual de aplicaciones web, costo $399-$7195 USD al ao.

    Formato de una pgina


    <!DOCTYPE html> <html> <head> <title>Page Title</title>

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

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/ jquery.mobile.structure-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    </head>

    Formato de una pgina


    <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>

    </body> </html>

    Pginas dentro de pginas

    Paso de parmetros para cambio de pgina


    El paso de parmetros para cambio de pgina es mediante el uso de # en el URL de la pgina, lo que cambio el significado de uso del mismo. As pagina.html#otraPagina significa cambiar la vista actual a otraPagina en lugar de hacer scroll de la pgina hasta el identificador otraPagina

    HTML 5 etiqueta dataEn HTML 5 es posible definir datos definidos por el usuario mediante el uso de la etiqueta data<div id='fresa' data-cuantas='15'></div> <script> var fruta = document.getElementById('fresa'); var contador = fruta.getAttribute('data-cuantas'); // contador = '15' fruta.setAttribute('data-cuantas','7'); </script>

    Uso de etiqueta data<div id='rosa' data-petalos='20' data-altura='1.2m'></div>

    <script> var planta = document.getElementById('rosa'); var npetalos = planta.dataset.petalos; // npetalos = 20;

    var estatura = planta.dataset.altura; planta.dataset.altura = '1.6m'; </script>

    Manejo de ttulos de pginas


    Cada pgina en html puede contener un ttulo que aparece en la parte superior del navegador Cmo cambiar el ttulo de una pgina html que contiene varias pginas mediante el uso de la etiqueta data-? Jquerymobile carga las pginas mediante el uso de AJAX usando las etiquetas dataEl atributo data-title permite cambiar el ttulo de cada pgina que es presentada como pgina principal del navegador. <div data-role="page" id="foo" data-title="Page Foo">

    Ligado de pginas
    El ligado de pginas se realiza mediante AJAX. El atributo href es parseado y usado para hacer la carga asincrnica de la pgina mediante la modificacin del DOM actual. En caso de que la carga AJAX tenga problemas, se desplegar un error. El uso de AJAX permite tener una animacin de transicin entre pginas.

    Ligado de pginas sin AJAX


    Si se desea cargar un documento html multipgina, se debe de desactivar el atributo AJAX mediante rel="external" o bien data-ajax="false" <a href="multipage.html" rel="external">Multipage link</a> La carga de pginas en este estilo NO tendrn animacin de transicin

    Botn de regreso <Back


    La navegacin entre pginas mviles obliga a tener un botn de navegacin hacia atrs en la GUI. Se puede regresar en la historia de navegacin mediante el uso del atributo data-rel="back" en la etiqueta a(nchor). Este atributo ignora el contenido del atributo href de la misma etiqueta.

    Transiciones
    La animacin que ocurre en la presentacin de un nuevo elemento, dialogo o pgina, se le llama transicin. Lista de transiciones: fade. Desaparece la pantalla actual y aparece del nuevo elemento. pop. Nuevo elemento aparece desde el centro flip. La pantalla gira 180% sobre el eje Y central. turn. La pantalla gira 180% sobre el eje Y de la izquierda. flow. La pantalla es minimizada y luego re-emplazada por el nuevo elemento. slidefade. Una cortina recorre desde un extremo la pantalla y luego aparece el nuevo elemento. slide. Una cortina recorre desde un extremo la pantalla dejando aparecer de inmediato el nuevo elemento. slideup y slidedowm. Una cortina recorre desde el Top / Bottom de la pantalla dejando aparecer de inmediato el nuevo elemento. none

    Dialogos
    Cualquier pgina puede ser presentada como un dialogo modal cuya funcionalidad es idntica a la funcin alert de Javascript. Se utiliza el atributo data-rel="dialog" <a href="foo.html" data-rel="dialog">Open dialog</a>

    Formularios
    La obtencin de datos se hace a travs de formularios HTML tradicionales en donde se acomodan los elementos de interaccin con el usuario. <form action="form.php" method="post"> ... </ form>

    Formularios
    Debido a que en un mismo archivo HTML pueden estar definas varios elementos de pginas distintas, todos los elementos deben tener identificadores distintos. Para asociar elementos se utiliza el atributo for <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" />

    Ejercicio guiado
    Crear una calculadora de IMC usando JqueryMobile Crear la GUI usando codiqa http://www.codiqa.com/ Modificar el HTML generado e incluir la funcionalidad de clculo de IMC

    Usando codiqa

    Agregar funcin de clculo IMC


    function calcular() { var estatura=document.getElementById("textinput1"); var peso=document.getElementById("textinput2"); var resultado=peso.value/(estatura.value*estatura.value); document.getElementById("textinput3").value=resultado; //alert(resultado); }

    Asociar invocacin de funcin

    <a data-role="button" datatransition="fade" onClick="calcular()"

    Componentes en jQuery
    Pginas y dilogos Barras de herramientas Botones Formateo de contenido Formularios Listas

    Listas con jQuery Mobile


    <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>

    Laboratorio guiado
    Creacin de una pgina que consume datos JSON Crear una nueva pgina web que contenga informacin institucional o personal

    Creacin del contenido

    Pgina de detalle
    Crear una pgina con una lista que muestre la informacin obtenida a travs de un JSON Usar JSONP para la obtencin de datos de sitios 3ros.

    Eventos
    Existen un conjunto de eventos que son ejecutados en jQueryMobile http://jquerymobile.com/demos/1.1.0/docs/api/events.html Entrada desde la GUI Ciclo de vida de las pginas Carga de pginas pagebeforeload pageload

    Вам также может понравиться