Download to read offline
![22 CHAPTER 2 Enhancing UIs with widgets
Each link listed in figure 2.3 takes you to a section with documentation on the individ-
ual option, method, or event. Figure 2.4 shows the documentation for the width
option.
Note the following points:
■ The default value of the width option is 300; this is why all your dialogs have
been 300 pixels wide to this point.
■ The option can be retrieved or changed using the option() method. You’ll
learn how methods work, including the option() method, in the next section.
TIP All options and their default values are accessible at $.ui.[widget-
Name].prototype.options, for example, $.ui.dialog.prototype.options.
You can change these values to alter the defaults that jQuery UI sets. If you
were to run $.ui.dialog.prototype.options.width = 500, any new dialog
instances would default to a width of 500 pixels rather than 300. Existing dia-
log instances wouldn’t be affected.
Let’s add one more option to your notification dialog. Recall that the example uses a
dialog to notify users that their files have finished uploading. Assuming that upload-
ing is a process that could take a while, the user may have moved on to other tasks in
the interface and the default dialog position—the center of the screen—might be an
The name of
the option A description of the option
and what it’s used for
The JavaScript variable type
the option is expecting
The default value used if the
option is not specified
Code examples showing how
to specify the option
Code examples showing how to get and
set the option after initialization
Figure 2.4 Documentation on the dialog widget’s width option from http://api.jqueryui.com/dialog/
#option-width. The documentation gives a description of the option, lists its JavaScript type, its default
value, and gives some examples of how to use it.
Licensed to tracy moore <nordick.an@gmail.com>](https://image.slidesharecdn.com/23317986-250521005243-e35a0f91/85/Jquery-Ui-In-Action-1st-Edition-Tj-Vantoll-49-320.jpg)
![22 CHAPTER 2 Enhancing UIs with widgets
Each link listed in figure 2.3 takes you to a section with documentation on the individ-
ual option, method, or event. Figure 2.4 shows the documentation for the width
option.
Note the following points:
■ The default value of the width option is 300; this is why all your dialogs have
been 300 pixels wide to this point.
■ The option can be retrieved or changed using the option() method. You’ll
learn how methods work, including the option() method, in the next section.
TIP All options and their default values are accessible at $.ui.[widget-
Name].prototype.options, for example, $.ui.dialog.prototype.options.
You can change these values to alter the defaults that jQuery UI sets. If you
were to run $.ui.dialog.prototype.options.width = 500, any new dialog
instances would default to a width of 500 pixels rather than 300. Existing dia-
log instances wouldn’t be affected.
Let’s add one more option to your notification dialog. Recall that the example uses a
dialog to notify users that their files have finished uploading. Assuming that upload-
ing is a process that could take a while, the user may have moved on to other tasks in
the interface and the default dialog position—the center of the screen—might be an
The name of
the option A description of the option
and what it’s used for
The JavaScript variable type
the option is expecting
The default value used if the
option is not specified
Code examples showing how
to specify the option
Code examples showing how to get and
set the option after initialization
Figure 2.4 Documentation on the dialog widget’s width option from http://api.jqueryui.com/dialog/
#option-width. The documentation gives a description of the option, lists its JavaScript type, its default
value, and gives some examples of how to use it.
Licensed to tracy moore <nordick.an@gmail.com>](https://image.slidesharecdn.com/23317986-250521005243-e35a0f91/75/Jquery-Ui-In-Action-1st-Edition-Tj-Vantoll-49-2048.jpg)
Jquery Ui In Action 1st Edition Tj Vantoll
- 1. Jquery Ui InAction 1st Edition Tj Vantoll download https://ebookbell.com/product/jquery-ui-in-action-1st-edition-tj- vantoll-46635972 Explore and download more ebooks at ebookbell.com
- 2. Here are somerecommended products that we believe you will be interested in. You can click the link to download. Jquery Ui Themes Beginners Guide Adam Boduch https://ebookbell.com/product/jquery-ui-themes-beginners-guide-adam- boduch-2393720 Jquery Ui 18 The User Interface Library For Jquery Dan Wellman https://ebookbell.com/product/jquery-ui-18-the-user-interface-library- for-jquery-dan-wellman-2472424 Jquery Ui 16 The User Interface Library For Jquery Dan Wellman https://ebookbell.com/product/jquery-ui-16-the-user-interface-library- for-jquery-dan-wellman-4103610 Jquery Ui 17 The User Interface Library For Jquery Dan Wellman https://ebookbell.com/product/jquery-ui-17-the-user-interface-library- for-jquery-dan-wellman-4103612
- 3. Jquery Ui CookbookAdam Boduch https://ebookbell.com/product/jquery-ui-cookbook-adam-boduch-4430518 Jquery Ui 110 The User Interface Library For Jquery Alex Libby https://ebookbell.com/product/jquery-ui-110-the-user-interface- library-for-jquery-alex-libby-4986632 Jquery Ui 17 The User Interface Library For Jquery Wellman https://ebookbell.com/product/jquery-ui-17-the-user-interface-library- for-jquery-wellman-5399096 Jquery Ui Eric Sarrion https://ebookbell.com/product/jquery-ui-eric-sarrion-5470542 Jquery And Jquery Ui Ram Babu https://ebookbell.com/product/jquery-and-jquery-ui-ram-babu-22090760
- 5. M A NN I N G TJ VanToll FOREWORD BY Scott González
- 6. jQuery UI inAction Licensed to tracy moore <nordick.an@gmail.com>
- 7. Licensed to tracymoore <nordick.an@gmail.com>
- 8. jQuery UI inAction TJ VANTOLL M A N N I N G Shelter Island Licensed to tracy moore <nordick.an@gmail.com>
- 9. For online informationand ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com ©2015 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Sean Dennis 20 Baldwin Road Technical development editor: Teresa Burger Shelter Island, NY 11964 Copyeditor: Teresa Wilson Proofreader: Elizabeth Martin Typesetter: Gordan Salinovic Cover designer: Marija Tudor ISBN 9781617291937 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 19 18 17 16 15 14 Licensed to tracy moore <nordick.an@gmail.com>
- 10. v brief contents PART 1MEET JQUERY UI ............................................................1 1 ■ Introducing jQuery UI 3 2 ■ Enhancing UIs with widgets 18 PART 2 JQUERY UI CORE ..........................................................41 3 ■ Building complex web forms with jQuery UI 43 4 ■ Enhancing interfaces with layout and utility widgets 77 5 ■ Adding interaction to your interfaces 107 6 ■ Creating rich animations with effects 135 7 ■ Theming and styling applications with jQuery UI 162 PART 3 CUSTOMIZATION AND ADVANCED USAGE ............................183 8 ■ Using the widget factory to build stateful plugins 185 9 ■ Extending widgets with the widget factory 213 10 ■ Preparing your application for production 238 11 ■ Building a flight-search application 259 12 ■ Under the hood of jQuery UI 287 Licensed to tracy moore <nordick.an@gmail.com>
- 11. Licensed to tracymoore <nordick.an@gmail.com>
- 12. vii contents foreword xiii preface xv acknowledgmentsxvi about this book xviii about the cover illustration xxi PART 1 MEET JQUERY UI...................................................1 1 Introducing jQuery UI 3 1.1 What is in jQuery UI? 4 1.2 The benefits of using jQuery UI 6 Cohesive and consistent APIs 6 ■ Comprehensive browser support 7 Open source and free to use 7 ■ Thorough documentation 7 Powerful theming mechanism 7 ■ Emphasis on accessibility 8 Stable and maintenance friendly 9 1.3 The limitations of jQuery UI 9 Lack of widgets 9 ■ jQuery UI and mobile devices 10 1.4 Getting started with the library 11 Versions of the library 11 ■ Downloading from the jQuery UI website 11 ■ Downloading from CDNs 12 1.5 The first example 12 Licensed to tracy moore <nordick.an@gmail.com>
- 13. CONTENTS viii 1.6 Using anonline testing tool 15 1.7 Summary 17 2 Enhancing UIs with widgets 18 2.1 Creating widgets 19 2.2 Customizing widgets with options 20 2.3 Modifying widgets with methods 24 Invoking methods 24 ■ Using option() to modify widgets 27 Using dialogs to edit lists 28 2.4 Responding to widget changes with events 31 Subscribing to widget events 32 ■ Event handlers vs. callbacks 34 ■ Event parameters 35 2.5 Summary 39 PART 2 JQUERY UI CORE.................................................41 3 Building complex web forms with jQuery UI 43 3.1 The challenges of building modern web forms 44 3.2 Autocomplete: suggesting input options to users 46 Using local data 47 ■ Loading from a remote source 49 Using autocomplete with third-party services and APIs 52 3.3 Button: enhancing native buttons, inputs, and links 55 3.4 Selectmenu: enhancing native <select> elements 59 3.5 Datepicker: selecting dates from a pop-up calendar 62 Parsing and formatting dates 64 ■ Handling date globalization 67 3.6 Spinner: enhancing native <input> elements to collect numeric data 69 3.7 Completing the appointment form 71 3.8 HTML5 elements vs. jQuery UI widgets 74 3.9 Summary 76 4 Enhancing interfaces with layout and utility widgets 77 4.1 Accordion: creating toggleable content panels 78 Configuring the accordion widget 79 ■ Adding and removing panels 81 Licensed to tracy moore <nordick.an@gmail.com>
- 14. CONTENTS ix 4.2 Tabs:toggling between content areas 82 Loading remote content 83 ■ Loading movie information in a tabs widget 83 4.3 Menu: creating web menus with semantic markup 88 4.4 Dialog: displaying content in a pop-up container 91 4.5 Progressbar: displaying the progress of a task 94 4.6 Slider: selecting a value using moveable handles 97 Building range sliders 98 ■ Adding a font size range 99 4.7 Tooltip: enhancing native tooltips with a customizable control 101 Using custom tooltip content 103 ■ Displaying a preview in a tooltip 104 4.8 Summary 106 5 Adding interaction to your interfaces 107 5.1 Draggable: allowing users to move elements 108 5.2 Droppable: creating containers that accept draggables 110 Building a drag-and-drop game 110 ■ Building a shopping cart 114 5.3 Sortable: rearranging elements in a list 118 Building connected lists 121 ■ Building a fruit and vegetable sorting game 121 5.4 Resizable: allowing users to change the size of elements 125 Using custom resize handles 126 ■ Building an appointment scheduler 127 5.5 Selectable: allowing users to select elements from a group 130 5.6 Creating multidevice interactions: the importance of touch 132 Why doesn’t jQuery UI support touch events? 132 ■ Introducing jQuery UI Touch Punch 133 5.7 Summary 134 6 Creating rich animations with effects 135 6.1 Using effects and the effect() method 136 Customizing effects with easings 138 ■ Making visual associations with the transfer effect 140 Licensed to tracy moore <nordick.an@gmail.com>
- 15. CONTENTS x 6.2 Animating visibilitychanges 142 Building form validation messages 142 ■ Building portlets with jQuery UI 144 6.3 Using effects with the jQuery UI widgets 147 The show and hide options 147 ■ Showing a message in a dialog 148 6.4 Animating CSS class name changes 151 Enhancing addClass(), removeClass(), and toggleClass() 151 Building an off-canvas navigation menu for mobile 153 6.5 Effects vs. CSS3 animations and transitions 156 CSS3 transitions vs. the jQuery UI class name methods 156 ■ CSS animations vs. effects 158 6.6 Summary 161 7 Theming and styling applications with jQuery UI 162 7.1 Using built-in and custom themes 163 7.2 Using the jQuery UI CSS framework to customize applications 166 Styling widget containers 167 ■ Styling interaction states 168 Styling interaction cues 169 ■ Building a styled confirmation dialog 172 7.3 Styling with widget class names 174 Building vertical tabs 176 ■ Building a mobile-friendly datepicker 178 ■ Adding arrows to tooltips with CSS 179 7.4 Summary 181 PART 3 CUSTOMIZATION AND ADVANCED USAGE ..................183 8 Using the widget factory to build stateful plugins 185 8.1 Building a widget 186 Constructing widgets with $.widget() 187 ■ Choosing a markup structure 189 ■ Overriding _create() to initialize widgets 190 ■ Making widgets themeable 193 ■ Listening for events with _on() 195 8.2 Customizing widgets with options, methods, and events 196 Making widgets configurable with options 197 ■ Changing the widget’s state with methods 200 ■ Triggering widget events with _trigger() 202 Licensed to tracy moore <nordick.an@gmail.com>
- 16. CONTENTS xi 8.3 Enabling,disabling, and destroying widgets 205 Enabling and disabling a widget 205 ■ Undoing a widget’s effects with _destroy() 207 8.4 Summary 212 9 Extending widgets with the widget factory 213 9.1 Building widget extensions 214 Changing existing and adding new options to a widget 214 Redefining widgets with the widget factory 218 ■ Extending a custom widget 220 9.2 Customizing widgets with extension points 225 Using undocumented extension points 227 ■ Adding your own extension points 230 9.3 Extending the datepicker widget 231 Building a mobile-friendly datepicker extension 234 9.4 Summary 236 10 Preparing your application for production 238 10.1 The problem with third-party CDNs 239 10.2 Downloading jQuery UI from Download Builder 241 10.3 Managing JavaScript dependencies with AMD 243 Setting up RequireJS for development 245 ■ Loading jQuery UI components with RequireJS 246 10.4 Building your application’s assets with the optimizer 249 Optimizing JavaScript assets 249 ■ Optimizing CSS dependencies 251 10.5 Supporting AMD in custom widgets 254 10.6 Summary 257 11 Building a flight-search application 259 11.1 Structuring your application 260 11.2 Collecting user input 261 Building an airport code autocomplete 263 ■ Polyfilling HTML5 inputs with jQuery UI 265 ■ Validating user input with HTML5 268 11.3 Connecting to a RESTful API 271 Looking up flights with $.ajax() 271 ■ Parsing XML with jQuery 272 Licensed to tracy moore <nordick.an@gmail.com>
- 17. CONTENTS xii 11.4 Displaying theresults on the screen 274 Storing and resolving templates with RequireJS 276 ■ Showing a processing indicator while data loads 277 11.5 Adding a responsive design 279 11.6 Preparing the application for production 283 11.7 Getting the optimal performance with almond 284 11.8 Summary 286 12 Under the hood of jQuery UI 287 12.1 Positioning elements with the position utility 287 Building a UI walkthrough with the position utility and dialog widget 290 ■ Handling collisions elegantly 293 ■ Controlling the collision detection 295 12.2 Using the utility functionality in jQuery UI Core 297 Generating unique ids 297 ■ Using key code constants 299 12.3 Accessing and managing widget instances 300 Detecting widget instances with :data() 301 12.4 Advanced widget prototype methods and properties 302 A widget’s prototype chain explained 303 ■ Using a widget’s default element to streamline initialization 305 ■ Supporting embedded-window use in widgets 307 ■ Displaying elements with _show() and _hide() 308 ■ Customizing options on the fly 310 12.5 Using autoinitialization to remove boilerplate code 311 How jQuery Mobile’s autoinitialization works 312 ■ jQuery Mobile’s widget extension 314 ■ Autoinitializing jQuery UI widgets 315 12.6 Summary 318 appendix A Learning jQuery 319 appendix B How jQuery UI tests jQuery UI 325 appendix C Using jQuery UI with Backbone 332 appendix D Creating decimal, currency, and time pickers with Globalize 337 appendix E Contributing to jQuery UI 343 appendix F Polyfilling HTML5 with jQuery UI 348 index 355 Licensed to tracy moore <nordick.an@gmail.com>
- 18. xiii foreword jQuery has takenthe web development community by storm. It has done this by build- ing an API that is approachable for designers and new developers while simultane- ously providing the power and extensibility desired by the most advanced and experienced developers. jQuery is easy to learn, easy to extend, and paves over browser differences, making it the go-to choice for millions of developers. jQuery UI takes the same philosophies used to build jQuery and applies them to var- ious aspects of UI creation. Building elegant interfaces with powerful, customizable widgets should be just as easy as showing and hiding elements. jQuery UI delivers on this promise while addressing often ignored issues such as accessibility and extensibility. jQuery UI has built a solid base over the past seven years and the number of users is growing steadily. But the web is evolving at a rapid pace and new JavaScript libraries and UI toolkits are popping up left and right. Choosing the right tools for your next project can be quite daunting. jQuery UI in Action shows how to leverage jQuery UI to quickly build an application or just add an extra touch of interaction on an existing page. This book will serve as a fantastic resource for anyone interested in getting started with jQuery UI. As always, TJ has done a great job of walking through tasks in detail and pointing out potential pitfalls. TJ’s dedication and desire to help others has been an invaluable asset, not just to jQuery UI, but to the web development community as a whole. I’m sure you’ll feel the same way after reading this book. SCOTT GONZÁLEZ PROJECT LEAD, JQUERY UI Licensed to tracy moore <nordick.an@gmail.com>
- 19. Licensed to tracymoore <nordick.an@gmail.com>
- 20. xv preface In 2013 Manningcontacted me about writing a book on jQuery UI. Because I had been an enthusiastic user of the library for five years, and had been a member of the jQuery team for approximately two years, I had a lot of experience and knowledge that I wanted to share with the world. I said Yes! From the start, I made it clear that I wanted to take a different tack with this book: rather than reprinting the library’s API documentation in a book, which is something I think far too many tech books do, I wanted to write about how to use the jQuery UI components in real-world usage scenarios and applications. I also wanted to tackle the tough questions for jQuery UI users. Why should you use the jQuery UI datepicker instead of the native date picker included in HTML5? How do you use jQuery UI on mobile devices, especially in low bandwidth situations? From start to finish the book took about a year and a half to complete, and although it was an exhausting amount of work, I’m extremely happy with the result. jQuery UI is a stable library that helps you write robust, accessible, and cross-browser friendly web applications today. This book represents my attempt to share the knowl- edge I’ve gained from building countless projects with jQuery UI, and from working as a member of the jQuery team. I hope you enjoy it. Licensed to tracy moore <nordick.an@gmail.com>
- 21. xvi acknowledgments I never thoughtthat I would be writing one of these … I feel like I’m at the Oscars or something. Although I hate to list specific names, as it will force me to exclude people I should thank and it’ll be totally awkward the next time I see them, I’ll do it anyway … otherwise this section would be kind of boring. I’ll start with Scott González, who brought me into the jQuery project, walked me through countless jQuery concepts, and has always been around to help with any problem I run into. In addition to helping me with all things jQuery UI over the last few years, Scott also contributed the foreword to this book. Next I’ll thank Jörn Zaefferer, whose expertise has made me a better developer during my time with jQuery UI. I asked Jörn to perform the technical review of this book because I felt he was the most qualified person for the job (he is the original author of a good chunk of the jQuery UI source), and I wasn’t disappointed. The book is unquestionably better because of Jörn. The entire jQuery UI team has either directly or indirectly helped make this book a reality, so I’d also like to thank Kris Borchers, Felix Nagel, Corey Frang, Mike Sherov, Rafael Xavier, and Alexander Schmitz. The people at Manning have been great through the long and arduous process of writing a technical book. My development editor, Sean Dennis, not only provided great feedback throughout, but also took care of managing the various tedious pro- cesses involved in writing and publishing a book. Robin de Jongh was the one who asked me to write this book and was a great guy to talk to throughout the process. Without him there would be no book. Licensed to tracy moore <nordick.an@gmail.com>
- 22. ACKNOWLEDGMENTS xvii The followingpeer reviewers also provided invaluable insights, reading the manu- script a number of times during its development and I’d like to acknowledge them here: Linda Carver, A. Krishna Chaitanya, Alain Couniot, Jürgen De Commer, Dave Corun, Cole Davisson, Mark Elston, Peter Empen, Ed Griebel, Al Scherer, Natalia Stavisky, Philip Taffet, and Gregor Zurowski. But without question, the lion’s share of thanks goes to my beautiful and talented significant other, Trish. In addition to providing desperately needed moral support throughout the harrowing journey that was the writing of this book, Trish also helped shape the structure and flow of the chapters with her own development expertise (as well as her brutally honest criticism). And because she has a wizard-like ability to bend CSS to her will, she may even have had her hand in the book’s examples directly. Thank you, Trisha. I love you. Licensed to tracy moore <nordick.an@gmail.com>
- 23. xviii about this book jQueryUI in Action’s primary purpose is to teach you how to use the jQuery UI library to build rich, user-friendly web applications. The book starts with the basics of creat- ing and modifying widgets, and moves on to a series of complex examples, such as building widgets from scratch, optimizing your applications for production, and even building a complete flight-search application. This book assumes that you have basic knowledge of CSS, JavaScript, and jQuery. If you’re not an expert don’t despair—when intermediate- and advanced-level concepts are brought up, they’re explained. If you’re finding yourself a bit overwhelmed, appendix A discusses resources for getting up to speed. On the flip side, if you’re an expert don’t despair either. You’ll build a number of real-world examples and discuss advanced aspects of the library throughout the book. Roadmap This book is organized into three parts. Part 1 provides an introduction to jQuery UI. Chapter 1 introduces the library itself, with an explanation of what is in the library, what the library does well, and what it doesn’t do well. Chapter 2 explains the ins and outs of widgets, the core building blocks of jQuery UI. Part 2 walks through the core components of jQuery UI, starting with its widgets. Chapter 3 introduces the five jQuery UI form widgets, uses them to build a complete form, and compares the widgets to their HTML5 counterparts. Chapter 4 discusses the three jQuery UI layout widgets and the four utility widgets. Chapter 5 introduces the Licensed to tracy moore <nordick.an@gmail.com>
- 24. ABOUT THIS BOOKxix five interaction widgets, and uses them to build a series of real-world interfaces, as well as a few games. Chapter 6 contains a thorough discussion of the jQuery UI effects and chapter 7 explains everything about jQuery UI themes. Part 3 builds upon the core knowledge taught in part 2 to show a series of advanced topics. Chapter 8 shows how to build your own widgets from scratch, using the same mechanism jQuery UI uses. Chapter 9 shows how to customize the behavior of any widget using widget extensions. Chapter 10 teaches how to prepare a jQuery UI application for production usage, including applying several performance optimiza- tions. Chapter 11 builds upon all this knowledge to explain how to build a complete flight-search application. And finally, chapter 12 looks under the hood of the library, to show the tools that jQuery UI uses to make jQuery UI work. There are 6 appendixes. Appendix A covers the best ways to learn jQuery. How jQuery UI tests its own widgets (jQuery UI tests jQuery UI!) is the focus of appendix B. Appendix C focuses on using jQuery UI with Backbone. Appendix D is about global- ization. Ways to contribute to jQuery UI are explained in appendix E, and polyfilling HTML5 with jQuery UI is touched on in appendix F. Code conventions jQuery UI in Actionprovides copious examples that show how you can make use of each of the topics covered. Source code in listings or in text appears in a fixed-width font like this to separate it from ordinary text. In addition, class and method names, object properties, and other code-related terms and content in text are presented using the same fixed-width font. Code annotations accompany many of the listings, highlighting important con- cepts. In some cases, numbered cueballs link to additional explanations that follow the listing. Getting the source code You can access the source code for all examples in the book from the publisher’s website atwww.manning.com/jQueryUIinAction.Allsourcecodefortheprojectisalsohostedat GitHub, a commercial Git hosting firm, at https://github.com/tjvantoll/jquery-ui-in- action-demos. We will maintain the current URL via the publisher’s website. The source is maintained by chapter, so, for example, you can download /source-code/ch06 and you will have a full copy of the source code up to that point in the book. Author Online Purchase of jQuery UI in Action includes free access to a private web forum run by Man- ning Publications where you can make comments about the book, ask technical ques- tions, and receive help from the author and from other users. To access the forum and subscribe to it, point your web browser to www.manning.com/jQueryUIinAction. This page provides information on how to get on the forum once you’re registered, what kind of help is available, and the rules of conduct on the forum. Licensed to tracy moore <nordick.an@gmail.com>
- 25. ABOUT THIS BOOK xx Manning’scommitment to our readers is to provide a venue where a meaningful dialog between individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the author, whose contribution to the AO forum remains voluntary (and unpaid). We sug- gest you try asking the author some challenging questions lest his interest stray! The Author Online forum and the archives of previous discussions will be accessi- ble from the publisher’s website as long as the book is in print. About the author TJ VanToll is a developer advocate for Telerik and a jQuery team member. He has over a decade of web development experience— specializing in performance and the mobile web. TJ speaks about his research and experiences at conferences around the world, and has written for publications such as Smashing Magazine, HTML5 Rocks, and MSDN Magazine. Licensed to tracy moore <nordick.an@gmail.com>
- 26. xxi about the coverillustration The figure on the cover of jQuery UI in Action is captioned a “Man from Imotski, Croa- tia.” The illustration is taken from the reproduction, published in 2006, of a nine- teenth-century collection of costumes and ethnographic descriptions entitled Dalmatia by Professor Frane Carrara (1812–1854), an archaeologist and historian, and the first director of the Museum of Antiquity in Split, Croatia. The illustrations were obtained from a helpful librarian at the Ethnographic Museum (formerly the Museum of Antiquity), itself situated in the Roman core of the medieval center of Split: the ruins of Emperor Diocletian’s retirement palace from around AD 304. The book includes finely colored illustrations of figures from different regions of Dalma- tia, accompanied by descriptions of the costumes and of everyday life. Imotski is a small town situated on the northern side of the Biokovo massif in the Dalmatian hinterland, close to the border of Croatia with Bosnia-Herzogovina. The man on the cover is wearing an embroidered vest over a white linen shirt and white woolen trousers, a suede jacket is thrown over his shoulder, and he is carrying a musket. The rich and colorful embroidery on his costume is typical for this region of Croatia. Dress codes have changed since the nineteenth century, and the diversity by region, so rich at the time, has faded away. It is now hard to tell apart the inhabitants of different continents, let alone different towns or regions. Perhaps we have traded cultural diversity for a more varied personal life—certainly for a more varied and fast- paced technological life. Licensed to tracy moore <nordick.an@gmail.com>
- 27. ABOUT THE COVERILLUSTRATION xxii At a time when it is hard to tell one computer book from another, Manning cele- brates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional life of two centuries ago, brought back to life by illustrations from collections such as this one. Licensed to tracy moore <nordick.an@gmail.com>
- 28. Part 1 Meet jQueryUI These first two chapters serve as an introduction to jQuery UI. As you’ll learn in chapter 1, jQuery UI is a collection of plugins and utilities that build on jQuery, supported by the jQuery Foundation. You can count on them to be offi- cially supported and maintained throughout the life of your application. In chapter 1 you’ll learn about the library itself—what’s in it, who maintains it, what it does well, and even what it doesn’t do well. In chapter 2 you’ll build on that knowledge to learn the ins and outs of wid- gets, the core building blocks of jQuery UI. The focus here is on three mecha- nisms the widget factory provides for customization: options, methods, and events. Options are configurable properties of widgets, methods let you perform actions on widgets, and events let you to respond to changes on the widgets. What you learn about the library, and about the jQuery UI widgets, will give you the foundation you need to build more complex interfaces in part 2. Licensed to tracy moore <nordick.an@gmail.com>
- 29. Licensed to tracymoore <nordick.an@gmail.com>
- 30. 3 Introducing jQuery UI Let’stake a trip back to early 2006. The term AJAX had been coined, the second beta of Internet Explorer 7 was released, and John Resig announced a small library he called jQuery. jQuery would soon become wildly popular, thanks in part to how easy it was to extend its core functionality through plugins. Months passed, and thousands of plugins were created by the jQuery commu- nity. Although the abundance of plugins provided variety, they were scattered around the internet, had inconsistent APIs, and often had little or no documenta- tion. Because of these problems, the jQuery team wanted to provide an official set of plugins in a centralized location. In September 2007 they created a new library with these plugins—jQuery UI. From a high level, jQuery UI was, and still is, a collection of plugins and utilities that build on jQuery. But dig deeper and you find a set of consistent, well- documented, themeable building blocks to help you create everything from small websites to highly complex web applications. This chapter covers ■ What jQuery UI includes ■ Whether jQuery UI is for you ■ How to get started using the library Licensed to tracy moore <nordick.an@gmail.com>
- 31. 4 CHAPTER 1Introducing jQuery UI Unlike jQuery plugins, the plugins and utilities in jQuery UI are supported by the jQuery Foundation. You can count on them to be officially supported and maintained throughout the life of your application. The stability and ease of use of jQuery UI led to continuous growth in the library’s popularity. The library is now used in 19% of the top 10,000 sites on the web, and has been incorporated into WordPress core and Drupal. In this book you’ll learn how to use the pieces of jQuery UI to create powerful and interactive websites and applications. In this chapter you’ll start by taking a thorough look at what the jQuery UI library is, why you’d want to use it, and how to download the library and get it up and running. Let’s get started! 1.1 What is in jQuery UI? The plugins and utilities in jQuery UI are divided into four categories—widgets, inter- actions, effects, and utilities (the structure of the library is presented in figure 1.1): ■ Widgets are jQuery plugins used to create UI elements such as datepickers and menus. As of version 1.11, the library has 12 widgets, shown in figure 1.2. The widgets in jQuery UI adhere to the library’s CSS framework, and therefore have a consistent look and feel. We’ll cover the jQuery UI widgets in chapters 2, 3, and 4 and the CSS framework in chapter 7. ■ Interactions are jQuery plugins that give the user the ability to interact with DOM elements. The draggable interaction allows users to drag elements around the screen, and the sortable interaction allows users to sort items in a list. We’ll cover interactions in chapter 5. ■ Effects are a full suite of custom animations and transitions for DOM elements. They’re built on the animations provided in jQuery Core, and enhance a number of Core’s methods such as show() and hide(). We’ll cover effects in chapter 6. ■ Utilities are a set of modular tools the library uses internally. The widget factory is the mechanism all jQuery UI widgets are built with; we’ll cover it in chapters 8 and 9. The position utility provides an easy and precise means of positioning elements on the screen. We’ll cover position and the rest of the utilities in jQuery UI in chapter 12. Who is this book for? This book assumes that you have basic knowledge of CSS, JavaScript, and jQuery. If you’re not an expert don’t despair—when intermediate- and advanced-level concepts are brought up, they’re explained. If you’re finding yourself a bit overwhelmed, appen- dix A discusses resources for getting up to speed. On the flip side, if you’re an expert don’t despair either. We’ll build a number of real-world examples and discuss ad- vanced aspects of the library throughout the book. Licensed to tracy moore <nordick.an@gmail.com>
- 32. 5 What is injQuery UI? The pieces of jQuery UI work well together, but they were also designed with modular- ity in mind. Although the widget factory and position utility are heavily used in the library, they’re also standalone plugins that can be used outside of jQuery UI; their only dependency is jQuery Core. Now that we’ve seen what jQuery UI includes, let’s see what jQuery UI can be used for, and how it might be a good fit for your next project. Interactions Widgets Effects Utilities Autocomplete Button Accordion Tooltip Tabs Spinner Slider Progressbar Menu Dialog Datepicker Sortable Selectable Resizable Droppable Draggable :focusable :data :tabbable Widget factory Position Bounce Blind Clip Color Drop Explode Fade Fold Highlight Puff Pulsate Scale Shake Size Slide Transfer Selectmenu Figure 1.1 The pieces of the jQuery UI library, categorized into widgets, interactions, utilities, and effects Who is jQuery UI? Development on jQuery UI (as well as all jQuery projects) is coordinated by the jQuery Foundation—a nonprofit association funded by community contributions of time and money. The jQuery UI team is a group of eight individuals (I am one of them) scattered throughout the world. I became enthralled with jQuery UI after I discovered the amaz- ing number of things the library could do with a small amount of code. I started sub- mitting bug fixes and documentation and haven’t looked back. I hope you become as excited about the library as I am. The jQuery UI project is pri- marily community and volunteer driven, and there’s always plenty to do! Licensed to tracy moore <nordick.an@gmail.com>
- 33. 6 CHAPTER 1Introducing jQuery UI 1.2 The benefits of using jQuery UI Any website or application that uses jQuery almost certainly has a use for jQuery UI. jQuery Core is powerful, but it’s a small library that doesn’t do everything you need to build modern web applications. If you’ve been frustrated by searching the internet and piecing together jQuery plugins, then jQuery UI provides an appealing alterna- tive. Let’s look at the advantages of using the library. 1.2.1 Cohesive and consistent APIs Because jQuery plugins have different authors, they often have wildly inconsistent APIs. jQuery UI has also faced this problem. The jQuery UI library started as a collec- tion of popular plugins by numerous authors with a variety of programming styles. This resulted in years of refactoring to present a consistent API to end users. Autocomplete Button Accordion Tooltip Tabs Spinner Slider Progressbar Menu Dialog Datepicker Selectmenu Figure 1.2 An exam- ple of all 12 jQuery UI widgets. Because of the jQuery UI CSS framework, each wid- get has a consistent look. Licensed to tracy moore <nordick.an@gmail.com>
- 34. 7 The benefits ofusing jQuery UI Throughout the process, common patterns emerged and were abstracted into utili- ties like the widget factory. Because jQuery UI provides consistent APIs, users can move from one part of the library to another without constantly needing to refer to online documentation. 1.2.2 Comprehensive browser support When using jQuery UI, you can feel confident that your code works in all major brows- ers. As of version 1.11, jQuery UI supports Internet Explorer versions 7 and up, as well as the latest two versions of Chrome, Firefox, Safari, and Opera. With jQuery UI, you write your code once and it runs everywhere. NOTE Internet Explorer 6 support was dropped in version 1.10 of jQuery UI due to low global usage. If you still need Internet Explorer 6 support, you can use version 1.9 of jQuery UI. 1.2.3 Open source and free to use Everything in jQuery UI is open source. The library’s source files are publicly available at https://github.com/jquery/jquery-ui. Not only are the source files open source but the project’s home page and API documentation are as well (see https://github.com/ jquery/jqueryui.com and https://github.com/jquery/api.jqueryui.com, respectively). All development is done in the open, and the community is encouraged to partici- pate. If you find a bug in the library, you can submit a patch for it. If you’re confused by the documentation, you can ask for clarification. If you find a typo, you can submit a patch that fixes it. The development of all jQuery projects is community driven, and contributions are always welcome. For more information on contributing to jQuery, see appendix E. jQuery UI is also free. The use of jQuery UI (and all jQuery projects) is under the terms of the MIT license. All jQuery projects are free to use in any project (including commercial ones), as long as the copyright headers are preserved. 1.2.4 Thorough documentation One of the major pain points with jQuery plugins is the difficulty of finding up-to-date and accurate documentation. All pieces of jQuery UI are thoroughly and consistently docu- mented at http://api.jqueryui.com/. By default, the APIs for the latest version are shown, but previous versions are available as well. For example, http://api.jqueryui.com/1.10/ shows the APIs for 1.10 and http://api.jqueryui.com/1.9/ shows the APIs for 1.9. 1.2.5 Powerful theming mechanism Another challenge of working with plugins is creating a consistent look. Although some plugins provide a way to theme the elements they create, the conventions used are often wildly different. jQuery UI solves this with a CSS framework that all its wid- gets use; therefore, all widgets look the same out of the box, but you still have the flex- ibility to create your own custom look and feel. Licensed to tracy moore <nordick.an@gmail.com>
- 35. 8 CHAPTER 1Introducing jQuery UI To make this process easier, the jQuery UI ThemeRoller allows you to visually play with the widgets’ displays and generate a CSS file with your theme. Not a designer? No wor- ries. jQuery UI also provides 24 themes you can use or build on top of. ThemeRoller is available at http://jqueryui.com/themeroller/ and is shown in figure 1.3. 1.2.6 Emphasis on accessibility Accessibility is an important consideration when building anything for the web, but making even simple applications accessible to all audiences can be a difficult task. Documentation is scarce, screen readers can be tricky to test on, and specifications such as Accessible Rich Internet Applications (ARIA) can be complex and difficult to understand. All jQuery UI widgets are designed with accessibility in mind. You can add widgets to your site and feel confident that everyone can use them. The jQuery UI widgets are keyboard accessible, use ARIA roles appropriately, and use proper markup to optimize user experiences on screen readers. Configure styles for your custom theme. Start with one of jQuery UI’s 24 preconfigured themes. Download jQuery UI with your custom theme. The preview area updates as styles are changed. Figure 1.3 Using jQuery UI ThemeRoller, you can configure a custom theme by playing with CSS prop- erties and seeing their effect on the jQuery UI widgets live. Licensed to tracy moore <nordick.an@gmail.com>
- 36. 9 The limitations ofjQuery UI NOTE ARIA is a technical specification published by the World Wide Web Consortium (W3C). It aims to improve the accessibility of web pages—specifi- cally pages with dynamic content and UI components. It specifies a number of HTML attributes that can be applied to elements to help assistive technologies such as screen readers interpret web pages. 1.2.7 Stable and maintenance friendly Because jQuery UI is maintained by the jQuery Foundation, the library is updated as new versions of jQuery Core and browsers are released. Although using the latest ver- sion of the library is encouraged, the jQuery UI team realizes the difficulty of upgrad- ing large and complex applications. Therefore, two versions of the library are maintained simultaneously. Fixes made to the latest stable release can be incorporated in the previous legacy release. APIs are never removed from the library without being deprecated for a full major release. To help with upgrading, a detailed guide is published with each major release of the library. The upgrade guide for 1.11 is at http://jqueryui.com/upgrade-guide/1.11/, and the upgrade guide for 1.10 is at http://jqueryui.com/upgrade-guide/1.10/. A changelog, listing every change—including bug fixes—made to the library in that release, is also produced. The changelog for 1.11.0 is at http://jqueryui.com/ changelog/1.11.0/, and the changelog for 1.10.4 is at http://jqueryui.com/ changelog/1.10.4. Now that you know why you’d want to use jQuery UI, let’s discuss why you might not want to use the library. 1.3 The limitations of jQuery UI Although jQuery UI solves a lot of problems, it doesn’t solve everyone’s. The library receives two main complaints: it doesn’t have enough widgets, and it’s not optimized for mobile. Let’s deal with each of these. 1.3.1 Lack of widgets As of version 1.11, jQuery UI has 12 widgets. Although these widgets are in the library because they solve common UI problems, 12 widgets certainly don’t solve every UI problem that even a small company encounters. Fortunately, you can use jQuery UI alongside community and commercially written jQuery plugins. Many third-party plugins use portions of jQuery UI, such as the widget factory and the CSS framework, to provide a consistent API and a consistent theme. If you can’t find a widget to meet your needs, it’s easy to build your own with jQuery UI. We’ll discuss how to build custom widgets using the widget factory in chap- ter 8. Finally, all jQuery UI widgets are built with extensibility in mind. You can make sub- tle alterations to the library’s widgets or build completely new widgets on top of them easily. We’ll discuss extending jQuery UI widgets in chapter 9. Licensed to tracy moore <nordick.an@gmail.com>
- 37. 10 CHAPTER 1Introducing jQuery UI 1.3.2 jQuery UI and mobile devices The other major complaint about jQuery UI is that the library isn’t optimized for mobile devices. The primary issues cited are the lack of touch-event support, the dis- play of the widgets, and the size of the library. Let’s tackle each of these individually: ■ Touch-event support—As of version 1.11, jQuery UI doesn’t natively support touch events. By default, some widgets and interactions don’t work on mobile brows- ers such as iOS Safari or Chrome for Android. But a workaround is available until true support for touch events comes in a future release. We’ll discuss the issues with touch events, how to get jQuery UI to work with them, and future plans for true support when we discuss interactions in chapter 5. ■ Display of widgets—The look and feel of jQuery UI widgets are more suited for desktop browsers than mobile ones. To address this, the jQuery UI team is work- ing with the jQuery Mobile team to build widgets that look good on all screen sizes. In the meantime, because all jQuery UI widgets conform to the jQuery UI CSS framework, it’s easy to adjust the display of all widgets to meet your needs. We’ll discuss the jQuery UI CSS framework, along with specific mobile consider- ations, in chapter 7. ■ Size of the library—File size is important for any client-side library, especially on mobile devices where connection speed can be limited and latency is frequently high. jQuery UI is a large library with many components, and the full library is a lot to download. But jQuery UI is modularly written, so it’s easy to create a build with only the pieces of the library that you need. Although creating a custom build is important for any site or application, it’s vital if you’re targeting mobile devices. We’ll discuss custom builds in chapter 10. If you’re building a site or application that solely targets mobile devices, you should consider a mobile-centric framework like jQuery Mobile. But if you’re building for desktop and mobile, you can still get all the benefits of jQuery UI with a few tweaks to optimize the mobile experience, which we’ll discuss throughout the book. Now that we’ve looked at the advantages and limitations of jQuery UI, let’s look at how to use it. jQuery UI vs. jQuery Mobile jQuery Mobile is a UI framework that creates experiences that work on all devices. Like jQuery UI, jQuery Mobile is a series of widgets and utilities built on jQuery Core. In fact, jQuery Mobile includes the jQuery UI widget factory and uses it to create all its widgets. Because of the similarity in the two frameworks, the teams are working to merge the common pieces of the projects. The end goal is a single set of widgets that work on any device. As a first step, jQuery Mobile’s 1.4 release included the jQuery UI tabs widget.ThiscollaborationcontinuouslyimprovesthemobiledevicesupportinjQueryUI. Licensed to tracy moore <nordick.an@gmail.com>
- 38. 11 Getting started withthe library 1.4 Getting started with the library You can get a copy of jQuery UI two ways: download the library from http:// jqueryui.com/ or retrieve the files from a content delivery network (CDN). You’ll learn about each of these options, but first you need to decide what version of the library to use. 1.4.1 Versions of the library In this book we’ll cover version 1.11 of jQuery UI. The final position in the version number (1.11.1, 1.11.2, and so on) is reserved for bug fix releases. Because breaking changes are never introduced in bug fix releases, you can use any release in the 1.11 series with the examples in this book. The code examples explicitly use 1.11.0, but the latest bug fix release in the 1.11 series is recommended. 1.4.2 Downloading from the jQuery UI website The first of the two options is downloading the library from http://jqueryui.com. There you’ll find the download section shown in figure 1.4. What’s new in jQuery UI 1.11? The two main features of jQuery UI 1.11 are a new widget, selectmenu, and complete Asynchronous Module Definition (AMD) support to use for dependency management. Selectmenu is an accessible, customizable, and themeable replacement for the na- tive <select> element. You’ll learn how to use selectmenu, as well as the other wid- gets jQuery UI provides for building forms, in chapter 3. AMD allows you to create highly customized builds of jQuery UI so that users download only the portion of the library that they need. We’ll look at AMD when we discuss custom builds and preparing the library for production in chapter 10. Build a custom download with Download Builder. Download the full latest release. Download the previous major release. jQuery Core dependency. Figure 1.4 The download prompt on http://jqueryui.com. You can download the latest stable or lega- cy releases of jQuery UI, or visit Download Builder to create a cus- tom build. Licensed to tracy moore <nordick.an@gmail.com>
- 39. 12 CHAPTER 1Introducing jQuery UI Let’s look at each element of the download prompt: ■ Build a custom download with Download Builder—The Custom Download button links to the jQuery UI Download Builder. Download Builder allows you to create a custom build that includes only the portions of the library that you need. This is ideal for production, as you want users to download only the portions of the library they need. For development, it’s convenient to have the entire library available, and therefore you won’t build a custom download for now. You’ll build a production version of the library in chapter 10. ■ Download the latest release—The quick downloads are links to zip files containing all the files in the library. The Stable button links to a zip file with the files for the latest released version. ■ Download the previous major release—The Legacy button links to a zip file with all the library’s files, but for the previous major version of the library (recall that two versions are maintained simultaneously). ■ jQuery Core dependency—To aid users in upgrading, jQuery UI maintains compat- ibility with multiple versions of jQuery Core. Both versions 1.10.x and 1.11.x can be used with any version of jQuery Core 1.6 or higher. The zip files downloaded using the Stable or Legacy buttons contain every file you need, including all dependencies. Although it’s helpful to have all these files when preparing an application for production, it can be overwhelming when getting started. There’s an easier way to get the library up and running. 1.4.3 Downloading from CDNs A content delivery network (CDN) is a network of servers designed to serve files to users. Using a CDN moves the responsibility of hosting files from your own servers to a series of external ones. The jQuery Foundation, Google, and Microsoft all provide CDNs that host jQuery Core as well as jQuery UI. You can find documentation and a full listing of the libraries each host provides at the following URLs: ■ jQuery—http://code.jquery.com/ ■ Google—https://developers.google.com/speed/libraries/devguide ■ Microsoft—http://www.asp.net/ajaxlibrary/cdn.ashx Because a CDN doesn’t require you to host your own version of jQuery and jQuery UI, it’s perfect for demos and experimentation. You’ll use CDN versions of the library throughout this book. Next, you’ll learn how to take these files from a CDN and get them on a web page. 1.5 The first example You’ve seen how to download jQuery UI. Now let’s see how you can use it. You need to build an HTML page that includes jQuery Core, jQuery UI’s CSS, and jQuery UI’s JavaScript. Licensed to tracy moore <nordick.an@gmail.com>
- 40. 13 The first example Allexamples in this book use the same boilerplate HTML using jQuery’s CDN (http://code.jquery.com) to download all jQuery files. The boilerplate is shown in the following listing. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>First Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> </head> <body> <!—- Your HTML here --> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <!—- Your JavaScript here --> </body> </html> The placement of the style sheet and scripts is important. Style sheets are placed in the <head> of the document so that HTML elements in the <body> are styled as they’re rendered. When style sheets are placed after elements in the <body>, the user may experience a flash of unstyled content (FOUC). In this case, elements are rendered without styling, and subsequently enhanced after the style sheet is downloaded and parsed by the browser. Conversely, scripts are placed last in the <body>, after any HTML the page needs. This is done for two reasons. First, if something were to go wrong with the download, parsing, or execution of the script, or if the user had JavaScript disabled, the content of the web page would still be available to the user. Second, because the scripts are at the end of the page, any JavaScript you write doesn’t depend on whether the DOM is ready. The examples in this book assume that the boilerplate shown in listing 1.1 is in place, and the <!—Your HTML here --> and <!—Your JavaScript here --> comments indicate where you insert content. Here’s an example of a jQuery UI datepicker: <input id="datepicker"> <script> $( "#datepicker" ).datepicker(); </script> Listing 1.1 Boilerplate for examples An HTML5 doctype. jQuery Core and UI only support standards mode. This doctype puts all browsers in standards mode. Import version 1.11.0 of jQuery UI’s style sheet from jQuery’s CDN. Import version 1.11.1 of jQuery Core from jQuery’s CDN. Import version 1.11.0 of jQuery UI’s JavaScript from jQuery’s CDN. Licensed to tracy moore <nordick.an@gmail.com>
- 41. 14 CHAPTER 1Introducing jQuery UI The following listing shows the example after the datepicker code has been inserted into the boilerplate. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>First Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/ smoothness/jquery-ui.css"> </head> <body> <input id="datepicker"> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <script> $( "#datepicker" ).datepicker(); </script> </body> </html> Save this text as a .html file, and open it in a browser. Give the input focus, and you see the datepicker shown in figure 1.5. That’s it. With one line of HTML and one line of JavaScript, you have a fully functional datepicker! The full source code for the examples presented throughout this book is available for download at https://github.com/tjvantoll/jquery-ui- in-action-demos. You don’t have to keep Listing 1.2 First example: building a datepicker Waiting for the DOM to be ready Historically, <script> tags have been placed in the <head> of HTML documents. When the browser executes these scripts, the <body> isn’t rendered. Therefore, scripts need to wait for the browser’s DOMContentLoaded event before they can ac- cess DOM elements. jQuery Core provides a shorthand for doing this: $(function() { // The DOM is now ready. }); When scripts are placed at the end of the document (before </body>), the wrapping $(function() {} ) is no longer necessary. Figure 1.5 The first example. A jQuery UI datepicker opens when the <input> receives focus. Licensed to tracy moore <nordick.an@gmail.com>
- 42. 15 Using an onlinetesting tool track of the boilerplate in your head. The datepicker code can be found at chapter01/ 01-building-a-datepicker.html. But there’s an even easier way to play with jQuery UI—without having to leave your browser. 1.6 Using an online testing tool Online testing tools allow you to write HTML, CSS, and JavaScript in the browser and preview the results live. You can also save examples and get a unique URL you can save or share with others. You’ll use these tools to set up your boilerplate and save it in a bookmark. JS Bin (http://jsbin.com/), jsFiddle (http://jsfiddle.net), and CodePen (http:// codepen.io/) are examples of these services. Although the core functionality of each service is roughly the same, each has unique features, and you can play with them to see which you like best. Let’s look at how to run your datepicker example in jsFiddle. Visit http://jsfiddle.net. The pertinent portions of the UI are shown in figure 1.6. jQuery coding standards You can write an expression such as $( "#datepicker" ) in JavaScript in several ways: $( '#datepicker' ), $("#datepicker"), or $('#datepicker'). jQuery UI as well all jQuery projects consistently follow jQuery’s JavaScript style guide (http:// contribute.jquery.org/style-guide/js/). For consistency, this book adheres to the conventions in this guide. Notable conven- tions include using double quotes for strings ("jQuery" and not 'jQuery') and the liberal use of spacing—$( "#datepicker" ) and not $("#datepicker"). These are jQuery’s internal conventions and not requirements of projects using jQuery. If you prefer single quotes then use them. The most important thing is to be consistent in your own usage; don’t use single quotes in one function and double quotes in the next. Run the fiddle to see the HTML/JS/CSS rendered live. Save the fiddle for a unique URL you can bookmark. Place CSS here. Place HTML here. Add jQuery Core, jQuery UI’s JS, and jQuery UI’s CSS from a CDN. Place JS here. After the fiddle runs, the result of the HTML, CSS, and JS input is rendered here. Figure 1.6 jsFiddle is an online testing tool that you can use to run jQuery UI code. You place HTML, CSS, and JavaScript in their appropriate panes, and click the Run button to see the results. Licensed to tracy moore <nordick.an@gmail.com>
- 43. 16 CHAPTER 1Introducing jQuery UI First, you need to make jQuery and jQuery UI available as external resources. The URLs you want to use are ■ http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css ■ http://code.jquery.com/jquery-1.11.1.js ■ http://code.jquery.com/ui/1.11.0/jquery-ui.js You can copy and paste these URLs from http://code.jquery.com if you want to avoid typos or to play with other versions. After you add the resources, save the fiddle. This saves the current state and gives you a unique URL you can bookmark so you don’t have to enter the external resources again. After this setup, you can enter HTML, JavaScript, and CSS. Then, run the example, and the result displays in the Result pane. Because the datepicker is one line of HTML and one line of JavaScript, to run the example in jsFiddle you place those lines in the appropriate panes and run the fiddle. The result is shown in figure 1.7. NOTE You can view this example live at http://jsfiddle.net/tj_vantoll/ Eda2W/. If you append /show to the end of a jsFiddle URL (for instance, http://jsfiddle.net/tj_vantoll/Eda2W/show/), you can view the example out- side of the jsFiddle UI—it’s the equivalent of looking at just the Result pane. Finally, if you create a jsFiddle account, you can use http://jsfiddle.net/ draft/ to view the result of last example you ran. Because the draft URL is short (and bookmarkable), it’s handy for testing on mobile devices. jsFiddle handles the boilerplate for you so you can concentrate on jQuery UI, making it a convenient option for playing with the examples provided throughout this book. Figure 1.7 The datepicker example running in jsFiddle. The jsFiddle interface takes the HTML in the HTML pane and the JavaScript in the JavaScript pane, runs them, and displays the results in the Result pane. Licensed to tracy moore <nordick.an@gmail.com>
- 44. 17 Summary 1.7 Summary jQuery UIis a collection of widgets, effects, interactions, and utilities to help you build powerful websites and applications. jQuery UI is known for its stable, cohesive APIs, excellent browser support, and comprehensive documentation. You can download jQuery UI from http://jqueryui.com or from a CDN. You can test jQuery UI locally or use an online testing tool such as JS Bin, jsFiddle, or Code- Pen. You saw how easy it is to build powerful UI elements by creating a datepicker with one line of HTML and one line of JavaScript. In the next chapters, you’ll explore the functionality that the jQuery UI library pro- vides. You’ll start in chapter 2 with a deeper look at the core components of jQuery UI: widgets. Licensed to tracy moore <nordick.an@gmail.com>
- 45. 18 Enhancing UIs withwidgets A widget, as explained in chapter 1, is a reusable UI component. The 12 UI widgets in jQuery UI help solve the most common UI problems that web developers run into. In chapters 3–5, you’ll look at each widget specifically, but first, you’ll learn how widgets in jQuery UI work, and how to customize their behavior. The widgets in jQuery UI are created with the widget factory: a mechanism for creating powerful, feature-rich jQuery plugins. Because all widgets go through a single factory, after you learn how one works, you’ll have a good idea of how they all work. In this chapter we’ll focus on three mechanisms the widget factory provides for customization: options, methods, and events. Options are configurable proper- ties of widgets, methods let you perform actions on the widget, and events let you respond to changes on the widget. To begin, let’s see how to create widgets. This chapter covers ■ Creating widgets using jQuery UI ■ Reading the jQuery UI API documentation ■ Customizing widgets using options, methods, and events Licensed to tracy moore <nordick.an@gmail.com>
- 46. 19 Creating widgets 2.1 Creatingwidgets At their core, jQuery UI widgets are jQuery plugins with added functionality to make them customizable, extensible, and themeable. Whereas most jQuery plugins run once and are done, widget plugins remember the elements they’re associated with. You can then customize the widget with options, control it with methods, and respond to changes on the widget with events. How do you create widgets? Because widgets are also jQuery plugins, the syntax to create them should look familiar. You saw the syntax when you created a datepicker in chapter 1. Let’s look at that example in more detail: <input id="datepicker"> <script> $( "#datepicker" ).datepicker(); </script> This example shows the easiest way to create a widget: selecting DOM elements using jQuery and calling the widget’s plugin method. You can even create widgets on multi- ple elements at once. This example creates two datepickers: <input> <input> <script> $( "input" ).datepicker(); </script> Because all jQuery UI widgets are also plugins, the same syntax of selecting elements and calling the plugin can be used to create any of them. Here is how you can create a dialog widget: <div id="dialog">jQuery UI Rocks!</div> <script> $( "#dialog" ).dialog(); </script> Run this example, and you see the dialog shown in figure 2.1. NOTE If you’re getting an error that “$ is not defined” or “Object has no method ‘dialog’,” you aren’t including jQuery and jQuery UI’s JavaScript files. For details on including jQuery and jQuery UI’s scripts in these exam- ples, refer to section 1.5. Like most jQuery plugins, jQuery UI widget plugins return a jQuery object. The plugin can then be chained with other jQuery method calls. The following code cre- ates a dialog and uses jQuery Core’s css() method to change the text color to red: The DOM element that is converted to a datepicker. Selects the <input> element by its id, and converts it to a widget using the datepicker plugin method. Figure 2.1 A jQuery UI dialog widget created using the dialog() plugin. Licensed to tracy moore <nordick.an@gmail.com>
- 47. 20 CHAPTER 2Enhancing UIs with widgets <div id="dialog">jQuery UI Rocks!</div> <script> $( "#dialog" ) .dialog() .css("color", "red" ); </script> The ability to build a datepicker or dialog in a few lines of code is powerful, but chances are you’re going to need more custom behavior than the default widget pro- vides, such as a title or a different width. jQuery UI widgets have options to provide this customization. Let’s take a look at how to use them. 2.2 Customizing widgets with options Options are customizable properties of widgets. All options have default values that are used when no options are explicitly passed. Recall how you instantiated the dialog in section 2.1: $( "#dialog" ).dialog(); No options are specified, so the default set is used. Let’s customize these defaults to build something practical. Suppose you need to display a notification to the user after a long-running task, such as uploading a series of files, completes. The following code creates a new <div> and converts it to a dialog with the title and buttons options set: $( "<div>Your files have been successfully uploaded.</div>" ).dialog({ buttons: { "OK": function() {} }, title: "Success" }); Dynamically creating widgets InadditiontoselectingelementsontheDOM,youcanalsodynamicallycreateelements and convert them to widgets. The following uses jQuery to create a new <input> element and convert it to a datepicker widget: $( "<input>" ).datepicker(); Because the newly created element isn’t on the DOM, you need to add it for the widget to be visible. The following creates a new element, converts it to a datepicker, and appends it to the <body>: $( "<input>" ).datepicker().appendTo( "body" ); The dialog widget is unique because it automatically appends its element to the DOM upon creation. Therefore, to display a new dialog you can create a new <div> and call dialog(); it displays automatically: $( "<div>" ).dialog(); Licensed to tracy moore <nordick.an@gmail.com>
- 48. 21 Customizing widgets withoptions This dialog is shown in figure 2.2. As this demonstrates, you can specify options by passing them to the plugin as a JavaScript object. What other options can you set? The jQuery UI API documentation lists every option available for each widget. Figure 2.3 shows a screenshot of the dialog widget’s options taken from its online documentation at http://api.jqueryui.com/dialog/. In this section we’ll look at only a few of these options to demonstrate how widget options work. We’ll take a more thorough look at the dialog widget and its options in chapter 4. $( "<div>Your files…</div" ).dialog({ buttons: { "OK": function() {} }, title: "Success" }); Figure 2.2 A jQuery UI dialog used to dis- play a success mes- sage. The title optiondeterminesthe text in the title bar, and the buttons op- tion creates an OK button. Figure 2.3 The dialog widget’s documentation at http://api.jqueryui.com/dialog/. The oval highlights the dialog’s 19 configurable options. Each option is a link that takes you to more de- tailed information. Licensed to tracy moore <nordick.an@gmail.com>
- 49. 22 CHAPTER 2Enhancing UIs with widgets Each link listed in figure 2.3 takes you to a section with documentation on the individ- ual option, method, or event. Figure 2.4 shows the documentation for the width option. Note the following points: ■ The default value of the width option is 300; this is why all your dialogs have been 300 pixels wide to this point. ■ The option can be retrieved or changed using the option() method. You’ll learn how methods work, including the option() method, in the next section. TIP All options and their default values are accessible at $.ui.[widget- Name].prototype.options, for example, $.ui.dialog.prototype.options. You can change these values to alter the defaults that jQuery UI sets. If you were to run $.ui.dialog.prototype.options.width = 500, any new dialog instances would default to a width of 500 pixels rather than 300. Existing dia- log instances wouldn’t be affected. Let’s add one more option to your notification dialog. Recall that the example uses a dialog to notify users that their files have finished uploading. Assuming that upload- ing is a process that could take a while, the user may have moved on to other tasks in the interface and the default dialog position—the center of the screen—might be an The name of the option A description of the option and what it’s used for The JavaScript variable type the option is expecting The default value used if the option is not specified Code examples showing how to specify the option Code examples showing how to get and set the option after initialization Figure 2.4 Documentation on the dialog widget’s width option from http://api.jqueryui.com/dialog/ #option-width. The documentation gives a description of the option, lists its JavaScript type, its default value, and gives some examples of how to use it. Licensed to tracy moore <nordick.an@gmail.com>
- 50. 23 Customizing widgets withoptions annoyance. To mitigate this, you can change the position of the dialog with its posi- tion option. The following code shows the dialog on the bottom-left corner of the screen: $( "<div>Your files have been successfully uploaded.</div>" ).dialog({ buttons: { "OK": function() {} }, title: "Success", position: { my: "left bottom", at: "left bottom" } }); You’ll look at the position option more thoroughly in chapter 12, but you can see that it reads like a normal English sentence: position my left bottom at the left bottom (of the window). Experimenting with effects as options Recall that effects—a suite of animations and transitions for DOM elements—are a major component of the jQuery UI library. Although you won’t learn about effects until chapter 6, you can get a preview of the power they provide using dialog’s show and hide options. The dialogs you’ve looked at fade in and fade out when they’re shown and hidden. You can change that using the show and hide options. The following code opens a dialog with the fade effect and closes with a puff effect: $( "<div>" ).dialog({ show: "fade", hide: "puff" }); The show and hide options also accept an object for added configuration. This dialog slowly explodes when it’s closed: $( "#dialog" ).dialog({ hide: { effect: "explode", duration: 2000 } }); Try playing with the following effects to see what jQuery UI makes possible. You’ll take a thorough look at these effects in chapter 6. ■ blind ■ drop ■ fold ■ pulsate ■ size ■ bounce ■ explode ■ highlight ■ scale ■ slide ■ clip ■ fade ■ puff ■ shake Licensed to tracy moore <nordick.an@gmail.com>
- 51. 24 CHAPTER 2Enhancing UIs with widgets You now have a functioning notification dialog positioned in the corner of the screen. But you still have a major problem with this example: the OK button doesn’t close the dialog. How can you fix that? Although options let you customize a widget on creation, they don’t allow you to change the widget afterwards. You can’t use an option to close the dialog. You need to use another feature of jQuery UI widgets: methods. 2.3 Modifying widgets with methods All widget actions after initialization happen as method calls. Methods query the cur- rent state of the widget as well as alter it. Options let you set a dialog’s initial height, width, and title; methods let you change those values, open a dialog, close it, and destroy it. In this section you’ll look at how widget methods are invoked through their plug- ins. Then, you’ll see how to get and set the values of options using the option() method. As with options, the jQuery UI API documentation lists every method available for each widget. Figure 2.5 shows the methods available for the dialog widget. We won’t be covering each method the dialog widget has. We’ll specifically look at close(), isOpen(), open(), and option(). Let’s start by looking at how methods are invoked. 2.3.1 Invoking methods You can invoke a widget method in many ways, but the easiest—and the one the API documentation uses—is to invoke the method through the widget’s plugin. The fol- lowing alters your notification dialog to call the dialog’s close() method when the OK Figure 2.5 The dialog widget’s API documentation with an oval highlighting the widget’s seven methods. Each method name is a link to a section with more thorough doc- umentation. Licensed to tracy moore <nordick.an@gmail.com>
- 52. 25 Modifying widgets withmethods button is clicked. Be aware that the syntax can be confusing initially, so don’t be alarmed if you don’t understand this; we’ll go over what’s happening in detail. $( "<div>Your files have been successfully uploaded.</div>" ).dialog({ buttons: { "OK": function() { $( this ).dialog( "close" ); } }, ... }); The dialog’s buttons option works by associating button labels with a function to run when the button is clicked. The function declared at B runs when the OK button is clicked. The context of the click handler, this, is set to the dialog’s DOM element. You use that reference to invoke the close() method C. When you pass the name of the method to the plugin as a string, the method is invoked. This can be confusing as JavaScript methods are typically invoked using (), that is, dialog.close() rather than dialog( "close" ). Why would the jQuery UI wid- gets use this convention? ■ Convenience—A true close function is associated with the widget that you can retrieve and invoke using (), but it requires multiple lines of code to retrieve the instance and invoke the method. You’ll look briefly at accessing the widget’s instance later in this chapter, and then you’ll dig deep into instances in chap- ters 8 and 12. ■ Ability to affect multiple elements—jQuery’s plugin syntax allows methods to be invoked on multiple elements at the same time. The following code converts two <div> elements to dialog widgets, and then opens them both. (The autoOpen option prevents the dialogs from automatically opening. We’ll discuss the option in more detail momentarily.) <div>A</div> <div>B</div> <script> $( "div" ) .dialog({ autoOpen: false }) .dialog( "open" ); </script> ■ Chainability—Methods that alter a widget’s state return the original jQuery object so the call can be chained. Consider the following: <div id="dialog">jQuery UI Rocks!</div> <script> $( "#dialog" ) .dialog({ autoOpen: false }) .dialog( "open" ) .css( "color", "orange" ); </script> Attaches a click event handler to the OK button B Invokes the close() method C Initializes the dialog widget on the <div> Opens the dialog with the open() method Invokes the jQuery Core css() method to change the color of the dialog’s text Licensed to tracy moore <nordick.an@gmail.com>
- 53. 26 CHAPTER 2Enhancing UIs with widgets The close() and open() methods return the same jQuery object containing the <div>, making it possible to chain the calls with other widget methods—and even jQuery Core methods. The close()and open()methods are examples of methods that change the widget. The other type of method returns information about the widget. Consider dialog’s isOpen() method: <div id="dialog">jQuery UI Rocks!</div> <script> $( "#dialog" ) .dialog() .dialog( "isOpen" ); </script> Methods that return information about the widget can’t be chained because they don’t return jQuery objects. The following results in a JavaScript error because the JavaScript interpreter attempts to call dialog() on true: $( "#dialog" ) .dialog() .dialog( "isOpen" ) .dialog( "open" ); You can determine a method’s return type, and whether the method is chainable, by looking at the API documentation. Figure 2.6 compares the API documentation of the isOpen() and open() methods. The open() method is chainable because it returns a jQuery object; the isOpen() method isn’t. NOTE Were you confused by the “plugin only” text for the open() method’s return type in figure 2.6? This indicates that a jQuery object is returned only when the method is invoked through the plugin, for example dialog( "open" ). When open() is invoked on an instance, nothing is returned. You’ll learn about instances shortly. Returns true as dialogs are opened by default Returns the Boolean true Throws a TypeError because you can’t call dialog() on true non-jQuery return type, not chainable jQuery return type, chainable Figure 2.6 Comparison of the open() and isOpen() dialog methods. The open() method is chain- able because it returns a jQuery object; the isOpen() isn’t because it returns a Boolean. Licensed to tracy moore <nordick.an@gmail.com>
- 54. 27 Modifying widgets withmethods The methods you’ve looked at—open(), close(), and isOpen()—are specific to the dialog widget. Although all widgets have unique methods, several methods are common to all widgets. We’ll look at the most common of these, option(), in the next section. 2.3.2 Using option() to modify widgets Widget options can be set on initialization by passing an object to the widget’s plugin. This initializes a dialog with a height of 200: $( "#dialog" ).dialog({ height: 200 }); The option() method allows you to do two things after the widget has been initialized: retrieve the value of options (the getter) and set the value of options (the setter). To get a specific option, pass its name as a string to the plugin as the second argu- ment. The following returns the value of the height option: $( "#dialog" ) .dialog({ height: 200 }) .dialog( "option", "height" ); To get the values of all the options, call option() with no parameters. It returns an object with the options as key value pairs: $( "#dialog" ) .dialog() .dialog( "option" ); To invoke the setter version of option(), pass the name of the option as a second argument, and the value of the option as a third argument. The following sets the dia- log’s height option to 500: $( "#dialog" ) .dialog() .dialog( "option", "height", 500 ); You can pass an object as the second argument to set multiple options at once. The following sets the dialog’s height option to 500 and its width option to 500: $( "#dialog" ) .dialog() .dialog( "option", { height: 500, width: 500 }); Options vs. the option() method The difference between options and the option() method can be confusing. Options are configurable widget properties. For example, the dialog widget has height, width, and title options. You use the option() method to get and set the value of these options. To clarify the difference, whenever methods are referenced in this book they’re al- ways suffixed with a set of parentheses. Therefore, close() refers to the widget’s close method, option() to the widget’s option method, and so forth. The same con- vention is also followed in the jQuery UI online documentation. Returns 200 Licensed to tracy moore <nordick.an@gmail.com>
- 55. Random documents withunrelated content Scribd suggests to you:
- 56. They have asynagogue, and by dint of energy and “backsheesh,” we may visit it. They show us the famous Samaritan Codex, the copy of the Pentateuch, which is said to be the oldest MS. copy in existence. It is on parchment, about fifteen inches wide and twenty- five yards long, and is much defaced and injured
- 57. by time andhandling. There has been much discussion concerning this parchment, and many pages have been written to prove or disprove its antiquity. The Samaritans claim that it is thirty-five hundred years old, and they give the name of the writer, but he is not there now to swear to the truth of the statement. As Sergeant Buzfuz would say, “his is in itself suspicious.” That it is very ancient there is no doubt, and the reader may take his choice as to date of manufacture. The “Doubter” says that he saw in the parchment the watermark “Eagle Mills”—Jones and Smith, encircling a flying eagle with a shield in his claws. But I don’t believe him. We pass Gibeah, the ancient Geba, and next come to Bethel, now called Beitin, where Jacob lay down, as you see the Arabs lying now, with the earth for a bed and a stone for his pillow, and dreamed that he saw a ladder reaching to Heaven, and angels ascending and descending upon it. Abraham pitched his tent here, and here was buried Deborah, the nurse of Rachel, under an oak tree, which Jacob had chosen. We pass Ramah, a heap of ruins, in which a modern village is huddled. Its inhabitants have no higher object than the extortion of “backsheesh” from travellers, and they keep up a steady din of supplications as long as we are in their vicinity. We pass out of the fertile country and come again among the limestone hills, the eternal hills “round about Jerusalem” We are looking anxiously for the Holy City, and finally, as the sun is sinking and the approaching night
- 58. spreads the shadowsover the glens and valleys, we climb the crest of Scopus and look away toward a rounded mountain, crowned with a monastery. This is the Mount of Olives; nearer to us, and at its feet lies a city with grey walls and with domes and minarets rising above them. Do we need to be told that we are gazing upon Jerusalem? We halt a moment at the Damascus gate. From one of the Arabs that gather about us, let us borrow the Enchanted Carpet, which may have belonged to his ancestor, celebrated in the Arabian Nights. Seating ourselves upon it, we utter a wish to return to Damascus, and behold, in an instant we are once more in the court-yard of Dimitri’s hotel.
- 59. W CHAPTER XXVIII—FROM DAMASCUS TOJAFFA.—INCIDENTS OF THE TRIP. Once More in Damascus—Taking the “Short Route”—Starting for Beyrout—The Fountains of Damascus—Rain-Storm in the Anti- Lebanon—Stora and its Model Hotel—Poetical Fancies—A Compliment to Mine Host—The “Doubter” as a Rhymist—Climbing Mount Lebanon—Tropic Suns and Arctic Snows—View from the Summit—A Vision of Fairy-Land—Coming Down on the Double-Quick —In Sight of the Mediterranean—Taking Ship for Jaffa—Sidon to a Modern Tourist—Tyre—Jaffa—A Dangerous Roadstead. E have done with Damascus and the country beyond it; we have studied the road to Palmyra and Bagdad, and the overland route to Jerusalem; we have seen the bazaars, the fountains, the slave market, the mosques and the churches, and we have looked from the Salahiyeh hills when the setting sun was gilding the domes and towers of the city. Our carriage is waiting to bear us away to Beyrout, where we will “take ship for Jaffa,” as did the men of Solomon many centuries ago. We started out of Damascus in a pouring rain, but we didn’t think it would be much of a shower, and kept on. Just outside, we crossed a bridge over the Abana, or rather over one of its seven branches, and then followed the stream upward for a few miles. The Abana formerly flowed in a single stream; the founders of Damascus determined to utilize it for beautifying the city, and well did they perform their work. Here and there, as you ascend the stream, you see dams thrown across to direct first one portion and then another, and from these dams there are artificial canals, sometimes tunneled
- 60. through the rock,and all leading toward the cluster of domes, and minarets, and roofs that mark the locality of the city. Through all parts of Damascus the Abana is carried in divisions and subdivisions, now in open channels and now in aqueducts concealed beneath the street. Fountains foam and bubble at every street corner and sparkle in every dwelling; water, clear, bright, and beautiful, is everywhere, and man or beast has no need to thirst. It is this abundance of water that has created much of the fame of Damascus and made it attractive in the eyes of travellers. Beyond Damascus is the desert, without water or verdure; all around, east, west, north, and south, the country is rugged, and more or less barren. The traveller from Bagdad, from Mecca, from Aleppo, and from other points, has wandered over treeless wastes, where rock and sand are the only objects to greet his eye, and the only water to quench his thirst is the hot and brackish liquid carried in goat skins at his saddle bow. After long and weary days he arrives at Damascus, embowered in gardens, and at every step through her streets he sees a fountain. Is it any wonder that he considers Damascus as second only to Paradise? The rain didn’t stop, as we had expected. It kept coming steadily during the six hours—that seemed long enough for sixty—between Damascus and Stora. We warmed and dried ourselves as best we could before going to bed, but there was a good deal of moisture in our clothes when we got up in the morning. We didn’t feel particularly gay, especially as the morning was cold and the rain was continuing, but there was nothing to do but to push on. The steamer was due at Beyrout that day, and would leave in the evening, and if we missed her we should be stuck there for ten days. We wrote in the visitors’ book some complimentary things about the hotel at Stora before we went to bed in the evening. One was a macaronic verse, the first line English, the second French, the third
- 61. German, and thefourth Spanish. This was the combined effort of the party; then the Judge and I broke into verse as follows: “At Stora we, half dozen tourists, Have fared unexpectedly well, For hostess and host, we, as jurists, Declare they can keep a hotel.” Then the “Doubter,” remembering the hardships of his ride to and from Baalbek, broke out with a nursery rhyme like this: “We went up from Baalbek to Stora, And, riding, grew sorer and sorer. This rough land of the Prophet, If I ever get off it, Sure, I’ll not come again, begorra!” We had suspected that the “Doubter” was of Hibernian origin, and now we knew it. He owned up and said that his ancestors were among the Kings of Tipperary. But his poetic production did not find a place in the book, for the reason that it was not complimentary to the country, and did not reflect the opinions of the rest of the party. Up we went on the eastern slope of Mount Lebanon, the air growing colder, and the clouds enveloping us more and more densely as we ascended. I sat on the box and shivered, and vowed not to be caught again in such a scrape. By-and-by we were at the summit. There was an inch or so of snow on the road, and more on the rocks, and the wind was sharp enough to shave with. I was chattering like a magpie, and would have given something for a cup of hot tea, or something that would warm me. Kalil pointed to the sea, which just then appeared below us through a rift in the clouds,
- 62. and its reflectionin the warm sunlight was something pleasing to look upon. It was a long way down—fifty-six hundred feet—but we were good for it. Kalil turned down the brake a little, not enough to prevent the turning of the wheels, and not enough to keep back the horses, who went on at full speed. Now the air grew warmer, now the clouds broke away and fled over the mountain top, now the snow grew thinner and soon disappeared, now we could see Beyrout hovering like a bird over the land that skirts the bay, and looking bright and genial in the warm sunlight. The Mediterranean rippled and sparkled in the sunlight; far out on the water we could see stipples of white sails, and here and there we could discover the long, dark streaks on the horizon that marked the path of a steamer. The waves broke over the rocky beach with an uneven surge, and a silver thread widening as it advanced its winding way among the rocks showed us where lay the river that reaches the sea just north of the city. Winter was left behind as we descended the mountain at a break- neck pace; spring opened upon us, and soon the spring was succeeded by the warmth of summer. We were once more among the palm trees; oranges and citrons twinkled on the branches that bore them, and reflected back the golden light of a Syrian sun. The
- 63. dim lines onthe water developed into waves; the ships, at first faintly outlined, revealed all the details of spars and rigging, and the confused mass clinging to the land and marking the locality of Beyrout developed into the many colored domes, and towers, and roofs of an Oriental city; and as we drew rein at the door of the hotel, close to the water’s edge, we forgot our troubles, and breathed an atmosphere warm and invigorating as September. It was rather rough when we went on board the steamer which was to take us to Jaffa, and the wind increased during the night, so that by morning it was a respectable gale. The steamer was to start at daybreak, and stop at Caifa, half way to Jaffa, but the wind was so high that she didn’t go. She started once, but the sea was so rough that the captain hesitated and came to anchor again. We contemplated Beyrout that day and part of the next, and we had a similar contemplation of Caifa. The agent came out in a boat, and said he could not get a single lighter to venture out, as there was a very heavy sea breaking on the shore. So without landing or receiving any freight, we departed; some passengers went ashore, among them several who had tickets for Jaffa, but were fearful that they would not be able to land there. Among the deck passengers were several Jews who were coming to Palestine to settle and make their fortunes. The story that the Rothschilds had bought Palestine from Turkey, or rather had taken it, as a collateral for a loan which Turkey could not pay, was current among them. We passed between Beyrout and Caifa, the port of Saida, the ancient Sidon, which disputed with Tyre the mastery of the seas. It was once a great city; now it is a dirty, ill-kept town, with a population of not more than eight or nine thousand, and with a commerce so insignificant that it does not pay the steamers to call there. Where it formerly boasted an extensive fleet, it has not now a single vessel larger than a fishing boat!
- 64. We pass infront of Tyre, one of the oldest, as it was once one of the most powerful cities of the East. It has been many times destroyed and rebuilt, and a careful investigator can find the remains of at least a dozen different cities either in its ruins or in the historic accounts. At present there are less than four thousand inhabitants, Christian and Moslem, in the proportion of half and half. Jaffa has always borne a bad reputation on the score of safety, as it has no port where ships can lie, and is not even protected by projecting headlands Its harbor is an open roadstead, and if the wind blows from the south or west, or any point of compass between them, boats cannot venture out on account of the heavy surf. In summer the weather is generally favorable, but not always so, while in winter it is about an even wager for or against communication between ship and shore. Our captain said that in some winters he had been able to land at Jaffa every trip, and in other winters he could not land at all. I heard of one man who wanted to go to Jerusalem, and had gone past Jaffa five times unable to land there. And I heard a dragoman say that he had gone
- 65. to Jaffa ninetimes, and never failed to land each time. You see the difference between good and ill luck. If we had arrived on any of the previous eight days, we would have been unfortunate; two steamers had gone past in that time, one of them with three hundred pilgrims for Jerusalem, which were carried to Port Said, and would be brought back from there. But the morning we sighted Jaffa the weather was propitious, and as we cast anchor the ship was soon surrounded by boats ready to take the passengers ashore. We lost no time, as we were fearful a wind might arise and detain us, and so we closed our bargain for transportation to land at the usual rate of one franc for each person, including our baggage.
- 66. J CHAPTER XXIX—ENGAGING A DRAGOMAN.—OURSTART FOR JERUSALEM. Views of Jaffa—A queer-looking City—The Oldest Inhabited Town in the World—The Massacre of Jaffa—A Stain upon the Memory of Napoleon—A Contract with a Dragoman—A close margin—The value of Credentials—An honest Arab—Getting into Saddle—An American Colony—Their German Successors—The Fruits of the Country— Generous conduct of the “Doubter”—On the road to Jerusalem—A night at Ramleh—In a Russian Convent—The Gauntlet of Beggars— The Pest of the Road—Begging as a Fine Art—The “Gate of the Glen”—Among the Mountain Passes—In sight of the Holy City. AFFA presents a curiously terraced appearance, when seen from the water, and its flat roofs and low arches show its Syrian character. There is a semi-circle of rough rocks that form a sort of harbor for small boats, and it requires good steering to carry a boat through the entrance, only ten feet wide, without accident. The surf breaks violently when the wind is high, and makes a landing or embarkation dangerous. The town looks more beautiful a mile or two away than when close at hand. The landing place was dirty, and crowded with all sorts of unclean Arabs, and the streets were crooked, narrow, and so full of mud and dirt as to make walking a serious matter. Traditionally, Jaffa is the oldest city in the world; it is said to have existed before the flood, and it is likewise recorded as very old by history. It was one of the towns allotted to the tribe of Dan, and is mentioned as the landing- place of the rafts of cedar and pine from Lebanon for the construction of Solomon’s temple.
- 67. It was animportant place at the time of the Crusades, but gradually dwindled in commercial and other consequence. Napoleon caused it to be talked about at the beginning of the present century, by his massacre of the garrison of four thousand men, who had surrendered on condition that their lives should be spared. We proceeded with our baggage to the German hotel, followed by a bodyguard of dragomen and guides similar to those that had escorted us at Beyrout, and animated with the same noble ambition to make contracts that should transfer money from our pockets to theirs. As soon as we were at the hotel we held an audience of dragomen, and finally selected one that seemed to answer our purpose. As a matter of precaution, we went with him to the German Consul—the American Consul was out of town—and bidding him wait at the door, we consulted the man of authority. He pronounced the dragoman good, and we closed with him, on the Consul’s recommendation. He was to take us on a nine days’ trip to Jerusalem, Bethlehem, Mar Saba, the Dead Sea, Jordan, Jericho, and Ramleh, at an expense of twenty francs for each person per day. He was to provide all requisites for the journey; three double tents —one for each two persons—servants, beds, food, English saddles, side saddle for the lady, saddle and pack horses, and to pay all hotel and convent expenses, and supply local guides in Jerusalem; he was to provide sufficient escort when needed, and to pay all fees and
- 68. “backsheesh” of everykind, except at the Mosque of Omar. The party was to be at liberty to change the route, and to stop whenever it chose. The horses were to be sound, strong, kind, and active, and if any of them were disabled, the dragoman was to provide suitable substitutes without extra charge. In case of dispute, the matter could be referred to the German or American Consul at Jaffa or Jerusalem. While on the road, the food should consist of tea or coffee in the morning, with eggs, bread, and butter; luncheon at noon, of chicken or cold meat, eggs, bread, cheese, and dessert; and dinner as good as the hotel dinner. In Jerusalem the party could have choice of the Mediterranean and Damascus hotels. Ten napoleons were to be paid at starting, and the remainder, half in Jerusalem and half in Jaffa, on our return. Ali Solomon was the name of our dragoman, and I will do him the credit to say that we were entirely satisfied with him. He kept his contract more faithfully than we expected he would, and in some points exceeded its terms. I don’t recommend him to anybody else, for fear he may have suffered a change of heart, and become a rascal; men are very uncertain in this respect. I once had a servant whom I supposed to be honest enough to be a model for the rising generation. He left my employ to seek fortune and turn an honest penny elsewhere, and I gave him a ‘character’ which a student of theology might ertvy. On the strength of my recommendation, he obtained a situation with a gentleman, whose milk of human kindness had not been curdled by experience. John was trusted with things in general, and requited the confidence by stealing a hundred dollars, and then stealing away. And no man, so far as I have heard, knoweth, to this day, the place of his sojourn. Since then, I have been cautious about commendations, and, for this reason, I will only say of Ali, that we were entirely satisfied with
- 69. him, and believedhim honest and faithful. If he robbed his next customers of the filling of their back teeth, it is no affair of ours. We selected horses from a large number, and very good horses they were. About 2 o’clock we rode out of the German colony of Jaffa, which has bought the property formerly held by the American colony from Maine. The Germans are prospering, and promise well for the future. I was told that the Americans might have prospered, if their affairs had been well managed, but that their leader was about the worst head that could have been chosen. Only four, I believe, of the American colonists remain there, three women and one man. One woman is in a state of poverty, but I was told that the rest were making a good living. The Germans have a good manager at their head, and all of them are industrious. They have a second village about two miles away from the one originally founded by the Americans. Through a street paved with mud and filth, and bordered by tents and booths, where oranges and other things edible—in theory or in practice—were exposed for sale, we moved toward the interior and away from the sea. Orange groves were on every side, and we appreciated the reputation of Jaffa for this excellent fruit. Even the “Doubter” was convinced of the excellence of the oranges, as he filled his pockets without expense, and became liberal enough to bestow an orange upon a small boy who held his horse and wanted a slight “backsheesh” in return. “I don’t believe money is good for you,” he said to the boy; “you had better take an orange.” The boy could have had all of this sort of thing that he wanted, and indicated an objection to receiving payment in fruit, but his objections were of no avail. One of the “Doubter’s” strong points was in never paying at all for small services, or in paying in something that cost him nothing. His sympathy was roused for a poor woman in Jaffa, and as we finished dinner he took a large orange from the table and said: “I would like to give this to that poor woman over the way.” We applauded his burst of generosity in giving away what belonged to the hotel, and didn’t let him hear the last of it for a day or two.
- 70. Outside of Jaffa,the road goes over a flat or undulating country, evidently quite fertile, excepting at intervals, where it is too sandy for cultivation. For saddle horses the road is excellent; it is intended for a carriage road, but has never been finished, though carriages do manage to get over it now and then, all the way to Jerusalem. The story goes, that when the Sultan visited Paris in 1867, the Emperor told him that Eugenie wished to visit Jerusalem, but was unable to ride there on horseback. "There shall be a good carriage road there in a year,” said the Sultan, and he at once gave orders for its construction. But somehow it still remains in an unfinished condition, and the promise to complete it within a year is like many other promises of the Turkish ruler. The Russians have a convent at Ramleh, for the accommodation of Russian pilgrims to Jerusalem, and there is also a Latin convent there, under the management of French and Italian monks. The Latin establishment is really a convent, or rather a monastery, but the Russian one is more like a hotel, as it is kept by a Russian family, whereas the Latin convent is really in the hands of holy men, clad in hood and cowl. Our dragoman rode ahead and arranged that we should stop at the Russian convent, and sent a boy out to meet and guide us into the place. Along the road side, as we entered, there were a lot of beggars— twenty or more—drawn up, or rather squatted in line where they could assail us. Some were blind, some had lost their hands or their fingers, and each of them held up his mutilated stumps to attract attention. We were told some of them were lepers, but that the majority had been mutilated either by themselves or their parents in order to insure their success as beggars. One of our party gave a small coin to the worst looking of the mendicants, and immediately the whole crowd set in pursuit. If you give a gratuity in Syria, you are at once pursued by all the beggars in sight, including the one to whom you have made a donation, and nothing short of a blow with a cudgel will shake
- 71. them off. Thissystematic begging is apt to harden one’s heart, especially when you find it impossible to satisfy the demands of an applicant. The government would do a charitable work if it would assemble the beggars of Ramleh into a close room and asphyxiate them over a charcoal fire. They have been suppressed two or three times, but are sure to spring up again. We were up early, and for three hours had a road very much like that of the day before. This ride brought us to the Bab-el-Wady, or Gate of the Glen, where there is a sort of hotel which furnishes everything for the traveller, except food, drink, and lodging, and there is a room where you can sit at a rickety table in a rickety chair, and eat the provisions you have brought along. From this so-called hotel we moved up a glen or valley with the rocks on both sides of us, and the road making a steady ascent. We were now among the rugged mountains that extend to and beyond Jerusalem, a dreary and almost sterile waste, whose every aspect is forbidding. I know of no mountain ride more dreary than that from Babel- Wady to Jerusalem. In nearly all other mountain chains I have ever seen, you have frequent glimpses of scenery that would partly reward for your toil, but here there is nothing of the kind. It is a succession of rough and rounded summits, too rocky for cultivation, and not broken enough to be picturesque. A few villages nestle in
- 72. the glens, andthere are occasional patches of olive trees, but the general aspect is one of unredeemed sterility. The road from Jaffa to Jerusalem is about thirty-six miles in length: travellers generally divide it by going to Ramleh—nine miles —the first day, and to Jerusalem the next. The ordinary time for a party unused to travel is twelve hours; going up we made it in ten hours, and coming back we did it in seven and a half, which was very fair speed. We wound along the mountain road, and four hours after leaving Bab-el-Wady, the foremost of our cortege swung his hat from one of the rounded summits. “Jerusalem,” said the dragoman, and at the word we pressed forward. There lay the Holy City, as it lay when the Crusaders came hither to wrest it from the hands of the Moslem, and as it has greeted the eyes of many a pious pilgrim in more modern days. Its towers and walls rose before us, while around were the everlasting hills of Israel. Tasso’s lines describing the first view of the city by the Crusaders came involuntarily to my mind. Winged is each heart, and winged every heel, They fly, yet notice scarce how fast they fly, But by the time the dewless meads reveal The golden sun ascended in the sky, Lo! towered Jerusalem salutes the eye. A thousand pointing fingers tell the tale, “Jerusalem!” a thousand voices cry; “All hail, Jerusalem!” hill, down, and dale Catch the glad sound, and shout, “Jerusalem, all hail.”
- 73. The towered wallsrecalled the pictures of Jerusalem, with which the whole world is familiar, and we seemed to be entering a city that we had seen before. The Turkish soldiers at the gate made no opposition to our entrance. Formerly strangers were kept waiting at the gate until their passports had been sent to the j police for examination, and sometimes the detention lasted two or three hours. A few steps inside the gate brought us to the door of the Mediterranean Hotel, where we dismounted and made ourselves at home.
- 75. A CHAPTER XXX—THE LIONSOF JERUSALEM.—THE TEMPLE, THE SEPULCHRE, AND THE HOLY OF HOLIES. First Sights in Jerusalem—Appearance of the streets—What the “Doubter” thought—A change of opinion—The Tower of David—The Street of David—Church of the Holy Sepulchre—Scenes around it— Palace of the Knights of St. John—Via Dolorosa—Damascus’ Gate— Walls of the Holy City—Visiting the Temple—The Haram and Mosque of Omar—Visaing the Substructions—A triple veneration—Place of Wailing—The Quarries—Remains of an Ancient Bridge. S soon as we were fairly in Jerusalem and had brushed up a little, we started out to see some of the many sights that the city contains. Apart from its historical interest and the picturesque appearance of its walls, towers, and domes, Jerusalem is the reverse of pleasing. Its streets are narrow and badly paved, and no effort is made to keep them clean. Some of the narrow ones are particularly filthy, and one must have good boots and be careful about his steps to walk safely along these ways. I laughed inwardly as the “Doubter” hesitated at some of the corners and showed a determination to turn back, or rather an uncertainty about going forward. When we descended the Danube, we stopped a short time at Belgrade, the capital of Servia, and standing on the frontier between the Occident and the Orient. The pavement there was rougher than
- 76. that of Europeancities, and the “Doubter” doubted if there was anything worse in the world. “Let us hurry up,” said he, “and get to Constantinople or Jerusalem where the streets are better.” "Why, my dear “Doubter,” said I, “these are far better than the streets in those cities. They have worse pavements and deeper mud.” “I know better,” was his rejoinder, and that closed the argument. I said nothing till I had him climbing the wide street that leads from Top-Hané to the Hotel de Byzance in Constantinople, and there I
- 77. gave him alittle prod about Belgrade. He got out of it by saying that he knew Jerusalem was much better. Naturally, I was pleased when I managed to get him between two mountains of mud, or something of the sort, in a narrow street in Jerusalem, and just as he was extricating himself, I asked about Belgrade. He made no reply that I heard, but I saw his lips moving and his mental agitation was so great that he slipped and fell where the mud was worst. He was not presentable in polite society after that, but rather looked as though he had been hired out by the day as a friction roller for smoothing a freshly flowed swamp. From the front of the hotel, one can see the Tower of David, the structure which King David erected upon Mount Zion, according to Biblical history. From the Jaffa gate, also called the Hebron, and the Mediterranean gate, runs the street of David, descending the hill and subsequently ascending another to Mount Moriah Our first walk was down the street of David to the first turning to the left. This took us into Christ street, and a walk of three or four minutes there brought us, by a single turning, into the space in front of the Church of the Holy Sepulchre. This space was full of beggars, and of people selling various sorts of ornaments and relics. Some had rosaries made of various kinds of wood, generally of the olive tree or the seeds of the olive; some had crosses and holy pictures cut in mother of pearl; and others had old coins or stone ornaments made of pieces of the Temple of Jerusalem. The traders and beggars were very persistent, and one could not stand a minute in contemplation of the building without being annoyed by the one class or the other. More than one of us wished that a scourge could be set in motion to drive away these pests from the exterior of a building, which is regarded with special interest by all Christian people. We could not enter the church at that hour, and so we contented ourselves with a visit to the hospital of the Knights of St. John, or rather to its ruins. We walked along the
- 78. Via Dolorosa andwere shown the supposed spot where Christ rested his cross, then we went along the street of the Gate of the Column and the street of the Palace, to the Damascus Gate. Then, as it was approaching sunset, we returned to the hotel and had a pleasant conversation with Dr. De Hass, our newly appointed Consul to Jerusalem. On our way back to the hotel we stopped in two or three of the many shops where olive wood is wrought into various interesting forms for strangers to buy and carry away. It seemed as if about one-fifth of the inhabitants of Jerusalem were engaged in the manufacture of objects of olive wood. Canes, boxes, portfolios, candle-sticks, and a hundred other things were made of olive wood, and some of them were very pretty. Jerusalem is the same towered city as of old, and her walls have a massive appearance. Sultan Suleiman erected them, as they now stand, in the year 1542; but portions of them were standing before that time, and some of the towers have undergone very little change in the various calamities which the city has suffered. The latter portions were built from the ruins of the older walls and generally on the sites of their predecessors, so that the city has
- 79. preserved its formwith but little alteration. The distance around the walls is about two and a half miles, and in this distance there are five gates; the most important of these are the Jaffa gate and the Damascus gate, the others being but little used There are two gates wholly or partially walled up; one of them being the Golden Gate on Mount Moriah, and the other, the gate of Herod. The principal streets of the city run at right angles, and by them Jerusalem is divided into the Moslem, the Christian, the Jewish, and the American quarters. So much for the general description of Jerusalem. To those familiar with Bible history, the enumeration of the holy places of Jerusalem would be to repeat many names with which they are already familiar; to those who are not Biblical students, the list would be tediously long; I shall therefore confine my account of Jerusalem to the story cf what we saw and did during our brief stay. Any one wishing to know more of the city has doubtless within his reach one or more books, that will give the required information. A perusal of the Bible, especially of those portions describing Jerusalem, would not prove at all injurious. We entered by a gate in the wall, and the transition was quite sudden from the confused mass of houses where we had been wandering to the open space of the Haram. We ascended a flight of steps to a broad platform, and stood in front of Kubbet-es-Sukrah, or Dome of the Rock, as the central mosque is called. It is generally known as the Mosque of Omar, for the reason that the Kalif Omar is credited with its construction. There Accompanied by a guide and by a janizary of the consulate, we started out of the hotel in the morning and descended the street of David to the entrance of the Haram or Sacred Enclosure, the name given by the Arabs to the portion of Mount Moriah that contains the Mosques of Omar and El-Aska, and formerly contained the great temple built by King Solomon.
- 80. The Haram occupiesa large space, almost equal to a fourth of the city; it is surrounded by strong walls and is dotted with platforms, niches for prayer, cupolas and olive trees in addition to are two or three stories about its origin, but, whatever that may have been, the architect deserves great credit for erecting a building beautiful in itself and quite in keeping with the surroundings. It stands on the very summit of Mount Moriah on the sacred rock, supposed to have been the site of the threshing floor of Or-nan, the Jebusite, which King David bought for fifty shekels of silver. The building is octagonal, and each of the sides measure sixty-seven feet. The octagonal form is preserved in the interior, where the rock is inclosed in a railing and rises above the level of the floor. Unfortunately, the mosque was undergoing repairs at the time of our visit, and the interior was full of scaffolding, while the floor was covered with rubbish. But we could see enough to show that the mosque is a structure of great beauty. The lower part of the wall is composed of colored marbles in complex patterns, and the upper part contains no less
- 81. than fifty-six windowsof stained glass, equalling in beauty anything that can be found in Westminster Abbey or the cathedrals of Europe. The dome presents an imposing appearance, whether seen from the outside or from within. Externally it is a prominent feature of Jerusalem, and no picture of the holy city would be complete without it. Antiquarians are in doubt as to the extent of the great temple, but there is likely to be a complete solution of the difficult questions when the work of the Palestine Exploration Society is finished. The English and American sections are working in perfect harmony, and have portioned out their territories so that they shall not come in contact or perform the same work twice over. Part of their efforts are directed to settling the discussions about the extent of Solomon’s Temple, and they have already made some important discoveries. We were shown the localities of the excavations, and after visiting the two mosques in the Haram we went below ground to look at the substruction of the great temple. We descended a flight of steps into a subterranean apartment where there is a sculptured niche, which bears the name of “The Cradle of Jesus”. Our guide lighted some candles, and we kept on down another flight of steps that brought us into some vaults, containing numerous pillars about five feet square and constructed of huge stones. The t arches supported by these pillars were generally semi- circ ul ar, and the whole work had an appearance of great durability. Only a portion of this subterranean space has been explored, and the extent of the arched space is unknown. These were for the purpose of making the ground level and thus prepare it for the foundation of the great temple. We were shown some roots of trees that have made their way through the platform and run a long distance through the underground debris. The crusaders used these vaults as stables, and
- 82. some of theholes in the pillars where they fastened their horses can still be seen. None of the horses are there. Jerusalem is emphatically the Holy City. It is a little singular that it should be venerated by the disciples of three great teachers, Moses, Christ, and Mohammed, and that while Christians call it the Sacred City, the Arabs should have almost a similar title for it. Its Arabic name El-Kuds signifies “The Holy,” and the rock beneath the dome of the Mosque of Omar is the locality of the triple veneration.
- 83. At the south-eastcorner of the rock, we were conducted into a chamber or excavation, called the Noble Cave. It is asserted to be the praying place of Abraham, David, Solomon, and Jesus, and in its center there is a slab of marble covering a cavity, which is called the well of spirits by the Moslems. Some call it the gate of Paradise and others say it leads to a place whose character is quite the reverse. The guide stamped upon it, and the sound that resulted showed that the place was hollow. It is generally claimed that this rock, now covered by the dome of the mosque, was the site of the altar of Solomon’s Temple. The Jews used to come to this rock as far back as the fourth century to wail over the departed glories of Jerusalem; but when the Moslems took the city, and appropriated the spot, a new wailing place was selected On one corner of the rock the guide showed the footprints of Mohammed, where his foot last touched the earth when he went up to heaven; and near it is the hand print of the Angel, who seized the rock and held it down to prevent its going to heaven along with the Prophet. Thus the Jews revere the spot as the site of the altar of their temple; the Christians revere it as the praying place of Jesus, and the Moslems revere it for the reason above given. Strange indeed that it should thus be the sacred spot of three distinct religions. No other place of the globe compares with it in holiness.
- 84. We looked fromthe walls of the temple over into the Valley of Jehoshaphat and saw Absalom’s pillar and other objects of interest. The garden of Gethsemane was pointed out, and over against us was the Mount of Olives with its triple summit and the crown of the Church of the Ascension, and the building erected by the Princesse de la tour l’Auvergne. The olive trees had lost their leaves and were bleak and bare, and the sides of the hill had an uninviting appearance. Down to the Brook Kedron our gaze extended, or rather to its bed, as the valley was dry and dusty as if no brook had ever flowed there. Other places of historical or traditional note were pointed out, but we were too far away to discern them clearly. We left the temple and proceeded to the wailing place of the the Jews. Here are the foundations or a small portion of the lower walls of the great temple where, every Friday, the Jews come to wail and weep over their downfall. Half a dozen Jews were there are the time of our visit; with their faces to the stone, they read from their prayer books in a low wailing tone that was exceedingly impressive. At the wailing place there were visible five courses of beveled stones in a fine state of preservation; in some places they have been worn considerably by the kisses of the devotees, that for many centuries have pressed around them and wept for the downfall of
- 85. Jerusalem. Both sexesand all ages are represented here, and they have come from all quarters of the globe. “Oh! weep for those that wept by Babel’s stream, Whose shrines are desolate, whose land a dream; Weep for the harp of Judah’s broken spell; Mourn—where their God hath dwelt, the godless dwell.” From the Place of Wailing we returned to the hotel, and, as soon as we had taken lunch proceeded to The Quarries, an excavation which is entered just outside of the Damascus gate. This is supposed to be the locality whence came the stone for the Great Temple, and it was only a few years ago that it was discovered. The quarries extend beneath the city, and one can walk more than half a mile from the entrance directly under Jerusalem. We wandered around here for about an hour, lighted by candles that saved us many a disagreeable fall. The slope of the interior is very steep, and how the stones were managed there, is a mystery. The Judge had several slips, but none of them were serious, as they all happened among the sand and smaller chips of limestone. On our return to the hotel, he took a respectful position in the rear of the party, and for an hour or more was locked in the recesses of his own room. What he did while thus secluded, I cannot say, but I know that he summoned a servant to bring him a needle and some thread.
- 87. W CHAPTER XXXI—AMONG THE MONKS. Fromthe Gates of Jerusalem to Bethlehem—A Touching Incident— Tent-Life at Bethlehem—The Milk Grotto—Its Miraculous Character— The “Doubter” Expresses Himself—The Oldest Christian Church in the World—Quarrelsome Monks—A Deadly Fight—Remarkable Conduct of the “Doubter”—Pious Pilgrims—A Christmas Festival—A Corpulent and Hospitable Monk—A Wearisome Ceremony—The Monks in Costume—The Women of Bethlehem—A Bevy of Beauties— Under Guard—Armenian Soldiers—Travelling to Saba—Among the Monks—A Curious Convent—Armed Against the Bedouins. E were in the Holy Land at Christmas time, and arranged to attend the Christmas eve festivities in Bethlehem. About two o’clock in the afternoon of the day before Christmas we mounted our horses and turned our attention to the southern horizon. Out of the Jaffa gate we filed, and then past the Hill of Evil Counsel, and near the so-called Lower Aqueduct we took the road to Bethlehem. The road was much like that which brought us to Jerusalem—a path among rocks and hills—though the latter were less abrupt, and there were in many places considerable areas of tillable land. It is a ride of less than two hours from one city to the other, and there are few objects of interest along the route Rachel’s Tomb was pointed out, and also the well, whose waters David longed for when he was in the cave of Adullam. The Tomb of Rachel is a small building, surmounted with a dome, and possessing no peculiar features. The structure is modern, and probably in the thirty centuries that have passed
- 88. Welcome to ourwebsite – the perfect destination for book lovers and knowledge seekers. We believe that every book holds a new world, offering opportunities for learning, discovery, and personal growth. That’s why we are dedicated to bringing you a diverse collection of books, ranging from classic literature and specialized publications to self-development guides and children's books. More than just a book-buying platform, we strive to be a bridge connecting you with timeless cultural and intellectual values. With an elegant, user-friendly interface and a smart search system, you can quickly find the books that best suit your interests. Additionally, our special promotions and home delivery services help you save time and fully enjoy the joy of reading. Join us on a journey of knowledge exploration, passion nurturing, and personal growth every day! ebookbell.com