jQuery Cookbook

Chapter 13. Interface Components from Scratch

Nathan Smith

Introduction

While the official jQuery UI widget collection offers a wealth of ready-made functionality, from time to time you might choose to create a customized element that meets a specific need. Perhaps you desire greater control over the HTML markup or simply want to keep your JavaScript code base lighter. Maybe you are looking to build something not already covered by existing solutions. Whatever the reason, this chapter will show you how to tersely write customized components for your projects. These recipes have been written with ease of use in mind, favoring simplicity over configuration.

Recipe 13.1 will show you how to create custom tool tips, for occasions where you need to direct the user’s attention via providing additional content or instruction. Recipe 13.2 will explain how to build a file tree–style menu, allowing the user to drill down and explore the depth of a site hierarchy. In Recipe 13.3 you will learn how to create a vertically folding accordion. Recipe 13.4 will explain how to use interpage links and their respective targets to create document tabs. Recipe 13.5 shows how to create a basic modal window via appropriate action. Recipe 13.6 explains how to build a simple drop-down menu. Recipe 13.7 delves into the creation of an image rotator that can be controlled via buttons, reusing the interpage link technique from Recipe 13.4. Recipe 13.8 takes lessons learned from Recipe 13.3, creating horizontal ...