` or `button` tags data-router="section" with href="#back"
``` html
```
### Nav
To create simple structures of navigation buttons within a footer or header the nav element has to be used. In the header, the nav element's position will depend on the class applied to it. `left` to the left and `right` to the right.
``` html
{{CONTENT}}
{{OTHER_CONTENT}}
```
### Groupbar
Lungo gives you the capability to have a special menu at the top of your UI. To do this you have to extend the header element using class="extended" and create inside of it a nav element with class="groupbar"
``` html
Art-1
Art-2
{{CONTENT}}
{{OTHER_CONTENT}}
```
### Menu
Besides `` elements `and` *groupbar* there is another way to make the user select new view in your application. Since Brownie (v2.2) implements *menu* Control and it is called with the attribute `data-view-menu`:
```html
```
In case you want to give it a priority to icons only have to apply the `icons` class.
```html
…
```
Bindings
--------
#### Title Binding
To update the title of a section through the navigation, just use the attribute `data-title` in your navigation element.
``` html
```
#### Element binding
You can show nav elements when a particular article is visible with data-article attribute.
``` html
{{CONTENT}}
{{OTHER_CONTENT}}
```
* [Elements](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/prototype/elements.md)
* [Navigation](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/prototype/navigation.md)
Forms
-----
We know that forms have always been somewhat tedious to handle in web projects, Lungo makes easy create a uniform base and unique experience among all browsers. All controls from the `input` (in any of its variants) to the `button` are perfectly adapted for use with touch devices. You only have to use the `form` or class `form`:
``` html
Input
Input styled
Select
HTML5
CSS3
JavaScript
Input date
Example of touch checkbox
```
Lists
-----
Can you imagine an App without lists? we can't conceive of such a thing, so in Lungo offers you an multiple components to make lists tailored to your needs. Always keeping in mind that everything starts with a `` and continous with a ``:
``` html
```
Our ` ` element can be filled by multiple ways and how complex it all you want, check out a list item much more complete:
``` html
lorem ipsum
Title
lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
```
If you want to know more about the possible styles of the lists have to study the examples in our wonderful *Kitchen-Sink*.
JavaScript API
==============
Core
----
Lungo has several methods that are used inside its engine. Here you have them if you need to include some of their functionality in your application.
#### log()
Console system to display messages when you are in debug mode.
**Parameters**
```
number: Severity based in (1)Log, (2)Warn, (>2)Error
string: Message to show in the console
```
*Example*
``` javascipt
Lungo.Core.log(1, "Launched event");
Lungo.Core.log(2, "Warning!!");
Lungo.Core.log(3, "Error!!!!");
```
#### execute()
Executes callbacks based on the parameters received.
**Parameters**
```
function: callback to execute
```
*Example*
``` javascript
var myFunc = function(){
//Do something
};
var myFunc2 = function(){
//Do something
};
Lungo.Core.execute(myFunc, myFunc2);
```
#### bind()
Creates a new function that, when called, itself calls this function in the context of the provided this value, with a given sequence of arguments preceding any provided when the new function was called.
**Parameters**
```
object: object that 'this' can refer in the new function.
function: A function object.
```
This method **return** the function which will do the action on the object.
*Example*
``` javascript
var example = "This is ";
var addText = function(textToAdd){
text = this;
for(var i = 0, len = textToAdd.length; i < len; i++){
text += " " + textToAdd[i];
}
return text;
};
var text = ["an", "example"];
var finalText = Lungo.Core.bind(example, addText)(text);
//Result: "This is an example"
```
#### mix()
Copy from any number of objects and mix them all into a new object. The implementation is simple; just loop through arguments and copy every property of every object passed to the function.
**Parameters**
```
object: arguments to mix them all into a new object.
object: arguments to mix them all into a new object.
```
This method **return** an object with the mix done.
*Example*
``` javascript
var CONFIG_BASE = {
name: 'lungo_db',
version: '1.0'
};
var CONFIG = {
version: '1.1';
}
var finalConfig = lng.Core.mix(CONFIG_BASE, CONFIG);
/*
Result:
{
name: 'lungo_db',
version: '1.1'
}
*/
```
#### isOwnProperty()
Every object descended from Object inherits the hasOwnProperty method. This method can be used to determine whether an object has the specified property as a direct property of that object.
**Parameters**
```
object: object to test for a property's existence inside itself.
string: property the name of the property to test.
```
This method **return** boolean indicating if property exists.
*Example*
``` javascript
var car = {wheels:4,doors:true};
Lungo.Core.isOwnProperty(car,"wheels"); //Result: true
Lungo.Core.isOwnProperty(car,"wings"); //Result: false
```
#### toType()
Determine the internal JavaScript [[Class]] of an object.
**Parameters**
```
object: object to get the real type of itself.
```
This method **return** a string with the internal JavaScript [[Class]]
*Example*
``` javascript
var name = "Lungo";
Lungo.Core.toType(name); //Result: "string"
```
#### toArray()
Convert an array-like object into a true JavaScript array.
**Parameters**
```
object: Any object to turn into a native Array.
```
This method **return** the object in a plain array.
*Example*
``` javascript
var execute = function() {
var args = lng.Core.toArray(arguments);
}
```
#### isMobile()
Determine if the current environment is a mobile environment. This method **return** An object with the mix done.
*Example*
``` javascript
Lungo.Core.isMobile();
```
#### environment()
**Returns** information of execute environment.
*Example*
``` javascript
Lungo.Core.environment();
```
#### orderByProperty()
Orders a number of objects by a given parameter.
**Parameters**
```
list: List of objects.
string: Name of the property.
string: Type of order: asc or desc.
```
This method **return** an ordered list of objects by a property.
*Example*
``` javascript
var list = [
{name: 'Lungo', twitter: 'lungojs'},
{name: 'Quojs', twitter: 'quojs'},
];
var ordered_list = lng.Core.orderByProperty(list, 'name', 'asc');
```
#### findByProperty()
Finds a object with an specific property if exists in a list of Objects.
**Parameters**
```
list: The list with objects.
string: Name of the property.
```
This method **return** An instance of the object found, null if not found.
*Example*
``` javascript
var list = [
{name: 'Lungo', twitter: 'lungojs'},
{name: 'Quojs', twitter: 'quojs'},
];
var user = lng.Core.findByProperty(list, 'name', 'Lungo');
```
Cache
-----
Lungo implements its own cache type. This cache will store the value until the webapp is closed
#### set()
Sets in the LungoJS cache system a new key/value pair.
**Parameters**
```
string: Key for the new value.
string: [OPTIONAL] Subkey in LungoJS Cache System.
object: Value asigned to the key.
```
*Example*
``` javascript
var framework = {name: "Lungo", twitter: "lungojs"};
Lungo.Cache.set("lungoFramework", framework);
```
#### get()
Returns the cached value of a given key.
**Parameters**
```
string: Key in LungoJS Cache System.
string: [OPTIONAL] Subkey in LungoJS Cache System.
```
This method **return** an object containing the value.
*Example*
``` javascript
var cachedFramework = Lungo.Cache.get("lungoFramework");
//Result: {name: "Lungo", twitter: "lungojs"}
```
#### remove()
Removes the instance of a given key in LungoJs Cache System.
**Parameters**
```
string: Key in LungoJS Cache System.
string: [OPTIONAL] Subkey in LungoJS Cache System.
```
*Example*
``` javascript
Lungo.Cache.remove("lungoFramework");
```
#### exists()
Checks if the given key is stored in the cache.
**Parameters**
```
string Key in LungoJS Cache System.
```
This method **return** a boolean value which is true if the key is found
*Example*
``` javascript
Lungo.Cache.exists("lungoFramework");
```
DOM
---
Lungo uses the famous library [QuoJS](http://quojs.tapquo.com) to handle the DOM of your application. QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented, and micro coherent API.
### Manipulation
Using QuoJs, you can chain functions to execute several commands in one row. For more info about [Quo's](http://quojs.tapquo.com) API please go here.
*Example*
``` html
Tap here to change the color
```
Subscribe to a tap event with a callback
``` javascript
Lungo.dom('#main-article li').tap(function(event) {
Lungo.dom(this).toggleClass('light').toggleClass('dark');
});
```
### Triggers
When sections or articles are switched an event is launched. The target section/article will launch an `load` event and the current section/article will launch the `unload` one. We can bind to this events using QuoJs.
*Example*
``` html
```
``` javascript
Lungo.dom('#section1').on('unload', function(event) {
alert("Unloaded section 1");
});
Lungo.dom('#section2').on('load', function(event){
alert("Loaded section 2");
});
```
.Element
--------
### .Carousel
Lungo has a carousel element where content can be published and the user can navigate through it using the caroussel controls.
**Parameters**
```
string: Element query selector.
function: Function to execute when switching slide.
```
*Example*
``` html
```
``` javascript
var el = Lungo.Dom('[data-control=carousel]').first();
var example = Lungo.Element.Carousel(el, function(index, element) {
Lungo.dom("section#carousel .title span").html(index + 1);
});
```
#### Carousel.prev()
Show the previous slide.
*Example*
``` javascript
var example = Lungo.Element.Carousel(el);
Lungo.dom('[data-direction=left]').tap(example.prev);
```
#### Carousel.next()
Show the next slide.
*Example*
``` javascript
var example = Lungo.Element.Carousel(el);
Lungo.dom('[data-direction=left]').tap(example.next);
```
#### Carousel.position()
Returns the actual index.
*Example*
``` javascript
var example = Lungo.Element.Carousel(el);
example.next();
alert(example.position());
```
### .count
As it has been shown in the prototyping chapter, you can add a counter to elements using the data-count attribute. You can also add this counter using javascript.
#### JavaScript method
Set a counter to the element:
**Parameters**
```
string: Element query selector.
number: Value of the counter.
```
*Example*
``` javascript
Lungo.Element.count("#messages", 5);
```
#### HTML method
You can define via HTML a default value for a count element.
*Example*
``` html
```
### .loading
As it has been shown in the prototyping chapter, you can create a loading animation using the data-loading attribute. You can also add this animation using javascript:
**Parameters**
```
string: Element query selector.
string: [OPTIONAL] Stylesheet.
```
This method **returns** an instance of the object founded.
*Example*
``` html
```
``` javascript
Lungo.Element.loading("#main-article", 1);
```
### .progress
As it has been shown in the prototyping chapter, you can create a progress bar using the data-progress attribute. You can also add this bar using javascript.
**Parameters**
```
string: Element query selector.
number: The percentage value.
boolean: Boolean to show the percentage label.
```
*Example*
``` html
```
``` javascript
Lungo.Element.progress("#prg-example", 65, true);
```
### .Pull
As it has been shown in the prototyping chapter, you can create a pull and refresh element addind data-pull and some javascript code.
**Parameters**
```
string: Element query selector.
object: Object with the configuration.
```
*Example*
``` html
Test this featury only drag down.
This element has an associated event
```
``` javascript
var pull_example = new Lungo.Element.Pull('#main-article', {
onPull: "Pull down to refresh", //Text on pulling
onRelease: "Release to get new data",//Text on releasing
onRefresh: "Refreshing...", //Text on refreshing
callback: function() { //Action on refresh
alert("Pull & Refresh completed!");
pull_example.hide();
}
});
```
###.Menu
Manages visual behavior ``
#### Show
Displays the with a determinate Id
**Parameters**
```
string: Id
```
*Example*
``` javascript
Lungo.Element.menu.show("options")
```
#### Hide
Hides the with a determinate Id
**Parameters**
```
string: Id
```
*Example*
``` javascript
Lungo.Element.menu.hide("options")
```
#### Toggle
Toggles the with a determinate Id
**Parameters**
```
string: Id
```
*Example*
``` javascript
Lungo.Element.menu.toggle("options")
```
.Notification
-------------
To display notifications, many times people tend to use the javascript alert() function. The notification it shows looks different depending on the browser. Lungo has a notification system that shows pretty and responsive notifications styled in the same way in all the browsers, making your app look the same no matter the browser you use.
#### show()
Shows a customized notification.
**Parameters**
```
string: The icon, null for no icon.
string: Notification's title.
number: Seconds to show the notification, 0 for unlimited.
function: A function to execute when hiding the notification.
```
If you call to the show function without parameters it will show a loading screen
*Example*
``` javascript
var afterNotification = function(){
//Do something
};
Lungo.Notification.show(
"check", //Icon
"Success", //Title
3, //Seconds
afterNotification //Callback function
);
//Show loading screen
Lungo.Notification.show();
```
#### hide()
Hides the current notification.
*Example*
``` javascript
Lungo.Notification.hide();
```
#### success()
Shows success notification.
**Parameters**
```
string: Notification's title.
string: Notification's description.
string: The icon, null for no icon.
number: The time to show the notification, 0 for unlimited.
function: A function to execute when hiding the notification.
```
*Example*
``` javascript
var afterNotification = function(){
//Do something
};
Lungo.Notification.success(
"Success", //Title
"Successful operation", //Description
"check", //Icon
7, //Time on screen
afterNotification //Callback function
);
```
#### error()
Shows an error notification.
**Parameters**
```
string: Notification's title.
string: Notification's description.
string: The icon, null for no icon.
number: The time to show the notification, 0 for unlimited.
function: A function to execute when hiding the notification.
```
*Example*
``` javascript
var afterNotification = function(){
//Do something
};
Lungo.Notification.error(
"Error", //Title
"Unsuccessful operation", //Description
"cancel", //Icon
7, //Time on screen
afterNotification //Callback function
);
```
#### confirm()
Shows a confirmation notification.
**Parameters**
```
object: An object with the notification's config.
```
*Example*
``` javascript
Lungo.Notification.confirm({
icon: 'user',
title: 'Title of confirm.',
description: 'Description of confirm.',
accept: {
icon: 'checkmark',
label: 'Accept',
callback: function(){ alert("Yes!"); }
},
cancel: {
icon: 'close',
label: 'Cancel',
callback: function(){ alert("No!"); }
}
});
```
#### html()
Creates a notification using your own html code.
**Parameters**
```
string: The html code for the notification.
string: The closing button text.
string: Specific style for notification
number: The time to show the notification, 0 for unlimited.
```
*Example*
``` javascript
Lungo.Notification.html('Hello World ', "Close");
```
#### push()
Creates a non-obstructive notification
**Parameters**
```
string: Notification's title.
string: The icon, null for no icon.
string: Specific style for notification
```
*Example*
``` javascript
Lungo.Notification.html('Hello World ', "Close");
```
.Router
-------
Lungo.Router provides the user with the neccesary functions to manage the navigation through javascript. The following functions allow developers to work with the navigation through sections, articles and also asides.
#### section()
This function allows the navigation from a section to another one. It is done to navigate forward to a section, if you want to go back to a previous one you have to use the back function which will be explained later.
**Parameters**
```
string: The section's id.
```
*Example*
``` javascript
Lungo.Router.section("features");
```
#### article()
Displays the `` in a particular ``.
**Parameters**
```json
string: The section id
string: The article's id.
```
*Example*
```javascript
Lungo.Router.article("my-section", "my-article");
```
#### back()
Lungo uses the bread crumb pattern, so to return to a previous section you have to use the Lungo.Router.back function.
*Example*
``` javascript
Lungo.Router.back();
```
. aside
-------
The `` element has a different behavior to article and section since its display is combined with them. For that reason Lungo offers specific methods:
#### show()
Display an aside element
**Parameters**
```
string: id
```
*Example*
``` javascript
Lungo.Aside.show("my-aside");
```
#### hide()
Hide current aside element
*Example*
``` javascript
Lungo.Aside.hide();
```
#### toggle()
Toggle an aside element
**Parameters**
```
string: id
```
*Example*
``` javascript
Lungo.Aside.toggle("my-aside")
```
.Article
--------
Since version 2.2 (Brownie) Lungo has a new namespace to control `` element.
#### clean()
Clean the content of a particular article with a specific markup
**Parameters**
```
string: ID
string: Icon
string: Title
string: Description [OPTIONAL]
string: Button label [OPTIONAL]
```
*Example*
``` javascript
Lungo.Article.clean("my-article", "user", "Title", "Description", "Refresh")
```
.Service
--------
Lungo can also make ajax requests to web services.
#### Settings
Object containing the ajax configuration.
*Example*
``` javascript
Lungo.Service.Settings.async = true;
Lungo.Service.Settings.error = function(type, xhr){
//Do something
};
Lungo.Service.Settings.headers["Content-Type"] = "application/json";
Lungo.Service.Settings.crossDomain = false;
Lungo.Service.Settings.timeout = 10;
```
#### get()
Load data from the server using a HTTP GET request.
**Parameters**
```
string: The URL to which the request is sent.
object: A map or string to to the server.
function: [OPTIONAL] Callback function. (Asynchronous)
string: [OPTIONAL] Mime-Type: json, xml, html, or text.
```
*Example*
``` javascript
var url = "http://localhost:8080/myService";
var data = {id: 25, length: 50};
var parseResponse = function(result){
//Do something
};
Lungo.Service.get(url, data, parseResponse, "json");
//Another example
var result = Lungo.Service.get(url, "id=25&len=50", null, "json");
```
#### post()
Load data from the server using a HTTP POST request.
**Parameters**
```
string: The URL to which the request is sent.
object: A map or string to send to the server.
function: [OPTIONAL] Callback function. (Asynchronous)
string: [OPTIONAL] Mime-Type: json, xml, html, or text.
```
*Example*
``` javascript
var url = "http://localhost:8080/myService";
var data = {id: 25, length: 50};
var parseResponse = function(result){
//Do something
};
Lungo.Service.post(url, data, parseResponse, "json");
//Another example
var result = Lungo.Service.post(url, "id=25&len=50", null, "json");
```
#### json()
Load data from the server using a HTTP GET request and mime-type JSON.
**Parameters**
```
string: The URL to which the request is sent.
object: A map or string to send to the server.
function: [OPTIONAL] Callback function. (Asynchronous)
```
*Example*
``` javascript
var url = "http://localhost:8080/myService";
var data = {id: 25, length: 50};
var parseResponse = function(result){
//Do something
};
Lungo.Service.json(url, data, parseResponse);
//Another example
var result = Lungo.Service.json(url, "id=25&len=50");
```
#### cache()
Auto-caching system with date pattern for HTTP GET requests.
**Parameters**
```
string: The URL to which the request is sent.
object: A map or string to send to the server.
string: Date pattern (example: 15 minutes, 1 hour, 3 days).
function: [OPTIONAL] Callback function. (Asynchronous)
string: [OPTIONAL] Mime-Type: json, xml, html, or text.
```
*Example*
``` javascript
var url = "http://localhost:8080/myService";
var data = {id: 25, length: 50};
var parseResponse = function(result){
//Do something
};
Lungo.Service.cache(url, data, "2 hours", parseResponse, "json");
//Another example
var result = Lungo.Service.cache(
url,
"id=25&len=50",
"2 hours",
null,
"json"
);
```