Other Uses for YUI

The YUI framework offers support in a wide range of areas, including animation, buttons, calendars, charts, colors, cookies, drag and drop, fonts, imaging, menus, styles, uploading, and a great deal more as well.

To find features you need, check out the examples down the left of the main index.html page in the downloaded distribution or at http://developer.yahoo.com/yui and click on ones that interest you.

A Simple YUI Calendar

For example, clicking through to the calendar link reveals how you can make your own calendars, a common feature needed by many websites. Here’s how you can recreate the calendar example shown at:

http://developer.yahoo.com/yui/examples/calendar/multi.html

To do so, locate all the following files in the build folder of the downloaded YUI distribution on your hard disk, and copy them to your web folder (bearing in mind that assets is a folder, not a file):

  • fonts/fonts-min.css

  • calendar/assets

  • yahoo-dom-event /yahoo-dom-event.js

  • calendar/calendar-min.js

Now you can type in the document in Example 19-3, calendar.html, which, when you call it up in your browser, will look like Figure 19-5.

A YUI calendar
Figure 19-5. A YUI calendar
Example 19-3. calendar.html—a multiselect calendar
<html><head><title>YUI Calendar</title> <link rel="stylesheet" type="text/css" href="fonts-min.css" /> <link rel="stylesheet" type="text/css" href="assets/skins/sam/calendar.css" /> <script src="yahoo-dom-event.js"></script> ...

Get Learning PHP, MySQL, and JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.