Jquery Programming Cookbook I
Total Page:16
File Type:pdf, Size:1020Kb
jQuery Programming Cookbook i jQuery Programming Cookbook jQuery Programming Cookbook ii Contents 1 Add/Remove Class Example 1 1.1 Basic Document Setup................................................1 1.2 .addClass() and .removeClass() Methods.......................................2 1.2.1 Add Class...................................................2 1.2.2 Remove Class.................................................4 1.3 Adding or Removing Classes on Event Listeners..................................4 1.3.1 Toggle Classes on Event Listeners......................................5 1.4 Conclusion......................................................5 1.5 Download.......................................................6 2 UI Datepicker 7 2.1 Basic Setup & Application..............................................7 2.1.1 Document Setup...............................................7 2.1.2 Default Functionality.............................................8 2.2 Options and Examples................................................8 2.2.1 Animations..................................................8 2.2.2 Dates in Other Months............................................9 2.2.3 Display Button Bar..............................................9 2.2.4 Display Month and Year Menus....................................... 10 2.2.5 Display Multiple Months........................................... 11 2.2.6 Select a Date Range............................................. 11 2.2.7 Icon Trigger.................................................. 12 2.2.8 Format Date................................................. 12 2.3 Conclusion...................................................... 13 2.4 Download....................................................... 13 3 jQuery and AJAX 14 3.1 An Introduction to AJAX!.............................................. 14 3.1.1 How we came here?............................................. 14 3.1.2 Getting to Know AJAX Better........................................ 15 3.1.3 AJAX Benefits................................................ 16 jQuery Programming Cookbook iii 3.2 Implementation.................................................... 16 3.2.1 Basic Document Setup............................................ 16 3.2.2 Ajax Declaration............................................... 17 3.2.3 A Real-World AJAX Example!........................................ 18 3.3 AJAX Settings.................................................... 19 3.3.1 accepts.................................................... 19 3.3.2 async..................................................... 20 3.3.3 beforeSend.................................................. 20 3.3.4 cache..................................................... 20 3.3.5 complete................................................... 20 3.3.6 contents.................................................... 20 3.3.7 contentType.................................................. 20 3.3.8 context.................................................... 21 3.3.9 data...................................................... 21 3.3.10 data...................................................... 21 3.3.11 dataType................................................... 21 3.3.12 error...................................................... 22 3.3.13 global..................................................... 22 3.3.14 method.................................................... 22 3.3.15 success.................................................... 22 3.3.16 timeout.................................................... 22 3.3.17 type...................................................... 23 3.3.18 url....................................................... 23 3.3.19 username................................................... 23 3.3.20 password................................................... 23 3.4 Where to use AJAX?................................................. 23 3.5 Conclusion...................................................... 24 3.6 Download....................................................... 24 4 File Upload 25 4.1 Plugin Demo and Features.............................................. 25 4.1.1 Video Demo #1 - Single & Multiple Files Upload.............................. 25 4.1.2 Video Demo #2 - Drag & Drop File Upload................................. 25 4.1.3 Features.................................................... 25 4.2 Basic Plugin Setup.................................................. 26 4.2.1 HTML Setup................................................. 26 4.2.2 Display Upload Progress........................................... 27 4.2.3 Tie a file to an element node during the life cycle of an upload....................... 27 4.2.4 Start Uploads with a button click....................................... 27 jQuery Programming Cookbook iv 4.3 Requirements..................................................... 28 4.3.1 Mandatory Requirements........................................... 28 4.3.2 Optional Requirements............................................ 28 4.4 Browsers....................................................... 28 4.4.1 Desktop Browsers.............................................. 28 4.4.2 Mobile Browsers............................................... 29 4.5 Conclusion...................................................... 29 4.6 Download....................................................... 29 5 Drag and Drop 30 5.1 Basic Setup & Application.............................................. 30 5.2 Customized Draggable Elements........................................... 31 5.2.1 Constraining Movement........................................... 31 5.2.2 Cursor Styles over Draggable Element.................................... 32 5.2.3 Revert Draggable Element Position..................................... 32 5.2.4 Snap to Element or Grid........................................... 33 5.3 An Advanced Approach................................................ 33 5.4 Conclusion...................................................... 33 5.5 Download....................................................... 34 6 UI Autocomplete 35 6.1 Document Setup.................................................... 35 6.2 Basic Autocomplete Input Field........................................... 36 6.3 Autocomplete Options................................................ 37 6.3.1 AppendTo................................................... 37 6.3.2 Delay..................................................... 38 6.3.3 Disabled................................................... 38 6.3.4 minLength.................................................. 38 6.3.5 Source.................................................... 39 6.4 Conclusion...................................................... 39 6.5 Download....................................................... 39 7 CSS Background Image 40 7.1 Basic Setup...................................................... 40 7.1.1 Initial Document Setup............................................ 40 7.1.2 Understanding the .css() method....................................... 41 7.2 Background Image using .css()............................................ 42 7.3 Conclusion...................................................... 44 7.4 Download....................................................... 44 jQuery Programming Cookbook v 8 Disable Button 45 8.1 Basic Setup...................................................... 45 8.2 Disabling a Button with jQuery............................................ 46 8.2.1 Disabled as an Initial State of the Button................................... 46 8.2.2 Disabling a Button on Click......................................... 46 8.2.3 Disabling a Button after Form Submission.................................. 47 8.3 Conclusion...................................................... 47 8.4 Download....................................................... 48 jQuery Programming Cookbook vi Copyright(c) Exelixis MediaP.C., 2015 All rights reserved. Without limiting the rights under copyright reserved above, no part of this publication may be reproduced, stored or introduced intoa retrieval system, or transmitted, in any form or by any means(electronic, mechanical, photocopying, recording or otherwise), without the prior written permission of the copyright owner. jQuery Programming Cookbook vii Preface jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. (Source: https://en.wikipedia.org/wiki/JQuery) In this ebook, we provide a compilation of jQuery based examples that will help you kick-start your own web projects. We cover a wide range of topics, from UI Widgets, to Drag and Drop functionality and CSS manipulation. With our straightforward tutorials, you will be able to get your own projects up and running in minimum time. jQuery Programming Cookbook viii About the Author Fabio is a