Jerti: LungoJS- Como se usa?

Introducción

La premisa principal de Lungo es crear una estructura semántica en el proyecto en su conjunto, a partir del lenguaje de marcado HTML , a través de una bien organizada CSS y terminando con la API de JavaScript . Lungo ofrece una gran facilidad cuando se prototipa una aplicación , y no tendrá que introducir las líneas de código (JavaScript) para visualizar cómo se comportará nuestra aplicación. En esta sección vamos a aprender que son LungoJS elementos semánticos que se relacionan con cada uno y cómo se pueden crear aplicaciones con HTML. Es muy emocionante! vamos a empezar.

Referencias

Por lo tanto, puede configurar las opciones que desee:


<link rel="stylesheet" href="../../build/lungo-1.2.min.css">
<link rel="stylesheet" href="../../build/themes/lungo.theme.default.css">

<!-- LungoJS (Production mode) -->
<script src="/lungo.js/lungo-1.2.packed.js"></script>

<!-- LungoJS - Sandbox App -->
<script src="/app/app.js"></script>
<script src="/app/data.js"></script>
<script src="/app/events.js"></script>
<script src="/app/services.js"></script>
<script src="/app/view.js"></script>

Inicializa un contenedor

Para inicializar LungoJS sólo tenemos que crear una instancia de la aplicación:


var App = (function(lng, undefined) {

    lng.App.init({
        name: 'LungoJS Test Source',
        version: '1.2'
    });

})(LUNGO);

Carga de Recursos Async

Desde la versión 1.2 puede cargar de forma asincrónica y los recursos de forma remota. Es tan fácil como en el caso de su solicitud de indicar cuáles son las secciones y las plantillas que desea utilizar:



lng.App.init({
        name: 'Kitchen Sink',
        version: '1.2',
        resources: {
            sections: [
                'navigation.html',
                'forms.html',
                'aside.html',
                'http://domain.com/app/sections/remote.html'
            ],
            templates: [
                'list-default.html',
                'http://domain.com/app/templates/profile.html'
            ]
        }
    });

Elementos

En esta sección vamos a aprender que son elementos semánticos LungoJS y como se relacionan.

veremos cómo se pueden crear aplicaciones con HTML.

Sección

Tenemos que entender lo que es un <section>, un punto de vista de nuestra aplicación, donde el contenido se mostrará y donde puede haber subelementos como <header>, <footer>, <article> (explicado más adelante). Para crear una sola sección tenemos que usar HTML:


<section id="main">
    <!-- content -->
</section>

Encabezado y pie de página

Para crear un <header> o <footer> una en una sección, usted debe escribir el código HTML querida, es muy fácil:

<section id="main">
    <header data-back="home blue" data-title="Title of section"></header>

    <footer class="toolbar"></footer>

    <!-- content -->
</section>

Atributos de <header> y <footer>:

data-title:

titulo que desea asignar a la sección, esta unión atributo utilizado para auto-asignación

data-back:Crear un botón que va a la sección anterior (en el caso que proceda) utilizando las propiedades de color y el icono que seleccione.

Options:'icono' y 'color'

Artículo

El contenido de un <section> particular, se estructura a través de <article>. Dentro de una sección pueden haber tantos <article> como quieras.

<section id="main">
    <!-- header -->

    <!-- footer -->

    <article id="first_article">
        <!-- content -->
    </article>

    <article id="second_article">
        <!-- content -->
    </article>

</section>

Si usted quiere un artículo en la lista sólo tiene que asignar la clase "lista" y en el caso de que quiera tener un campo de búsqueda se debe asignar el atributo de datos de búsqueda.

<article id="first_article" class="list" data-search="blue">
    <!-- content -->
    <li>First element of list</li>>
    <li>Second element of list</li>
    ...
</article>

Aside

El elemento <aside> nos da la posibilidad de una zona lateral que aparecen en función del dispositivo (Tablet PC) o se oculte (móvil).

<section id="main">
    <!-- header -->

    <!-- footer -->

    <!-- article -->
</section>

<aside id="profile-aside" class="onleft">
    <!-- content -->
</aside>

Podemos crear un enlace que hace referencia a un <aside> con un identificador de concreto utilizando el sistema de navegación de LungoJS. Vamos a utilizar el atributo de datos de destino (que se discutirá en los capítulos siguientes).

<header>
    <a href="#profile-aside" data-target="aside">View Aside</a>
</header>

Navigation

Introducción

La navegación en el Lungo es completamente semántica, y que jugará con el <a> elemento y sus atributos de datos "objetivo" para indicar al sistema que muestran <section>, <article> o <aside>.

<section id="main">
    <article id="article_1">
        <a href="#article_2" data-target="article" data-icon="home"></a>
    </article>

    <article id="article_2">
        <a href="#article_1" data-target="article" data-icon="back"></a>
    </article>
</section>

Si quiere desplazarse a otra sección sólo tiene que ceder "sección" con el atributo "de datos de destino".

<section id="main">
    <article id="first_article">
        <a href="#second" data-target="section" data-icon="home"></a>
    </article>
</section>

<section id="second">
    <!-- content -->
</section>

Lungo ofrece un esquema de navegación tomando ventaja de las etiquetas HTML5 nuevos. Aquí puedes ver un ejemplo completo de la navegación:

<section id="main">
    <footer class="toolbar">
        <nav>
            <a href="#article_1" data-target="article" data-icon="home"></a>
            <a href="#article_2" data-target="article" data-icon="user"></a>

             <- Este enlace es para ver una sección diferente -> 
            <a  href = "# segundos"  de datos de destino = "sección"  de datos-icon = "right" > </ a> 
        </ nav> 
    </ pie de página>

    <El artículo  Identificación = "article_1" > </ article> 
    <el artículo  Identificación = "article_2" > </ article> 
