13.1. 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.

Section 13.2 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. Section 13.3 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 Section 13.4 you will learn how to create a vertically folding accordion. Section 13.5 will explain how to use interpage links and their respective targets to create document tabs. Section 13.6 shows how to create a basic modal window via appropriate action. Section 13.7 explains how to build a simple drop-down menu. Section 13.8 delves into the creation of an image rotator that can be controlled via buttons, reusing the interpage link technique from Section 13.5. Section 13.9 takes lessons learned from Section 13.4, creating horizontal panels instead of a vertical accordion.