It's been a little while since I've played with jQuery UI. I kinda got infatuated with jQuery Mobile and forgot everything else. But it's my love of jQuery Mobile that drove me to try a little experiment. If you've read any of the docs on jQuery Mobile or seen my presentation, you know that it is entirely HTML driven. (That isn't entirely accurate - you do need to write JavaScript for most production apps, but for prototypes, quick tests, etc, you can do a heck of a lot with just HTML.) So for example, this will generate a mobile friendly list:
<div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>
When jQuery Mobile loads, it looks at the data-* attributes and does magic voodoo to turn them into mobile friendly components. I love this and it's the main reason I think jQuery Mobile is going to be the primary way folks do HTML-based mobile applications. That being said - I wondered if the same approach would work with jQuery UI. jQuery UI does require a bit of JavaScript, but certainly not much. Consider the following simple tab example.
<script> $(function() { $( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> </div> </div>
So for jQuery UI, the typical component is created via existing HTML that gets "turned on" by a JavaScript statement. Not difficult at all - but what if you could do it entirely via HTML?
<div data-role="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> </div> </div>
Notice the new data attribute up there? I wrote a new JavaScript file called jqua.js (jQuery UI Automatic) that simply looks for this on document load. Here is a snippet from the file to give you an idea of what I mean:
tabs = $("body").find("[data-role=\"tabs\"]"); for(var i=0;i<tabs.length;i++) { $(tabs[i]).tabs(); //scan for selected sel = $(tabs[i]).find("[data-selected='true']"); if(sel.length) $(tabs[i]).tabs("select",$(sel).attr("id")); }
Notice I also look for a selected tab. Normally you have to do via JavaScript in jQuery UI, but my modification allows for this:
<div data-role="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2" > <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3" data-selected="true"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> </div> </div>
Notice the third tab there is selected. So to be fair, this isn't really saving you a lot. I thought autocomplete may be a cooler example. Here is the first demo from the site - note it doesn't include any of the script/css includes:
<div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div><script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script>
Now here is my version:
<input name="foo" data-role="autocomplete" data-source="ActionScript,AppleScript,Asp,BASIC,C,C++,Clojure,COBOL,ColdFusion,etc" />
My code assumes a simple list and doesn't support complete objects, but you get the idea. I supported a remote URL like so:
<input name="foo" data-role="autocomplete" data-sourceurl="data.cfm" />
And yep, that just plain works. I did a quick mock up for the Accordion control as well, but ran into issues getting the default working. For folks who want to play with this, I've included a zip of my tests. To be clear - this is just an experiment and is not meant to be taken seriously.