istesequi

<!DOCTYPE html><html><head><title>Umbrella JS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="javascript, js, library, umbrella, html, html5, light"><meta name="description" content=" Lightweight and intuitive javascript library"><meta property="og:url" content="http://umbrellajs.com/"><meta property="og:title" content="Umbrella JS"><meta property="og:image" content="http://umbrellajs.com/web/umbrella.png?1"><meta property="og:description" content="Lightweight and intuitive javascript library to speed up your web development"><link href="web/fontello.css" rel="stylesheet"><link href="web/picnic.css" rel="stylesheet"><link href="web/style.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css"><link rel="icon" href="web/umbrella.svg" type="image/svg+xml"></head><body><nav><div class="brand"><img src="web/umbrella.svg" alt="Logo" class="logo"><a href="/">Umbrella JS</a></div><div class="menu"><a href="tests" class="pseudo button icon-ok"><span class="text">Tests</span></a><a href="https://github.com/umbrellajs/umbrella" class="pseudo button icon-g"><span class="text">Github</span></a><a href="documentation" class="button icon-doc"><span class="text">Documentation</span></a></div></nav><main class="documentation"><section class="row"><aside><h2>Contents</h2></aside><article><h1 id="umbrella-js">Umbrella JS</h1> <blockquote> <p>Note: this documentation is autogenerated from the files in src/</p> </blockquote> <p>Find nodes from the HTML with a CSS selector:</p> <pre><code class="lang-js">u('ul li') u(document.getElementById('demo')) u(document.getElementsByClassName('demo')) u([ document.getElementById('demo'), document.getElementById('test') ]) u('li', context) </code></pre> <h3 id="parameters">Parameters</h3> <p>The first parameter can be:</p> <ul> <li>A text CSS selector</li> <li>A single HTML Node. This is specially useful in events where you can just pass <code>this</code></li> <li>A NodeList or other similar objects that can be converted to an array</li> <li>An array of nodes</li> <li>Nothing</li> </ul> <p>The second parameter is only for the CSS selector, which indicates a portion of the DOM where the selector is applied. For example, with <code>u('li', u('ul').first())</code> it will find all of the <code>li</code> from the first <code>ul</code>.</p> <h3 id="return">Return</h3> <p>An instance of Umbrella JS so you can chain it to any of the other methods.</p> <h3 id="examples">Examples</h3> <p>Select all of the list elements that are children of <code>ul</code></p> <pre><code class="lang-js">var lis = u('ul > li'); // Same as u('ul').children('li'); </code></pre> <p>Find all of the headers from the page to create a Table of Contents:</p> <pre><code class="lang-js">var headers = u('h1, h2, h3, h4, h5, h6'); </code></pre> <p>It plays well with other libraries, including jquery. For example, with <a href="http://github.com/franciscop/pagex">pagex.js</a>:</p> <pre><code class="lang-js">// When we are on the page "/login" page(/^login/, function(){ function done(err, res){ if (err) return alert("There was an error"); window.location.href = "/user/" + res.id; }; // Find the form and handle it through ajax when it's submitted u("form.login").ajax(done); }); </code></pre> <h3 id="native-methods">Native methods</h3> <blockquote> <p>This section is inspired by <a href="http://blissfuljs.com/docs.html#vanilla">Bliss.js' vanilla methods</a></p> </blockquote> <p>There are many native methods and properties that you can use. These can be called straight in the <code>.first()</code> or <code>.last()</code> elements, a <code>.nodes</code> element or you can loop every element to call them. For example:</p> <pre><code class="lang-js">// Single element from .nodes u('h1').nodes[0].classList.add('vanilla'); // Single element u('h1').first().classList.add('vanilla', 'test'); // Multiple elements u('h2').each(function(el){ el.classList.add('vanilla', 'test'); }); </code></pre> <p>And for the arrays it's similar, you can call any array method on <code>u().nodes</code> since this is literally an array:</p> <pre><code class="lang-js">u('h2').nodes.forEach(); var mapped = u('h2').nodes.map(); var filtered = u('h2').nodes.filter(); var good = u('h2').nodes.some(); </code></pre> <p>However, there are also some advantages of using Umbrella's methods instead of native methods. For example, with <code>.addClass()</code> vs native <code>classList.add()</code>:</p> <ul> <li><strong>error prevention</strong>: if nodes.length = 0, the single-element way will fail in the above implementation (since first() and nodes[0] are null)</li> <li><strong>cross-browser</strong>: the classList.add() with multiple elements <a href="http://caniuse.com/#search=classList">is not compatible with IE10-11 & Android 4.3-</a></li> <li><strong>more flexibility</strong>: there are many ways to specify multiple classes with addClass, and only one way to specify them on the native way. Imagine that you have an array of classes, with the native method this becomes a nightmare. This is what it means to be flexible:</li> </ul> <pre><code class="lang-js">u('h2').addClass('vanilla', 'test'); // It accepts multiple parameters u('h2').addClass(['vanilla', 'test']); // Also accept an array u('h2').addClass(['vanilla'], ['test']); // Or multiple arrays u('h2').addClass('vanilla, test'); // Strings with space and/or comma u('h2').addClass('vanilla', ['test'], 'one, more' }); // Or just whatever </code></pre> <p>So it's convenient that you know these limitations and act accordingly. Try to use native methods where it makes sense, then Umbrella's methods where it's better suited or then crete your own methods when you need it.</p> <h3 id="-length">.length</h3> <p>You can check how many elements are matched with <code>.length</code>:</p> <pre><code class="lang-js">// Check how many <a> are in the page alert(u('a').length); </code></pre> <h2 id="-addclass-">.addClass()</h2> <p>Add html class(es) to all of the matched elements.</p> <pre><code class="lang-js">.addClass('name1'); .addClass('name1 name2 nameN'); .addClass('name1,name2,nameN'); .addClass('name1', 'name2', 'nameN'); .addClass(['name1', 'name2', 'nameN']); .addClass(['name1', 'name2'], ['name3'], ['nameN']); .addClass(function(){ return 'name1'; }); .addClass(function(){ return 'name1'; }, function(){ return 'name2'; }); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>name1</code>, <code>name2</code>, <code>nameN</code>: the class name (or variable containing it) to be added to all of the matched elements. It accepts many different types of parameters (see above).</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Add the class <code>main</code> to all the <code><h2></code> from the page:</p> <pre><code class="lang-js">u("h2").addClass("main"); </code></pre> <p>Add the class <code>toValidate</code> and <code>ajaxify</code> to all the <code><form></code> present in the page:</p> <pre><code class="lang-js">u("form").addClass("toValidate", "ajaxify"); </code></pre> <h3 id="related">Related</h3> <p><a href="#removeclass">.removeClass(name)</a> deletes class(es) from the matched elements.</p> <p><a href="#hasclass">.hasClass(name)</a> finds if the matched elements contain the class(es)</p> <h2 id="-after-">.after()</h2> <p>Add some html as a sibling after each of the matched elements.</p> <pre><code class="lang-js">.after(html); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>html</code>: a string containing the html that is going to be inserted.</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Add a separator <code><hr></code> after each of the main titles h1:</p> <pre><code class="lang-js">u("h1").after("<hr>"); </code></pre> <h3 id="related">Related</h3> <p><a href="#before">.before(html)</a></p> <p><a href="#append">.append(html)</a></p> <p><a href="#prepend">.prepend(html)</a></p> <h2 id="-ajax-">.ajax()</h2> <p>Make all of the matched forms to be submitted by ajax with the same action, method and values when the user submits the form.</p> <blockquote> <p>Note: this method does NOT submit the form, it just handles it when it's submitted (from the user or with .trigger())</p> <p>Note2: the .serialize() method used internally is slightly buggy; select can only have a single selection and few other bugs as described here: <a href="http://stackoverflow.com/a/11661219">form serialize javascript</a></p> </blockquote> <pre><code class="lang-js">.ajax(done, before); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>done</code> [optional]: A function to be called when the request ends. The first argument is the error, if any. The second is the body, which is parsed to JSON if it's a JSON string or just the body as a string if it's not JSON. The third is the request object itself.</p> <pre><code class="lang-js">var done = function(err, body, xhr){}; </code></pre> <p><code>before</code> [optional]: A function to be called before the request is sent. Useful to manipulate some data in real-time.</p> <pre><code class="lang-js">var before = function(xhr){}; </code></pre> <h3 id="return">Return</h3> <p><strong>Undefined</strong>. Please don't use the returned value for anything (it might be a promise in the future).</p> <h3 id="examples">Examples</h3> <p>Handle the newsletter through ajax</p> <pre><code class="lang-js">u('.newsletter').ajax(function(err){ if (err) return alert("Error"); alert("Thank you for subscribing, awesome!"); }); </code></pre> <p>Actually send a form through ajax:</p> <pre><code class="lang-js">u('form.edit').ajax(function(){ console.log('Sent!'); }); u('form.edit').trigger('submit'); </code></pre> <h3 id="why-not-jquery-">Why not jquery?</h3> <p>This was created because this pattern is quite common in jquery:</p> <pre><code class="lang-js">$('form').on('submit', function(e){ e.preventDefault(); $.post($(this).attr('action'), $(this).serialize(), function(data){ alert("Done! Thanks, " + data.name); }, 'json'); }); </code></pre> <p>After repeating that many times, I found out that it's better if we just make that the default. The same code on Umbrella JS:</p> <pre><code class="lang-js">u('form').ajax(function(err, data){ if (!err) alert('Done! Thanks, ' + data.name); }); </code></pre> <p>Of course you have freedom and you can use a similar method to jquery, but I think it's a bit pointless for this specific situation:</p> <pre><code class="lang-js">u('form').on('submit', function(e){ e.preventDefault(); ajax(u(this).attr('method'), u(this).attr('action'), u(this).serialize(), function(err, data){ if (!err) alert("Done! Thanks, " + data.name); }); }); </code></pre> <p>This is the footprint of the raw function:</p> <pre><code class="lang-js">ajax(method, url, data, done, before); </code></pre> <h2 id="-append-">.append()</h2> <p>Add some html as a child at the end of each of the matched elements.</p> <pre><code class="lang-js">.append(html); .append() </code></pre> <h3 id="parameters">Parameters</h3> <p><code>html</code>: a string containing the html that is going to be inserted or a function that returns the <code>data</code>, defaults <code>[""]</code>: an array of elements which will passed to the callback. The callback is executed once per element, and all of them are appended consecutively</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Add a footer to each of the articles</p> <pre><code class="lang-js">u("article").append("<footer>Hello world</footer>"); </code></pre> <p>Add three elements to the list. All of these methods are equivalent:</p> <pre><code class="lang-js">// Add them all like a single string u("ul").append("<li>One</li><li>Two</li><li>Three</li>"); // Add them in a chain u("ul").append("<li>One</li>").append("<li>Two</li>").append("<li>Three</li>"); // Add them with a function parameter var cb = function(txt){ return "<li>" + txt + "</li>" }; u("ul").append(cb, ["One", "Two", "Three"]); // Same as the previous one but with ES6 u("ul").append(txt => `<li>${ txt }</li>`, ["One", "Two", "Three"]); </code></pre> <h3 id="related">Related</h3> <p><a href="#prepend">.prepend(html)</a></p> <p><a href="#before">.before(html)</a></p> <p><a href="#after">.after(html)</a></p> <h2 id="-attr-">.attr()</h2> <p>Handle attributes for the matched elements</p> <pre><code class="lang-js">// GET .attr('name'); // SET .attr('name', 'value'); .attr({ name1: 'value', name2: 'value2' }); </code></pre> <h3 id="parameters">Parameters</h3> <p><em>GET</em> <code>name</code>: the attribute that we want to get from the first matched element</p> <p><em>SET</em> <code>name</code>: the attribute that we want to set for all of the matched elements <code>value</code>: what we want to set the attribute to. If it's not defined, then we get the name</p> <h3 id="return">Return</h3> <p><em>GET</em> <code>string</code>: the value of the attribute</p> <p><em>SET</em> <code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="important">Important</h3> <p>You must understand that <code>.attr()</code> will only retrieve the attributes, not the properties like <code>checked</code>. To understad it better, check <a href="http://api.jquery.com/prop/">jquery's attr() vs prop()</a>.</p> <p>Each property is different so you should consult each case. For example, if you wanted to get the property <code>checked</code> you could do:</p> <pre><code class="lang-js">u('.terms-os-service').is(':checked'); </code></pre> <h3 id="examples">Examples</h3> <p>Get the alt of an image:</p> <pre><code class="lang-js">u('img.hero').attr('alt'); </code></pre> <p>Set the src of all of the images:</p> <pre><code class="lang-js">u('img').attr({ src: 'demo.jpg' }); </code></pre> <h3 id="related">Related</h3> <p><a href="#data">.data()</a> handle data-* attributes for the matched elements</p> <h2 id="-before-">.before()</h2> <p>Add some html before of each of the matched elements.</p> <pre><code class="lang-js">.before(html); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>html</code>: a string containing the html that is going to be inserted.</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Add a header to each of the articles</p> <pre><code class="lang-js">u("article").after("<header>Hello world</header>"); </code></pre> <h3 id="related">Related</h3> <p><a href="#after">.after(html)</a></p> <p><a href="#append">.append(html)</a></p> <p><a href="#prepend">.prepend(html)</a></p> <h2 id="-children-">.children()</h2> <p>Get the direct children of all of the nodes with an optional filter</p> <pre><code class="lang-js">.children(filter); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>filter</code>: a string containing a selector that nodes must pass or a function that return a boolean. See <a href="#filter">.filter()</a> for a better explanation</p> <h3 id="return">Return</h3> <p><code>u</code>: returns an instance of Umbrella JS with the new children as nodes</p> <h3 id="examples">Examples</h3> <p>Get the first <code><li></code> of every <code><ul></code></p> <pre><code class="lang-js">u("ul").children('li:first-child'); </code></pre> <h3 id="related">Related</h3> <p><a href="#parent">.parent(filter)</a> get all of the direct parents</p> <p><a href="#find">.find(filter)</a> get all of the descendants of the matched nodes</p> <p><a href="#closest">.closest(filter)</a> get the first ascendant that matches the selector</p> <h2 id="-closest-">.closest()</h2> <p>Find the first matched node for each node</p> <pre><code class="lang-js">.closest(filter); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>filter</code>: a string containing a selector that nodes must pass or a function that return a boolean. See <a href="#filter">.filter()</a> for a better explanation</p> <h3 id="return">Return</h3> <p><code>u</code>: returns an instance of Umbrella JS with the new ancestors as nodes</p> <h3 id="examples">Examples</h3> <p>Get the ul of every li</p> <pre><code class="lang-js">u("li").closest('ul'); </code></pre> <h3 id="related">Related</h3> <p><a href="#find">.find(filter)</a> get all of the descendants of the matched nodes</p> <p><a href="#parent">.parent(filter)</a> get all of the direct parents</p> <p><a href="#children">.children(filter)</a> get the direct children of all of the nodes with an optional filter</p> <h2 id="-data-">.data()</h2> <p>Handle data-* attributes for the matched elements</p> <pre><code class="lang-js">// GET .data('name'); // SET .data('name', 'value'); .data({ name1: 'value', name2: 'value2' }); </code></pre> <h3 id="parameters">Parameters</h3> <p><em>GET</em> <code>name</code>: the data-* attribute that we want to get from the first matched element</p> <p><em>SET</em> <code>name</code>: the data-* attribute that we want to set for all of the matched elements <code>value</code>: what we want to set the attribute to. If it's not defined, then we get the name</p> <h3 id="return">Return</h3> <p><em>GET</em> <code>string</code>: the value of the data-* attribute</p> <p><em>SET</em> <code>u</code>: data-* returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Get the value for data-id:</p> <pre><code class="lang-html"><ul> <li data-id='0'>First</li> <li data-id='1'>Second</li> <li data-id='2'>Third</li> </ul> </code></pre> <pre><code class="lang-js">u('ul li').first().data('id'); // 0 </code></pre> <p>Set the data-id of an element:</p> <pre><code class="lang-js">u('ul li').first().data({ id: '1' }); // <li data-id='1'>First</li> u('ul li').first().data('id', '2'); // <li data-id='2'>First</li> </code></pre> <h3 id="related">Related</h3> <p><a href="#attr">.attr()</a> handle attributes for the matched elements</p> <h2 id="-each-">.each()</h2> <p>Loop through all of the nodes and execute a callback for each</p> <pre><code class="lang-js">.each(callback); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>callback</code>: the function that will be called. It accepts two parameters, the node and the index, and the context for <code>this</code> is Umbrella's instance so other methods like <code>this.args()</code> and <code>this.slice()</code> are available.</p> <pre><code class="lang-js">.each(function(node, i){ // work }); </code></pre> <h3 id="return">Return</h3> <p><code>u</code>: returns an instance of Umbrella JS with the same nodes</p> <h3 id="examples">Examples</h3> <p>Loop through all of the links and add them a <code>target="_blank"</code>:</p> <pre><code class="lang-js">u('a').each(function(node, i){ if (!/^\//.test(node.attr('href'))){ u(node).attr({ target: '_blank' }); } }); </code></pre> <h2 id="-filter-">.filter()</h2> <p>Remove unwanted nodes</p> <pre><code class="lang-js">.filter('a') .filter(u('a')) .filter(function(node, index){ u(node).is('a'); }) </code></pre> <h3 id="parameters">Parameters</h3> <p><code>filter</code>: it can be:</p> <ul> <li>css selector that each of the nodes must match to stay</li> <li>instance of umbrella with the element to keep</li> <li>function that returns a boolean with true to keep the element. It accepts two parameters, <code>node</code> and <code>index</code>, and the context of <code>this</code> is the instance of umbrella so methods like <code>this.slice()</code> are available:</li> </ul> <pre><code class="lang-js">.filter(function(node, index){ // your code }); </code></pre> <h3 id="examples">Examples</h3> <p>Get only the active links</p> <pre><code class="lang-js">var links = u('a').filter('.active'); </code></pre> <p>Get all of the paragraphs with a link:</p> <pre><code class="lang-js">var paragraphs = u('p').filter(function(node){ return u(node).find('a').nodes.length > 0; }); </code></pre> <p>Filter the inputs to those with an answer above 5 and show an error:</p> <pre><code class="lang-js">u('input').filter(function(node, i){ if (parseInt(u(node).html()) > 5) { return true; } }).addClass('error'); </code></pre> <h3 id="related">Related</h3> <p><a href="#is">.is(filter)</a> check whether one or more of the nodes is of one type</p> <h2 id="-find-">.find()</h2> <p>Get all of the descendants of the nodes with an optional filter</p> <pre><code class="lang-js">.find(filter); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>filter</code>: a string containing a selector that nodes must pass or a function that return a boolean. See <a href="#filter">.filter()</a> for a better explanation</p> <h3 id="return">Return</h3> <p><code>u</code>: returns an instance of Umbrella JS with the new children as nodes</p> <h3 id="examples">Examples</h3> <p>Get all of the links within a paragraph</p> <pre><code class="lang-js">u("p").find('a'); </code></pre> <p>Get the required fields within a submitting form:</p> <pre><code class="lang-js">u('form').on('submit', function(e){ var required = u(this).find('[required]'); }); </code></pre> <h3 id="related">Related</h3> <ul> <li><p><a href="#closest">.closest(filter)</a> get the first ascendant that matches the selector</p> </li> <li><p><a href="#parent">.parent(filter)</a> get all of the direct parents</p> </li> <li><p><a href="#find">.children(filter)</a> get the direct child of the matched nodes</p> </li> </ul> <h2 id="-first-">.first()</h2> <p>Add html class(es) to all of the matched elements.</p> <pre><code class="lang-js">.first(); </code></pre> <h3 id="parameters">Parameters</h3> <p>This method doesn't accept any parameters</p> <h3 id="return">Return</h3> <p>The first html node or false if there is none.</p> <h3 id="examples">Examples</h3> <p>Retrieve the first element of a list:</p> <pre><code class="lang-js">var next = u("ul.demo li").first(); </code></pre> <h3 id="related">Related</h3> <p><a href="#removeclass">.removeClass(name)</a> deletes class(es) from the matched elements.</p> <p><a href="#hasclass">.hasClass(name)</a> finds if the matched elements contain the class(es)</p> <h2 id="-hasclass-">.hasClass()</h2> <p>Find if any of the matched elements contains the class passed:</p> <pre><code class="lang-js">.hasClass(name1, name2) </code></pre> <pre><code class="lang-js">u("a").hasClass("button") </code></pre> <p>You can also check <strong>multiple classes</strong> with the <strong>AND condition</strong>:</p> <pre><code class="lang-js">u("a").hasClass("button primary") </code></pre> <p>This would be similar to:</p> <pre><code class="lang-js">u("a").hasClass("button") && u("a").hasClass("primary"); </code></pre> <h3 id="parameters">Parameters</h3> <p><strong><code>name</code></strong>: a string that represents the class(es) to be matched. To pass several classes they must be separated by an space.</p> <h3 id="return">Return</h3> <p><strong><code>boolean</code></strong>: returns true if all of the passed classes are found in any of the matched elements and false if they couldn't be found.</p> <h3 id="related">Related</h3> <p><a href="#addclass">.addClass(name)</a> adds html class(es) to each of the matched elements.</p> <p><a href="#removeclass">.removeClass(name)</a> deletes class(es) from the matched elements.</p> <h3 id="example">Example</h3> <p>Toggle the color of a button depending on the status</p> <pre><code class="lang-html"> <a class="example button">Click me</a> <script src="//umbrellajs.com/umbrella.min.js"></script> <script> u(".example").on('click', function() { if(u(this).hasClass("error")) { u(this).removeClass("error").html("Click me"); } else { u(this).addClass("error").html("Confirm"); } }); </script> </code></pre> <h2 id="-html-">.html()</h2> <p>Retrieve or set the html of the elements:</p> <pre><code class="lang-js">// GET .html(); // SET .html(html); </code></pre> <h3 id="parameters">Parameters</h3> <p><em>GET</em> should pass no parameter so it retrieves the html.</p> <p><em>SET</em> <code>html</code>: the new value that you want to set</p> <h3 id="return">Return</h3> <p><em>GET</em> <code>string</code>: the html of the first node</p> <p><em>SET</em> <code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Get the main title:</p> <pre><code class="lang-js">var title = u('h1').html(); </code></pre> <p>Set the main title:</p> <pre><code class="lang-js">u('h1').html('Hello world'); </code></pre> <h3 id="related">Related</h3> <p><a href="#attr">.attr(html)</a></p> <h2 id="-is-">.is()</h2> <p>Check whether any of the nodes matches the selector</p> <pre><code class="lang-js">.is('a') .is(u('a')) .is(function(){ return Math.random() > 0.5 }) </code></pre> <h3 id="parameters">Parameters</h3> <p><code>filter</code>: it can be two things:</p> <ul> <li>css selector to check</li> <li>instance of umbrella with the elements to check</li> <li>function that returns a boolean to check for each of the nodes. If one of them returns true, then the method <code>is()</code> returns true. It accepts two parameters, <code>node</code> and <code>index</code>, and the context of <code>this</code> is the instance of umbrella so methods like <code>this.slice()</code> are available:</li> </ul> <pre><code class="lang-js">.is(function(node, index){ // your code }); </code></pre> <h3 id="return">Return</h3> <p><em>boolean</em>: <em>true</em> if any of the nodes matches the selector or the function returns true, false otherwise.</p> <h3 id="examples">Examples</h3> <p>Check if the current form needs to be valdated</p> <pre><code class="lang-js">u('form.subscribe').ajax(false, function() { // Same as u('form.subscribe').hasClass('validate') if (u('form.subscribe').is('.validate')) { validate(); } }); </code></pre> <h3 id="related">Related</h3> <p><a href="#filter">.filter()</a> remove unwanted nodes</p> <h2 id="-not-">.not()</h2> <p>Remove known nodes from nodes</p> <pre><code class="lang-js">.not('a') .not(u('a')) .not(function(node){ return Math.random() > 0.5; }) </code></pre> <h3 id="parameters">Parameters</h3> <p><code>not</code>: it can be two things (in order):</p> <ul> <li>css selector that each of the nodes must <strong>not</strong> match to stay</li> <li>instance of umbrella with the element to remove</li> <li>function that returns <code>true</code> to remove the element. It accepts <strong>one parameter</strong>, and the context of <code>this</code> is the instance of umbrella so methods like <code>this.slice()</code> are available</li> </ul> <pre><code class="lang-js">.not(function(node){ // your code }); </code></pre> <h3 id="examples">Examples</h3> <pre><code class="lang-html"><ul class="menu"> <li><a class="active">Menu item 1</a></li> <li><a>Menu item 2</a></li> <li><a>Menu item 3</a></li> </ul> </code></pre> <p>Get only the non-active links on paragraphs</p> <pre><code class="lang-js">var nonactive_links = u('.menu a').not('.active'); </code></pre> <p>Get all of the active:</p> <pre><code class="lang-js">active_links = u('.menu a').not(nonactive_links); </code></pre> <h3 id="related">Related</h3> <ul> <li><p><a href="#is">.is(filter)</a> check whether one or more of the nodes is of one type</p> </li> <li><p><a href="#filter">.filter(filter)</a> Remove unwanted nodes</p> </li> </ul> <h2 id="-on-">.on()</h2> <p>Calls a function when an event is triggered</p> <pre><code class="lang-js">.on('event1', callback) .on('event1 event2 eventN', callback) .on('event1,event2,eventN', callback) .on(['event1', 'event2', 'eventN'], callback) </code></pre> <h3 id="parameters">Parameters</h3> <p><code>event1</code>, <code>event2</code>, <code>eventN</code>: the name(s) of the events to listen for actions, such as <code>click</code>, <code>submit</code>, <code>change</code>, etc. <code>callback</code>: function that will be called when the event is triggered. It accepts a single parameter, the event itself.</p> <h3 id="return">Return</h3> <p>Umbrella instance</p> <h3 id="examples">Examples</h3> <p>An auto-save feature that submits the form through ajax every 10 seconds</p> <pre><code class="lang-js">// Show 'test' when the button test is clicked u('button.test').on('click', function(e) { alert("Test"); }); // This example is very similar to .ajax() implementation u('form.test').on('submit', function(e){ // Avoid submitting the form normally e.preventDefault(); // Submit the form through ajax ajax(u(this).attr('action'), u(this).serialize()); }); // Better 'onchange': u('input').on('change click blur paste', function(){ console.log("Maybe changed"); }); </code></pre> <h3 id="related">Related</h3> <p><a href="#trigger">.trigger()</a> calls an event on all of the matched nodes</p> <h2 id="-prepend-">.prepend()</h2> <p>This method is similar to <code>append</code>. However note that, unlike append, the elements are inserted in <em>inverse</em> order. So all of these methods are equivalent:</p> <pre><code class="lang-js">// Add them all like a single string u("ul").prepend("<li>One</li><li>Two</li><li>Three</li>"); // Add them in a chain u("ul").prepend("<li>Three</li>").append("<li>Two</li>").append("<li>One</li>"); // Add them with a function parameter var cb = function(txt){ return "<li>" + txt + "</li>" }; u("ul").prepend(cb, ["Three", "Two", "One"]); // Same as the previous one but with ES6 u("ul").prepend(txt => `<li>${ txt }</li>`, ["Three", "Two", "One"]); </code></pre> <p>And they will yield:</p> <pre><code class="lang-html"><ul> <li>One</li> <li>Two</li> <li>Three</li>  </ul> </code></pre> <p>You can <em>fix</em> this in the method that accepts <code>data</code> with a simple <code>.reverse()</code>. This will yield the same html:</p> <pre><code class="lang-js">u("ul").prepend(cb, ["One", "Two", "Three"].reverse()); </code></pre> <p>However, as it should be obvious, it cannot be reversed in the chainable method.</p> <h2 id="-remove-">.remove()</h2> <p>Removes the matched elements.</p> <pre><code class="lang-js">.remove(); </code></pre> <h3 id="parameters">Parameters</h3> <p>This method doesn't accept any parameters</p> <h3 id="return">Return</h3> <p><code>u</code>: Returns an instance of Umbrella JS with the removed nodes.</p> <h3 id="examples">Examples</h3> <p>Remove all the elements of a list:</p> <pre><code class="lang-js">u("ul.demo li").remove(); </code></pre> <h2 id="-removeclass-">.removeClass()</h2> <p>Remove html class(es) to all of the matched elements.</p> <pre><code class="lang-js">.removeClass('name1'); .removeClass('name1 name2 nameN'); .removeClass('name1,name2,nameN'); .removeClass('name1', 'name2', 'nameN'); .removeClass(['name1', 'name2', 'nameN']); .removeClass(['name1', 'name2'], ['name3'], ['nameN']); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>name1</code>, <code>name2</code>, <code>nameN</code>: the class name (or variable containing it) to be removed to all of the matched elements. It accepts many different types of parameters (see above).</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Remove the class <code>main</code> to all the <code><h2></code> from the page:</p> <pre><code class="lang-js">u("h2").removeClass("main"); </code></pre> <p>Remove the class <code>toValidate</code> and <code>ajaxify</code> to all the <code><form></code> present in the page:</p> <pre><code class="lang-js">u("form").removeClass("toValidate", "ajaxify"); </code></pre> <h3 id="related">Related</h3> <p><a href="#addclass">.addClass(name)</a> adds class(es) from the matched elements.</p> <p><a href="#hasclass">.hasClass(name)</a> finds if the matched elements contain the class(es)</p> <h2 id="-siblings-">.siblings()</h2> <p>Get the siblings of all of the nodes with an optional filter</p> <pre><code class="lang-js">.siblings(selector); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>selector</code>: a string containing a selector that nodes must pass or a function that return a boolean. See <a href="#selector">.filter()</a> for a better explanation</p> <h3 id="return">Return</h3> <p><code>u</code>: returns an instance of Umbrella JS with the new siblings as nodes</p> <h3 id="examples">Examples</h3> <p>Get the all the siblings of the hovered <code><li></code></p> <pre><code class="lang-js">u("li:hover").siblings('li:first-child'); </code></pre> <p>Get all the siblings</p> <pre><code class="lang-js">u("li").siblings(); </code></pre> <h3 id="related">Related</h3> <ul> <li><p><a href="#parent">.parent(filter)</a> get all of the direct parents</p> </li> <li><p><a href="#find">.find(filter)</a> get all of the descendants of the matched nodes</p> </li> <li><p><a href="#closest">.closest(filter)</a> get the first ascendant that matches the selector</p> </li> <li><p><a href="#closest">.children(filter)</a> get the direct children of all of the nodes with an optional filter</p> </li> </ul> <h2 id="-toggleclass-">.toggleClass()</h2> <p>Toggles html class(es) to all of the matched elements.</p> <pre><code class="lang-js">.toggleClass('name1'); .toggleClass('name1 name2 nameN'); .toggleClass('name1,name2,nameN'); .toggleClass(['name1', 'name2', 'nameN']); .toggleClass('name1', forceAdd); </code></pre> <h3 id="parameters">Parameters</h3> <p><code>name1</code>, <code>name2</code>, <code>nameN</code>: the class name (or variable containing it) to be toggled to all of the matched elements. It accepts many different types of parameters (see above).</p> <p><code>forceAdd</code>: boolean telling the method whether to force an <code>.addClass()</code> (true) or <code>.removeClass()</code> (false).</p> <h3 id="return">Return</h3> <p><code>u</code>: returns the same instance of Umbrella JS</p> <h3 id="examples">Examples</h3> <p>Add the class <code>main</code> to all the <code><h2></code> from the page:</p> <pre><code class="lang-js">u("h2").toggleClass("main"); </code></pre> <p>Add the class <code>toValidate</code> and remove <code>ajaxify</code> from the element <code><form class="ajaxify"></code> present in the page:</p> <pre><code class="lang-js">u("form.ajaxify").toggleClass("toValidate ajaxify"); </code></pre> <p>Force an <code>.addClass()</code> on the element <code><h2></code> from the page:</p> <pre><code class="lang-js">u("h2").toggleClass("main", true); </code></pre> <p>Note however that this last example by itself doesn't make much sense as you could just use <code>addClass()</code> instead. It makes a lot more sense when the second parameter is checked dynamically:</p> <pre><code class="lang-js">u("h2").toggleClass("main", u('.accept').is(':checked')); </code></pre> <h3 id="related">Related</h3> <p><a href="#addclass">.addClass(name)</a> adds class(es) from the matched elements.</p> <p><a href="#removeclass">.removeClass(name)</a> deletes class(es) from the matched elements.</p> <p><a href="#hasclass">.hasClass(name)</a> finds if the matched elements contain the class(es)</p> <h2 id="-trigger-">.trigger()</h2> <p>Calls an event on all of the matched nodes</p> <pre><code class="lang-js">.trigger('submit') .trigger(new Event('submit', {})); </code></pre> <h3 id="parameters">Parameters</h3> <p>The only parameter that it accepts is either an event name such as <code>click</code>, <code>submit</code>, <code>change</code>, etc or an event itself.</p> <h3 id="return">Return</h3> <p>Umbrella instance</p> <h3 id="examples">Examples</h3> <p>An auto-save feature that submits the form through ajax every 10 seconds</p> <pre><code class="lang-js">// Make the form to submit through ajax u('form.edit').ajax(); // Submit it every 10s setInterval(function(){ u('form.edit').trigger('submit'); }, 10000); </code></pre> <h3 id="related">Related</h3> <p><a href="#on">.on()</a> add an event listener to thematched nodes</p> </article></section></main><script src="umbrella.min.js"></script><script>u('h2[id]').each(function(node){ u(node).attr('id', u(node).attr('id').replace(/-/g, '')); }); u('article h2').each(function(node){ var href = 'href="#' + u(node).attr('id') + '" '; var classes = 'class="pseudo button stack" '; var html = u(node).html(); u('aside').append('<a ' + classes + href + '>' + html + '</a>'); }); u('aside a').on('click', function(e){ try { var to = u(e.currentTarget).attr('href'); u(to).first().scrollIntoView({behavior: "smooth"}); e.preventDefault(); history.replaceState(null, '', to); } catch(err) {} });</script><script>/* http://prismjs.com/download.html?themes=prism&languages=markup+clike+javascript */ var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==n)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(n.call(e,l,e[l],a||l),"Object"!==t.util.type(e[l])||r[e[l]]?"Array"!==t.util.type(e[l])||r[e[l]]||(r[e[l]]=!0,t.languages.DFS(e[l],n,l,r)):(r[e[l]]=!0,t.languages.DFS(e[l],n,null,r)))}},plugins:{},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),l=0;a=r[l++];)t.highlightElement(a,e===!0,n)},highlightElement:function(n,a,r){for(var l,i,o=n;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=t.languages[l]),n.className=n.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=n.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=n.textContent,u={element:n,language:l,grammar:i,code:s};if(!s||!i)return t.hooks.run("complete",u),void 0;if(t.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(t.filename);g.onmessage=function(e){u.highlightedCode=e.data,t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(n),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},highlight:function(e,a,r){var l=t.tokenize(e,a);return n.stringify(t.util.encode(l),r)},tokenize:function(e,n){var a=t.Token,r=[e],l=n.rest;if(l){for(var i in l)n[i]=l[i];delete n.rest}e:for(var i in n)if(n.hasOwnProperty(i)&&n[i]){var o=n[i];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];b&&P.push(b);var A=new a(i,g?t.tokenize(m,g):m,h);P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var l={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}t.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\$?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\$/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; </script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-72195046-1', 'auto'); ga('send', 'pageview');</script></body></html>