[DOC] Element.*

docs/EN/element/carousel.md

@@ -0,0 +1,72 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 3.4.5 Lungo.Element.Carousel
+Lungo has a carousel element where content can be published 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**
+
+```
+<section id="carousel" data-transition="slide">
+    <header>
+        <div class="centered title">Photo: <span>1</span></div>
+    </header>
+    <article id="art" class="active block" data-control="carousel">
+        <div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/food/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/sports/">
+            </div>
+        </div>
+    </article>
+</section>
+
+// JavaScript Code
+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);
+});
+```
+
+### 3.4.5.1 .prev()
+Show the previous slide.
+
+**EXAMPLE**
+
+```
+var example = Lungo.Element.Carousel(Lungo.Dom('[data-control=carousel]').first());
+Lungo.dom('[data-direction=left]').tap(example.prev);
+```
+
+
+### 3.4.5.2 .next()
+Show the next slide.
+
+**EXAMPLE**
+
+```
+var example = Lungo.Element.Carousel(Lungo.Dom('[data-control=carousel]').first());
+Lungo.dom('[data-direction=left]').tap(example.next);
+```
+
+
+### 3.4.5.3 .position()
+Returns the actual index.
+
+**EXAMPLE**
+
+```
+var example = Lungo.Element.Carousel(Lungo.Dom('[data-control=carousel]').first());
+example.next();
+alert(example.position());
+```

docs/EN/element/count.md

@@ -0,0 +1,41 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 3.4.1 Lungo.Element.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.
+
+
+### 3.4.1.1 JavaScript method
+Set a counter to the element:
+
+**PARAMETERS**
+
+```
+string:		Element query selector.
+number:		Value of the counter.
+```
+
+**EXAMPLE**
+
+```
+Lungo.Element.count("#messages", 5);
+```
+
+
+### 3.4.1.2 HTML
+You can define via HTML a default value for a count element.
+
+**EXAMPLE**
+
+```
+<section>
+	…
+	<footer>
+		<nav>
+			<a href="#" data-icon="user" data-count="12"></a>
+			<a href="#" data-icon="globe"></a>
+			<a href="#" data-icon="cog"></a>
+		</nav>
+	</footer>
+</section>
+```

docs/EN/element/loading.md

@@ -0,0 +1,26 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 3.4.3 Lungo.Element.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**
+
+```
+<section id="main" data-transition="">
+    <header data-title="loading"></header>
+    <article id="main-article"></article>
+</section>
+
+// JavaScript Code
+Lungo.Element.loading("#main-article", 1);
+```
+

docs/EN/element/progress.md

@@ -0,0 +1,32 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 3.4.2 Lungo.Element.Count
+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**
+
+```
+<section id="main" data-transition="">
+    <article id="main-article" class="active list indented scroll">
+        <form>
+            <div class="progress">
+                <span class="bar">
+                    <span class="value"></span>
+                </span>
+            </div>
+        </form>
+    </article>
+</section>
+
+Lungo.Element.progress("#progress-normal", 65, true);
+```
+

docs/EN/element/pull_and_refresh.md

@@ -0,0 +1,41 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 3.4.4 Lungo.Element.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. Here you will see how to write the javascript code.
+
+**PARAMETERS**
+
+```
+string:		Element query selector.
+object:		Object with the configuration.
+```
+
+**EXAMPLE**
+
+```
+<section id="main" data-pull="normal">
+    <header data-title="Pull & Refresh"></header>
+    <article id="main-article">
+        <ul>
+             <li class="dark" data-icon="help">
+                    <strong>
+                    Test this featury only drag down.
+                </strong>
+                <small>This element has an associated event</small>
+            </li>
+        </ul>
+    </article>
+</section>
+
+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();
+    }
+});
+```
+

docs/readme.md

@@ -24,28 +24,28 @@ Now you can learn how to prototype a Lungo App without any line of JavaScript:
 * [Getting started](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/prototype/get_started.md)
 * [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](http://)
-	* [No-Native](http://)
-	* [Buttons](http://)
-* [Lists](http://)
-* [Data-Attributes](http://)
+* Forms
+	* No-Native
+	* Buttons
+* Lists
+* Data-Attributes
 
 
 ## 3. JavaScript API
 
-* [Core](http://)
-* [Data](http://)
-	* [Cache](http://) 	
-	* [Storage](http://) 	
-	* [SQL](http://) 
-* [DOM](http://)
-* [Element](http://)
-	* [Count](http://) 	
-	* [Progress](http://) 	
-	* [Loading](http://) 
-	* [Pull & Refresh](http://) 	
-	* [Carousel](http://) 	
-	* [Menu](http://) 
+* [Core](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/core.md)
+* Data
+	* [Cache](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/data/cache.md)
+	* Storage	
+	* [SQL](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/data/cache.md) 
+* [DOM](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/dom.md)
+* Element
+	* [Count](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/element/count.md)
+	* [Progress](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/element/progress.md) 
+	* [Loading](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/element/loading.md) 
+	* [Pull & Refresh](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/element/pull_and_refresh.md)
+	* [Carousel](https://github.com/tapquo/Lungo.js/blob/master/docs/EN/element/count.md)
+	* Menu
 * [Notification](http://)
 * [Router](http://)
 * [Service](http://)