Web Development with jQuery®

Introducing the Selectable Plugin (^) ❘ 371 { var path = ui.draggable.data('path'); ui.draggable.remove(); } }); An example of t ...

(^372) ❘ CHAPTER 14 SELECTABLE While selection is happening, as items are included in a selection, sometimes items are also excl ...

Accordion So far you’ve learned about how jQuery makes dragging and dropping easy to implement, and you’ve learned how jQuery ma ...

(^374) ❘ CHAPTER 15 ACCORDION The Beatles John Lennon Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibu ...

Building an Accordion UI (^) ❘ 375 ul { list-style: none; margin: 0 ; padding: 15px 5px; } li { background: gold; padding: 3px; ...

(^376) ❘ CHAPTER 15 ACCORDION Changing the Default Pane At this point, you have a functioning Accordion UI. This section shows y ...

Changing the Default Pane (^) ❘ 377 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Pra ...

(^378) ❘ CHAPTER 15 ACCORDION FIGURE 15-2 You can also set the option active to false, which makes no content open by default. I ...

Changing the Accordion Event (^) ❘ 379 This problem can be corrected by specifying the heightStyle option. The heightStyle optio ...

(^380) ❘ CHAPTER 15 ACCORDION $(document).ready( function() { $('ul').accordion({ active : 1, event : 'mouseover' }); } ); The p ...

Setting the Header Elements (^) ❘ 381 George Harrison Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luc ...

(^382) ❘ CHAPTER 15 ACCORDION event : 'mouseover', header : 'h4' }); } ); In the preceding script, take note that you also have ...

Datepicker jQuery UI offers a sophisticated and feature-rich UI component for inputting dates into a form fi eld in its Datepick ...

(^384) ❘ CHAPTER 16 DATEPICKER The following style sheet provides a little bit of styling for the preceding markup docume ...

Implementing a Datepicker (^) ❘ 385 Custom Styling the Datepicker By default, the Datepicker plugin doesn’t provide styling. To ...

(^386) ❘ CHAPTER 16 DATEPICKER May Jun Jul Aug Sep Oct Nov Dec 2004 2005 2006 2007 2008 2009 2010 2011 2012 ...

Implementing a Datepicker (^) ❘ 387 S     1 2 3 4 5 6 7 8 9 10 11 ...

(^388) ❘ CHAPTER 16 DATEPICKER 12 13 14 15 16 17 18 19 20 21 22 23 24 2 ...

Implementing a Datepicker (^) ❘ 389 28 29 30       The preceding markup document is styled with ...

(^390) ❘ CHAPTER 16 DATEPICKER left: 0 ; } div.ui-datepicker-close, a.ui-datepicker-next { position: absolute; top: 0 ; right: 0 ...