Book Image

YUI 2.8: Learning the Library

By : Dan Wellman, Daniel Barreiro, Daniel Osvaldo Barreiro
Book Image

YUI 2.8: Learning the Library

By: Dan Wellman, Daniel Barreiro, Daniel Osvaldo Barreiro

Overview of this book

The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code. In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.The authors take the reader from beginner to advanced-level YUI usage and understanding.
Table of Contents (18 chapters)
YUI 2.8 Learning the Library
About the Authors
About the Reviewers

Visual selection with the slider control

So far in this chapter we've focused on the functionality provided by the Drag-and-Drop utility. Let's shift our focus back to the interface controls section of the library and look at one of the components that is related very closely to drag-and-drop—the Slider control.

A slider can be defined using a very minimal set of HTML. All you need are two elements—the slider background and the slider thumb, with the thumb appearing as a child of the background element. The slider thumb may contain an image or be decorated somehow:

<div id="slider_bg" class="yui-h-slider">
<div id="slider_thumb" class="yui-slider-thumb"> <img src="images/slider_thumb.gif"></div>

These elements go together to form the basic slider control, as shown in the following figure:

The class names are mandatory and correspond to definitions in the slider.css file. The "h" in yui-h-slider needs to be replaced by a "v" or a "region" for vertical and...