sorted by: recent | see :
popular
Content Tagged with yui + JavaScript
YUI 3: The goals are lighter, faster, consistent, power, secure
YUI 3 has a preview release for us to check out.
The goals are:
- lighter (less K-weight on the wire and on the page for most uses)
- faster (fewer http requests, less code to write and compile, more efficient code)
- more consistent (common naming, event signatures, and widget APIs throughout the library)
- more powerful (do more with less implementation code)
- more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)
What's New
- Sandboxing: Each YUI instance on the page can be self-contained, protected and limited (
YUI().use()). This segregates it from other YUI instances, tailors the functionality to your specific needs, and lets different versions of YUI play nicely together. - Modularity: YUI 3 is architected to use smaller modular pieces, giving you fine-grained control over what functionality you put on the page. If you simply want to make something draggable, you can include the
dd-dragsubmodule, which is a small subset of the Drag & Drop Utility. - Self-completing: As long as the basic YUI seed file is in place, you can make use of any functionality in the library. Tell YUI what modules you want to use, tie that to your implementation code, and YUI will bring in all necessary dependencies in a single HTTP request before executing your code.
- Selectors: Elements are targeted using intuitive CSS selector idioms, making it easy to grab an element or a group of elements whenever you’re performing an operation.
- Custom Events++: Custom Events are even more powerful in YUI 3.0, with support for bubbling, stopping propagation, assigning/preventing default behaviors, and more. In fact, the Custom Event engine provides a common interface for DOM and API events in YUI 3.0, creating a consistent idiom for all kinds of event-driven work.
- Nodes and NodeLists: Element references in YUI 3.0 are mediated by Node and NodeList facades. Not only does this make implementation code more expressive (
Y.Node.get("#main ul li").addClass("foo");), it makes it easier to normalize differences in browser behavior (Y.Node.get("#promo").setStyle("opacity", .5);). - Chaining: We’ve paid attention throughout the new architecture to the return values of methods and constructors, allowing for a more compressed chaining syntax in implementation code.
Some example snippets
-
-
// Creates a YUI instance with the node module (and any dependencies) and adds the class "enabled" to the element with the id of "demo".
-
YUI().use('node', function(Y) {
-
Y.get('#demo').addClass('enabled');
-
});
-
-
// Creates an instance of YUI with basic drag functionality (a subset of the dd module), and makes the element with the id of "demo" draggable.
-
YUI().use('dd-drag', function(Y) {
-
var dd = new Y.DD.Drag({
-
node: '#demo'
-
});
-
});
-
-
// Adds the class "enabled" to the all elements with the className "demo".
-
Y.all('.demo').addClass('enabled');
-
-
// Sets the title attribute of all elements with the className "demo" and removes the class "disabled" from each.
-
Y.all('.demo').set('title', 'Ready!').removeClass('disabled');
-
-
// Adds the Drag plugin to the element with the id "demo", and enables all of its h2 children drag as handles.
-
Y.get('#demo').plug(Y.Plugin.Drag, {
-
handles: 'h2'
-
});
-
-
// Attaches a DOM event listener to all anchor elements that are children of the element with the id "demo". The event handler prevents the anchor from navigating and then sets a value for the innerHTML of the first em element of the clicked anchor.
-
Y.on('click', function(e) {
-
e.preventDefault();
-
e.target.query('em').set('innerHTML', 'clicked');
-
}, '#demo a');
-
Very exciting stuff to the team. I look forward to seeing a full up code repository too!
Using YUI to Pulse Elements on Web Pages to Improve Usability
Advantages of using the Module Pattern to Structure Javascript Classes
mootools: del.icio.us/tag/mootools
Development
Programming
JavaScript
Web2.0
Prototype
yui
mootools
Using YUI to Pulse Elements on Web Pages to Improve Usability
opensource: del.icio.us tag/opensource
Library
JavaScript
opensource
License:MIT
yui
system:has:license
Ojay 0.2: easy keyboarding, a validation DSL, and two new UI widgets
James Coglan has updated Ojay, the chaining wrapper for YUI that we posted on a few months back.
The new release features really simple keyboard and form scripting and couple of new UI widgets, a new event system and a stack of other improvements:
Ojay.Forms. By far the biggest new package, Ojay.Forms sorts out a real pain point for me in terms of app development. It does two things: it provides unobtrusive replacements for the YAHOO.widget.Button family of classes, and it provides a DSL for handling form validation and Ajax submission.
Ojay.Keyboard. The new keyboard package is an abstraction over YAHOO.util.KeyListener that lets you say what mean without worrying about character codes, for example:
Ojay.Keyboard.listen(document, 'ALT SHIFT S', function() { // handle key press });It lets you group sets of keyboard commands together so you can make context-sensitive keyboard controls, and gives you easy access to enable/disable key events and their default browser responses. Not much more to say except that you should check out the documentation.
We have two new UI packages, Ojay.Overlay and Ojay.Paginator. Overlay gives you a bunch of classes for positioning content on top of the document, producing lightbox effects and the like, and Paginator implements the content slider effect that’s got a lot of attention recently, including the ability to lazy-load pages of content via Ajax, and easy integration with Ojay.History. Both packages come with a collection of events to allow your code to react to changes to the components, just like you would for DOM elements.
Speaking of events, this release introduces Ojay.Observable, a JS.Class module that allows any class to support the on() method used for listening to events. This module underlies the custom events published by all the Ojay components. More information and examples are in the documentation.