Book Image

Learning the Yahoo! User Interface library

By : Dan Wellman
Book Image

Learning the Yahoo! User Interface library

By: Dan Wellman

Overview of this book

<p>The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.<br /><br />This book covers all released components whether utility, control, core file, or CSS tool.&nbsp; Methods of the YAHOO Global Object are used and discussed throughout the book.<br />The basics of each control will be presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.<br /><br />Besides giving you a deep understand 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.<br /><br />You will learn to create a number of powerful JavaScript controls that can be used straight away in your own applications.</p>
Table of Contents (14 chapters)
Learning the Yahoo! User Interface Library
Credits
About the Author
Preface

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 which 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:

<div id="slider_bg" title="the slider background">
<div id="slider_thumb" title="the slider thumb"> <img src="images/slider_thumb.gif"></div>
</div>

These elements go together to form the basic Slider control, as shown in below:

The Slider control works as a specific implementation of DragDrop in that the slider thumb can be dragged along the slider background either vertically or horizontally. The DragDrop classes are extended to provide additional properties...