Some YUI bits and bobs

Introduction

This is where I'm sticking YUI related code, docs, examples and things.

There's not so much just yet...

YUI3 Resize

There's a few examples for my resize gallery plugin here. Resize is not a port of the YUI2 resize, but respects its API so using this after YUI2 shouldn't be too unpleasant.

Examples

• Introduction and basic example
• Discussion about wrapping elements and plugins, and another example

YUI3 TreeviewLite

TreeviewLite is another gallery plugin trying to be a really lightweight treeview. There's already a port of the YUI2 version with lots of fancies, but if you just need a simple treeview this might be for you. It uses html lists already on the page and just adds some styling and an event listener. You can nest your lists as deep as you like, using <ul> or <ol> tags at any level. There's a couple of events, too: "open" and "collapse". An example can be found here.

Examples

• Introduction and basic example
• Efforts to combine Sortable and TreeviewLite

YUI2 Diary

Diary is a YUI2 based calendaring widget. It takes a datasource and displays events (in the 10am Doctors sense of event, not onclick!) on a weekly, daily or monthly calendar. All events are resizeable and drag-droppable to change their timings. You can also click and drag to create new events. It's fairly easy to use categories and other things to set up filter items on the diary (ie show/hide personal events). There's lots of events (this time in the onclick sense) to allow you to respond to changes to the data. The first port of call should be here to get an introduction to setting it all up.

We're just starting to put it onto our live app for testing; I'm fairly happy the js is about right now.

Examples

• A simple example
• Mapping your data fields to what Diary expects, and adding filters to the diary
• Displaying and creating multi-day items on the Diary.
• Some interesting events example.
• The configuration object - all options explained a bit.

API

API docs are here. The principal object is the Diary; you'll also come into contact with DiaryItems (ie individual appointments).