</ seccion>

<Sección de  Identificación = "segundo" > 
    <cabecera de  los datos de devolución = "casa azul" > </ encabezado> 
    <! - contenido -> 
</ seccion>

Menús con el elemento <nav>

Para crear grupos de acciones dentro de un pie de página o el encabezado se utiliza el elemento de navegación para crear estructuras simples.

<section id="main">
    <header data-title="Title of section">
        <nav>
            <a href="#" data-title="First Article"></a>
            <a href="#" data-title="Second Article"></a>
        </nav>
    </header>

    <!-- content -->
</section>

La posición del elemento de navegación dependerá de la clase que se le aplica. "onleft" a la izquierda y "onright" a la derecha.

<nav class="onleft">
    <a href="#" data-title="First Article"></a>
    <a href="#" data-title="Second Article"></a>
</nav>

Una de las premisas en Lungo es crear interfaces limpias, pero como a veces se necesita para poner el texto en el sistema de navegación ha sido creado para mostrar el texto sólo cuando el elemento de navegación es una ventaja. Sólo tenemos que usar el elemento de <abbr> el resto es magia.

Barra de herramientas

Si queremos que nuestro elemento de navegación llena la anchura disponible de una cabecera o pie de página que se le asigna a la clase "barra de herramientas".

Vinculaciones

Para actualizar el título de una sección a través de la navegación, sólo tiene que utilizar el título de datos de atributos:

<section id="main">
    <header data-title="Title of section">
        <nav>
            <a href="#" data-title="First Article"></a>
            <a href="#" data-title="Second Article"></a>
        </nav>
    </header>

    <!-- content -->
</section>

Para mostrar un elemento sólo cuando un artículo en particular es visible, tendremos que utilizar el artículo de datos de atributos:

Iconos

En los ejemplos mencionados que están viendo un atributo de "datos-icon", este atributo sólo tiene el nombre de semántica del icono que desea mostrar y Lungo hacer la voluntad del resto de la obra.

<a href="#" data-icon="home"></a>

Formularios

Lungo pone especial interés en los elementos del formulario, ya que ofrece una arquitectura única para todas las plataformas.

Botones

Puede crear botones de cualquier forma, color y acompañado (si se quiere) de los atributos de datos de iconos, porque esto sólo es necesario asignar el botón <class>

<a href="#" class="button blue" data-icon="home"></a>

<a href="#" class="button big pink">Example of button</a>

Estos botones se pueden crear en cualquier área de nuestra aplicación, hay atributos dinámicos tales como los datos de devolución que se crea un botón automático:

<section id="main">
    <!-- data-back="{ICON} {COLOUR}" -->
    <header data-back="home blue"></header>

    <!-- content -->
</section>

Estilo neutro

El resto de los elementos del formulario tiene un estilo definido para todas las plataformas móviles siempre serán modificadas a través de CSS.

<p class="form">
    <input type="text" placeholder="Input text"/>

    <input type="password" placeholder="Input password"/>

    <input type="checkbox">Save credentials</input>

    <textarea placeholder="Textarea sample"></textarea>

    <label class="select">
        <select class="custom">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </label>
</p>

Scrolls

Lungo ayuda a crear pergaminos automóviles de la creación de prototipos <markup>, es tan simple como usar la clase "desplazamiento" y Lungo se analizará si el recipiente tiene que ser desplazable.

<article id="main" class="list scrollable">
     <ul>
        <li data-icon="user">
            <strong>@soyjavi</strong>
            <small>Author of @Lungojs</small>
        </li>

        <li data-icon="user">
            <strong>@pasku1</strong>
            <small>Contributor of @Lungojs</small>
        </li>

        ...
     </ul>
</article>

Otro ejemplo:

<div id="scroll_buttons" class="scrollable">
    <p class="buttons" style="height:730px;">
        <a href="#" class="button big">default</a>
        <a href="#" class="button big disabled">disabled</a>

        <a href="#" class="button big red">red</a>
        <a href="#" class="button big lightgreen">lightgreen</a>
        <a href="#" class="button big green">green</a>
        <a href="#" class="button big blue">blue</a>
        <a href="#" class="button big articblue">articblue</a>
        <a href="#" class="button big orange">orange</a>
        <a href="#" class="button big magenta">magenta</a>
        <a href="#" class="button big pink">pink</a>
        <a href="#" class="button big yellow">yellow</a>
        <a href="#" class="button big twitter" data-icon="twitter">twitter</a>
        <a href="#" class="button big facebook" data-icon="facebook">facebook</a>
    </p>
</div>>

Si usted quiere más control (y la información) a través de esta función, debe estudiar un poco nuestra API de JavaScript .

API de JavaScript

Por supuesto, esto no es todo, después de conocer la creación de prototipos <markup> ahora tienes que estudiar nuestra API de JavaScript . Esta API tiene algunas características que serán muy útiles al crear sus aplicaciones. Conocer y aprovechar las verdaderas capacidades de HTML5 como: WebSQL, Ubicación geográfica, historia ... y las funcionalidades de Lungo como DataBinding, plantillas, caché ... y muchos más.

Videotutorial anexo - 1

LungoJS - Layout Prototyping (Spanish) from LungoJS on Vimeo.

Videotutorial anexo - 2

LungoJS - RESTful + Templating + Cache (Spanish) from LungoJS on Vimeo.

Páginas

Buscar

LungoJS- Como se usa?

Introducción

Referencias

Inicializa un contenedor

Carga de Recursos Async

Elementos

Sección

Encabezado y pie de página

Artículo

Aside

Navigation

Introducción

Menús con el elemento <nav>

Barra de herramientas

Vinculaciones

Iconos

Formularios

Botones

Estilo neutro

Scrolls

API de JavaScript