I created YUI 2 login widget, imYUILogin, for an intranet project that I am working on. I originally created it as a Dialog Container, but I recently updated it so that it could be configured as a Panel or a Module. Logging in is done ajaxally, of course.
I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.
When calling a function to handle the click event for the YUI Dialog buttons, the scope of the function is always the dialog instance itself. This is not a problem in most situations, but when creating a custom YUI widgets, use the object literal option to handle the event rather than just calling a function. Otherwise, you will run into scope issues.
I am working again on a project that uses the Yahoo User Interface Library (YUI). One of the requirements for the project is an input calendar field. When I first began the project, I created an event listener (Event.Listener) as discussed in a previous post. But, because a date field is fairly common in web applications, I wanted to create a widget so that I would not have to duplicate the process in future projects. To my surprise, YUI does not already have a widget with this functionality, so I decided to create one. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.
