Scribd Logo
Загрузить

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

  • Panel Agregar

    Загружено:

    german271267
    10 просмотров4 страницы

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

    Panel agregar.docx

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

    © © All Rights Reserved

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

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

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

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

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

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

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    10 просмотров4 страницы

    Panel Agregar

    Загружено:

    german271267

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

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    Panel

    Se los emplea generalmente para crear barras de navegacin,


    mostrar un formulario o visualizar informacin adicional.
    Cuando el usuario presiona por ejemplo un botn o un enlace, los
    paneles se abren ya sea a la izquierda o a la derecha de la pantalla,
    superponindose a la misma o deslizando la pgina principal.
    Debemos crear el panel antes o despus de las secciones de una
    pgina jQuery Mobile: header, content y footer, pero nunca en el
    medio de estas secciones.
    Para crear este componente usamos el atributo data-role="panel".
    Adems debemos asignarle un identificador (id) que nos servir para
    luego hacer el vnculo que nos va abrir el panel.

    La sintaxis bsica del panel es la siguiente

    <div data-role="panel" id="mi_panel">
    <!-- Ac ponemos el contenido del panel-->
    </div>

    Como mencionamos antes, para abrir el panel tenemos que crear un
    enlace que llame al id del panel. Este enlace puede estar en
    cualquiera de las secciones de la pgina, es decir lo podemos incluir
    ya sea dentro del encabezado o en el pie de pgina o dentro de la
    seccin contenido.
    Por ejemplo, si el id del panel es mi_panel, la sintaxis para abrir el
    panel mediante un botn es la siguiente:

    <a href="#mi_panel" data-role=button>Abrir</a>

    Por defecto el panel se abrir en el lado izquierdo de la pantalla, sin
    embargo podemos hacer que el panel aparezca desde el borde
    derecho de la pantalla, para lograr esto usamos el atributo data-
    position al cual le asignamos el valor "rigth" como mostramos a
    continuacin.

    <div data-role="panel" id="mi_panel" data-
    position="rigth">
    <!-- Ac ponemos el contenido del panel-->
    </div>

    Veamos un ejemplo para explorar sus posibilidades. El siguiente
    cdigo muestra un panel que presenta un men que se abre a la
    izquierda de la pantalla

    <body>

    <div data-role="page" id="nosotros">

    <div data-role="panel" id="mi_panel">
    <ul data-role="listview">
    <li><a
    href="#nosotros">Nosotros</a></li>
    <li><a
    href="productos.html">Productos</a></li>
    <li><a
    href="locales.html">Locales</a></li>
    </ul>
    </div>

    <div data-role="header">
    <h1>Heladera Paco</h1>
    <a href="#mi_panel" data-
    role="button">Abrir</a>
    </div>

    <div data-role="content">
    <h2>El sabor original</h2>
    <p> Contamos con 50 aos de experiencia en la
    fabricacin de cremas heladas utilizando materias
    primas naturales de altsima calidad.</p>
    </div>

    <div data-role="footer" data-position="fixed">
    <h1> Vistenos los 365 das del ao </h1>
    </div>

    </div>

    </body>


    CAP5_FIGxxx.png (panel)
    Figura xx. En este ejemplo creamos un men que llama a pginas
    externas.



    Dato til
    Por defecto el panel se cierra, cuando hacemos clic o tocamos fuera
    del mismo. Sin embargo tambin podemos incluir un botn para
    cerrar el panel. Para ello creamos un enlace a la pgina donde el
    usuario debe saltar cuando cierre el panel. En este enlace, adems,
    incluiremos el atributo data-rel=close, como mostramos en el
    siguiente ejemplo

    <a href="#pagina1" data-role="button" data-
    rel="close">Cierra el panel</a>



    Dato til
    Visualizar el panel
    Por defecto cuando abrimos un panel por el lado izquierdo de la
    pantalla, el mismo desliza la pgina principal a la derecha de la
    pantalla. Sin embargo podemos cambiar el comportamiento del
    mismo empleando el atributo data-display, el cual puede tomar
    los siguientes valores: overlay, push o reveal.


    Podemos especificar como el contenido del panel debe colocarse de
    acuerdo con el resto de la pgina cuando el usuario se desplaza por la
    pgina (scroll). De manera predeterminada el panel se desplazar
    con la pgina, pero el contenido del panel se mantendr en la parte
    superior de la pgina. Para que el contenido del panel se visualice
    siempre, sin importar lo lejos que se haya desplazado el usuario por
    la pgina, agregamos el atributo data-position=fixed =true.







    Son muy tiles, ya que nos permiten ahorrar espacio en la pantalla.

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