Microsoft PowerPoint - jQuery-3-UI.pptx


Published on

Published in: Technology
  • Be the first to comment

Microsoft PowerPoint - jQuery-3-UI.pptx

  1. 1. THE MAN BEHIND THE MAGIC: WE INTERVIEW JQUERY’S JOHN RESIG Visual jQuery The Magazine Iss u e1… 0 06 September 2 $ TUTORIAL An Introduction to the World of jQuery—Starting With the jQuery Object Itself $ JQUERY Winning on Philosophy: Why jQuery’s Approach Works INSIDE jQuery Plugin Rundown
  2. 2. Visual jQuery Magazine From The Editor ........... 3 Meet Dave Yehuda Katz on his web development Cardwell history, his favorites, and of course, The creator of jQBrowser and jQMinMax chats jQuery: the library and magazine. with Visual jQuery Magazine. Winning on Philosophy .. 4 On Page 9 What the jQuery Philosophy is and why it works so well. ISSUE 2 SNEAK PEEK Behind The Magic .......... 6 Next month, we have an interview with Klaus Hartl, the creator of the popular Tabs plugin, The Man: An interview with John and a developer on Plazes. Resig, father of jQuery Also, a tutorial on jQuery’s AJAX functional- ity, a visual effects plugin roundup, another article, and your letters. All on October 18. Tutorial Series .............. 8 In our first tutorial, we explore the jQuery object and what makes it We Want Your Letters special. Please submit letters to the editor to WE will print letters relating to articles in the Magazine Plugin Roundup ........... 10 or of general interest to the jQuery Three great plugins for developing community if space permits. We reserve the right to reject any letter. rich applications with jQuery
  3. 3. . . . From The Editor As is traditional, I’d like my notable was the selectables plugin), first editorial to welcome new and I followed the link home to readers to the Visual jQuery jQuery. Magazine. Immediately, I took to the framework, Around a year ago, after a fairly which seemed to think the way I large amount of time doing was programming: by centering on traditional web development, DOM Elements and tacking bits of I found myself interested in functionality on top of them, jQuery this newfangled concept called made Javascript fun again. AJAX. I attended a workshop by the luminary Thomas Fuchs, the jQuery was far ahead of the pack, creator of Scriptaculous (based on the Prototype even then, with documentation, but I quickly dove library), and while I was quite impressed by the in, trying to organize the jQuery documentation capabilities of both Prototype and Scriptaculous, wiki, and eventually throwing up the first iteration of something tugged at me. Visual jQuery, the slick visual representation of the jQuery API. When jQuery 1.0 began to include the After using them for a bit, and becoming somewhat documentation built-in, I retooled Visual jQuery to proficient at using Prototype to build responsive, take advantage of that. rich web applications, I realized that the learning curve was far too steep. While I was able to do all I suspect many of this magazine’s readers took sorts of powerful things, I found myself constantly parallel paths to finding jQuery. Still others, initially reinventing the wheel for simple tasks. While AJAXy horrified at the prospect of learning Java, were no Javascript has gotten the term “DOM Scripting,” I doubt pleasantly surprised at just how easy it is to barely felt the influence of the DOM in my day-to-day learn jQuery. Hopefully this magazine will appeal to Prototype development. both sorts. For the seasoned jQueryist, we bring you advanced techniques, and a rundown of plugins Thankfully, I came across Ruby on Rails shortly that will supercharge your next project. thereafter, which does a darn good job of abstracting out the entire concept of Javascript (and while the For the beginner, we’ll be featuring ground-up now-popular RJS templates were not available yet, I tutorials on the framework, helping you to build your still found Rails’ Prototype helpers to take the edge first project with a solid grasp of what you’re doing, off). not just copying and pasting code snippets. A few months later, I came across the Interface library With that, I leave you to the magazine. Good luck in a post about the various cool effects (especially with jQuery!
  4. 4. Illustration By Jörn Zaefferer W I N N I N G O N P H IL O S O P H Y Why jQuery’s Approach Works By Yehuda Katz like Prototype and Dojo, take a orientedness, its developers have functional approach. Sure, they’re put a substantial amount of time The approach jQuery takes fully capable of addressing DOM into developing object-oriented isn’t just “cleaner code” or “chain- Elements, just like jQuery, other classes for different types of func- ability.” Its fundamental philoso- frameworks make entirely differ- tionality. A class for forms, a class phy, centering on collections of ent choices. for elements, a class for events. It DOM Elements, puts it squarely Prototype, for one, fancies it- goes on and on. where most Javascript developers self a true Object Oriented exten- It’s perfectly possible to write program most. sion of Javascript’s paltry native clean, good-looking Prototype By contrast, other frameworks, offerings. In pursuit of true object- code.
  5. 5. And Prototype can emulate Once you obtain a group of limited subset of XPath, and some one of the best things about jQue- elements, the fun begins. Add nice custom expressions thrown ry’s focus on DOM Element collec- .fadeIn(“slow”) and each of the el- in for good measure. tions: its chainability. But jQuery ements will fade in—slowly. When I say CSS3, I mean conceives of modern Javascript But we’re not done. Without it. jQuery supports the ~ selec- development the way many major skipping a beat, add .addClass(“th tor, :not(expr), attributes via [@ players in the Javascript commu- isIsDamnFun”). Each element will attr=’whatever’]. nity are starting to see it: as DOM get the class “thisIsDamnFun.” It XPath support is a bit more Scripting first and foremost. is, isn’t it? limited, but most of the good For those of us whose Javas- And it can go on from there. stuff is here. The / and // opera- cript programming focuses pri- Add .click(function() { alert(“Hello”) tors are available, as are parent marily on page elements, and I }); to throw up an alert box when and preceding sibling axes. jQuery suspect that’s most of us, jQuery any of the elements are clicked. supports :first, :last, and :eq(n), a makes the work dead simple. Add .append(“Hello”) and the word slimmed down version of [posi- hello will be appended to the end tion() = n]. jQuery Workflow of each of the matched elements. Finally, jQuery supports testing Cool, huh? for contained elements via [tag- Most jQuery methods start with Name]. And because the jQuery the the collection of elements, us- jQuery Selectors parses operates on XHTML, it can ing the handy support for CSS3, be easily co-opted for parsing raw XPath, and a slew of custom ex- Now that you’ve seen the pow- XML from AJAX requests. pressions (like :visible, which re- er of jQuery methods, how do we And of course, jQuery has the turns only visible elements, and get the element collection in the full complement of AJAX methods :checked, which returns only first place? Happily, we have CSS through $.ajax, and $().load. checked form fields). (1-3) at our disposal, as well as a SOME BASIC JQUERY $(“a”) Inside the a element is a group of p elements $(“a”).find(“p”)
  6. 6. THE MAN BEHIND THE MAGIC JOHN RESIG I rarely have to answer questions on the mailing list anymore—the community is self-maining and quite active.
  7. 7. This magazine, and jQuery it- sistent, simple way to approach which required tedious, manual self, owe their existence to the previously complex problems. entry, the new site became a place strong unyielding vision of John And in addition to a solid de- of first resort for keeping up with Resig. Like many children of the sign philosophy, Resig doesn’t the latest jQuery documentation. ‘80s, John grew up as computers skimp on the community side of Proving that jQuery is more grew up. things. “I’m frequently discour- than just a fad, Resig will speak His first programming lan- aged by other project mailing lists, at the Ajax Experience conference guage, the ubiquitous QBASIC, un- where a simple misdirected ques- next month, a conference orga- derscores John’s intellectual curi- tion will be answered with anger nized by the popular osity for programming. With the and malice,” Resig said. “For ex- In addition to a talk about jQuery exception of Java, all of his pro- ample, having a question come itself, he will present a discussion gramming skills are self-taught., in about Javascript, as opposed on choosing a Javascript frame- which makes his upcoming book, to jQuery itself would be easy to work. Pro Javascript Techniques, due to dismiss. But by taking the time The run-up to jQuery 1.0 had be published this December by to answer it, you can win another its share of hassles, but had its re- APress, even more of an accom- user.” wards as well. “The major tirumph plishment. As part of his drive to ensure was simply getting the code out While he doesn’t much care the community has plenty of good the door. As any developer will tell for Java, he believes in watching resources, John focused heavily you, it’s not easy to actually ship,” talented programmers in their ele- on documentation in the run-up to Resig said. ment: he keeps tabs on more than the recently released version 1.0 And the work he put into fos- 250 web feeds a day. “Seeing an of jQuery. tering the jQuery community paid amazing program- off. “There’s quite a mer in his ‘natural habitat’ is always a thing of beauty,” Re- ‘The major few developers with [subversion] access who’ve been helping sig said. Of his many in- triumph was simply out, resolving issues as they come to getting the code fluences, Resig cit- them.” While Resig ed Alex Russell of has lately become Dojo, and Dean Ed- busy with work and wards of IE7 fame as the most con- out the door.’ completing his book on Javascript, the sistently interest- community picked ing. “If there’s any up the slack, keep- Javascript develop- ing the post-1.0 mo- ers that I admire and respect, it’s Before he would be satisfied mentum going. them.” that the framework was produc- That’s not to say the release While he has respect for the tion ready, the code did not need went off without a hitch. “I had to developers of more established to be bug-free only; everything break the API in a couple ways. frameworks like Dojo and Proto- needed to be documented. Many method names were sim- type, Resig, like David Heinemeier It paid off. As a result of his ply not as clear as they should’ve Hansen of Rails fame, has some innovative documentation efforts, been and caused many conflicts,” very strong opinions that drive the version 1.0 of jQuery spawned Resig said. That said, virtually all framework. a dynamically updating Visual users worked out the difficulties, Like Ruby on Rails, jQuery can jQuery documentation site, which and major plugins, like the Inter- be seen as a sort of opinionated could be updated as often as the face visual effects library, released software, where strong design phi- codebase itself was updated. In updated versions simultaneously losophies give developers a con- contrast to the old Visual jQuery, with the official release of 1.0.
  8. 8. JQUERY OBJECT A BRIEF INTRODUCTION jQuery, the framework, is fun- Collection of Elements But underlying all the syntacti- damentally a way to manipulate cal sugar, a collection of elements collections of DOM Elements. Traditionally, Javascript pro- was no different from a collection You’ll find that’s a theme through- grammers have held collections of strings or a collection of inte- out this magazine, but what does of DOM Elements in standard Ja- gers. a collection of DOM Elements re- vascript arrays. ally mean? And how does jQuery Like any other array, it was Enter jQuery make it easy to make use of these possible to check the size of the collections? array, iterate through the array, The jQuery framework chang- and get array elements by index. es all of that. Instead of seeing a DOM Element Basic array functions. collection of elements as yet an- But there was nothing about other array, jQuery sees the collec- A DOM Element is a single an array of DOM Elements that tion as something uniquely DOM- HTML node, like a p or a. It can set it apart from any other array. centric. be empty, or it can contain text or Say you wanted to append a So in addition to the tradition- other elements inside it. class to each element in your col- al methods for getting the length Think of it this way: every time lection. You’d iterate through each of an array and others, collections you open a tag in HTML, you are item in the collection with a regu- of elements, held in a jQuery ob- creating a DOM Element. Every- lar loop, and add the class to each ject, can do all sorts of interesting thing inside that tag is a child of element. things. the DOM Element. This worked perfectly fine, First of all, you get elements An element can be a parent and some of the more popular element, which means it con- frameworks refined the concept p tains other elements, or a child to make it easier to do things element, which means it has a like add a class. parent element. In the example on this page, the p is a parent ele- p ment of both the span and hr. The span is a child of the span span hr p. Hello Elements can also be sib- lings. That means they share /span a parent. The span and hr in hr / /p the example on this page are siblings, because they share the p as a parent.
  9. 9. ‘You can think of a jQuery object like a bucket that holds DOM Elements’ into a jQuery object in a very fa- the modified object, so it can be tions without any name. Inside an miliar way: through CSS selectors. further manipulated. event handler’s callback, the this For instance, $(“”) will fill a keyword refers to the specific ele- jQuery object with all a elements Event Handling ment that had the event happen on the page with the class fun. to it. You can think of a jQuery ob- Another common DOM Script- You might wonder why we ject like a bucket that holds DOM ing need is the ability to bind needed to do $(this).addClass, and Elements. event handlers to various page el- not just this.addClass. Remember Once we have a ements. For example, you might that you can only run addClass jQuery object, we want to change the class of an on objects in a jQuery bucket. In- can do any num- element when it’s clicked, to in- side an event handler, this refers ber of things to dicate that it’s been selected. only to the element itself. $(this) the elements Say, for instance, you wanted to simply throws the element into it holds—all at add the class on to all p ele- a jQuery bucket, which becomes once. ments on the page with the eligible to use the special jQuery Remember ear- class clickable when they are methods, like addClass. lier, when we wanted to clicked. The syntax is classic jQue- Because click is a jQuery add a class to all of the elements ry: method, you can chain additional in our collection? In jQuery, we $(“p.clickable”).click( methods after it. If you remove can send a message to the object, function() { the semicolon at the end of the telling it to add the “hello” class to $(this).addClass(“on”); command, you can add additional every element in the bucket. }); methods on a new line: And the syntax is dead simple: There are a few Javascript and $(“p.clickable”).click(...) $(“”).addClass(“hello”); jQuery idioms here, so let’s go .append( There’s a lot of power packed through the code step by step. “spanX/span” into that short expression. We’re First, $(“p.clickable”) gets all ).fadeTo(“slow”, 0.5); grabbing all of the elements on p elements on the page with the will append a span to the end the page matching a CSS expres- class clickable and throws them of the p elements with class click- sion, and adding, to each element into a jQuery bucket. able and then slowly fade them matched, the class “hello.” The .click means that we are out to 50 percent opacity. What’s even more fun is mak- defining an action the browser ing jQuery chains. We can do $(“a. should take when a KEY POINTS fun”).addClass(“hello”).hide(). The click event happens bucket of elements gets passed on an element in ◌ Only jQuery objects (buckets of elements) to the hide method, which hides the bucket. are eligible to use jQuery methods Actions to be them all. ◌ Inside event handlers, this refers to the And what makes jQuery spe- taken, or call- element the event happened to cial is that all methods that make backs, are defined modifications to a bucket of ele- as anonymous Ja- ◌ Write event handlers as anonymous ments (the jQuery object) return vascript functions, Javascript functions, as: function() { ... } or Javascript func-
  10. 10. PLUGINS RICH APPLICATIONS jTip by Cody Lindley This page is actually modeled after the jTip JQUERY AND PLUGINS plugin (yes, it’s that cool). jQuery has a very simple plugin architecture This tooltip solution that allows developers to make use of the allows you to set AJAX quasi-magical properties of jQuery functions. tooltips with pure XHTML markup—after including To create a new method that operates on the jTip plugin, of course. the jQuery object, developers need only cre- ate a new function called, which Code sample: only needs to return a jQuery object itself (to a href=”ajax.htm” class=”jTip” id=”one” guarantee chainability). To play nice, a jQuery name=”Password must follow these function should iterate through elements au- rules:”Text tomatically, to maintain consistency between /a the core and plugins. dateSelector by Kelvin Luck This widget is a sorely needed date selector for jQuery. Notably, it resolved the select box glitch in IE, so its calendar control can cover select boxes. dateSelector and the checkbox control prove that jQuery can have a very robust set of widgets. It is also heavily customizable by region. Code sample: input type=”text” class=”date-picker” name=”date1” id=”date1” / Checkbox by Kawika K. The checkbox plugin allows the use of any images instead of the standard checkbox. It allows separate images for off, hovered, and checked. Originally written by editing the raw CSS properties, this new version uses CSS classes for simplicity. The syntax, like the previous plugins, is dead simple. Code sample: $().cssCheckbox(); 10
  11. 11. ABOUT US Meet Dave Cardwell . . . Publisher Wycats Designs Dave Cardwell was a programmer well before his release of jQMinMax and Editor jQBrowser brought him fame in the Yehuda Katz jQuery community. Contributors “I was eight when my parents bought Dave Cardwell me a green-screen Amstrad computer Klaus Hartl and it wasn’t long before I was mucking about with BASIC.” John Resig Leah Silber Now, after a year at York University, Jörn Zaefferer Cardwell describes himself as ‘a freelance programmer working on his design skills.’ CONTRIBUTIONS He released his jQMinMax plugin in Contributions are wel- early August 2006. come (and desired). We accept artwork, articles, “At the time there was a lot of buzz and interviews. We re- about a shift towards liquid and fluid serve the right to edit any layouts. I wanted to create a plugin that contribution for clarity would be of immediate use to people and good taste. and I saw an opportunity for jQMinMax here.” The plugin simulates max- and min- height and width in Internet Explorer. Please send contributions to the magazine at edi- As with many diehard jQuery fans, John Resig and his ever-active community were a big part of what drew Cardwell in. “It has to be the documentation and responsiveness of the community that first endeared me to jQuery. While the syntax and functionality are lovely, there are PLUGINS other libraries available that are comparable in features. It was these peripheral If you are interested in benefits and a real sense of progress in the core library that kept me coming having your plugin fea- back.” tured in an issue of the For Dave, jQuery was a light at the end of the tunnel, where the tunnel was Magazine, please send a Javascript, and the traffic cops didn’t show up to work. link to the plugin, a de- scription, some details “I was growing increasingly frustrated trying to track developments in the about yourself, and, ide- JavaScript community - new techniques, event handling, document traversal and ally a photo of yourself. so on. jQuery brought all these under a single roof for me, at a file size that wouldn’t affect the responsiveness of my sites.” We feature plugins in the- According to Cardwell, newbies need not be afraid of experimenting with jQuery. matic groupings, so your plugin may appear many “The jQuery and Visual jQuery sites are indispensable, and when you’re genuinely issues from now. It may stumped I haven’t seen a question to the mailing list that went unanswered.” appear grouped with any other plugin we feel is Cardwell’s released multiple other plugins since he first began using the jQuery appropriate. The titles, library. More information on those plugins can be found at http://davecardwell. descriptions, and details of plugins are created by “I’m always more than happy to hear from like-minded folks - I can be contacted the Magazine editors and from my website. I can also usually be found lurking in the #jquery IRC channel subject to our discretion. on” 11
  12. 12. JAVASCRIPT IS SEXY AGAIN w w w. j Q u e r y. c o m 12