
Mastering jQuery UI
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
Book DescriptionIf you are a frontend developer with considerable knowledge of jQuery UI and want to take this expertise to the next level, then this book is for you.What you will learn
Create mashups using APIs of popular websites such as Reddit and Google Maps
Integrate AJAX with different components
Create projects that solve realworld problems and are not theoretical
Discover the best usage of components in a given situation
Use effects to make the UI more interactive
Use JSONP to make crossorigin AJAX requests
Get to grips with best practices to use while developing with jQuery UI
Who this book is forIf you are a frontend developer with considerable knowledge of jQuery UI and want to take this expertise to the next level, then this book is for you.
All prices
More details
Other editions
Additional editions

Person
Vijay Joshi is a full stack web developer having more than a decade of experience in working with PHP and JavaScript.
Content
Designing a simple quiz application
Building a Jigsaw Puzzle game
Creating a website tour
Creating a tabbed news reader
Implementing CAPTCHA using Draggable and Droppable
Creating an event timeline using slider
Using jQueryUI with Google Maps API
Creating a Photo Album Manager
Creating Widgets Using the Widget Factory
Building a Colorpicker Tool with Hex RGB
Creating a Fully Functional Dashboard
Appendix: Best Practices for Developing with jQueryUI
Making the quiz functional
Our UI part is now complete and we can proceed to make the quiz functional. We will do this in a few steps. First of all, we will display the data on the page in two columns. Then, we will make the country names draggable. Finally, the list items with the capital names will be made droppable so that we can drop a country name inside a capital. We will also have to ensure that a droppable capital name accepts only the correct country name. Finally, the resetting logic will be built.
Displaying data on the page
Open the quiz.js file for editing and write the following code:
On the document ready event we call a function named createQuizLayout which we need to define now.
Here is what the preceding code does:
- We have defined two arrays named
countriesandcapitals. - The
countriesarray contains names of 10 countries and thecapitalsarray contains names of the capitals of the countries defined in the countries array. The names of capitals must be in the same order as their respective countries. - Since we want to display the names of countries and capitals in a random order, we will create two arrays and fill them with list items and shuffle them.
- We started with country first. We declared an array named
arrCountry. Then, we loop in thecountriesarray and create a list item with the country name and push it into thearrCountryarray. - The same process is repeated for the
capitalsarray.
An important point to note here is that we are giving a data attribute named index to each list item having a value from 1 to 10. Since we have both the countries and capital names in the same order, index will be used to match which country belongs to which capital.
After both arrays are populated, we will shuffle them so that the order of countries and capitals becomes random. For this, we will use a simple shuffle function from the website http://jsfromhell.com/array/shuffle. The shuffle function is defined as follows:
After calling the shuffle function on both arrays arrCountry and arrCapital, the array elements are inserted in DOM after combining them into a single string using the JavaScript join function. The elements in the array arrCountry are inserted in ul with the id value source and those in the array arrCapital are inserted in ul with the id value target.
Open your browser and point it to the index.html file of the Chapter1 folder now. You will see a page similar to the one shown in the following screenshot:
If you reload the page, you will see that the order of countries and capitals changes each time. This is because shuffling creates a new order for items of both lists.
Draggable country names
To make the country names draggable, we will use the draggable component of jQuery UI. As the name suggests, the draggable component allows DOM components to be moved around using a mouse. To do this, go to the $(document).ready() section of our quiz.js file and call another function named initQuiz. The $(document).ready() callback function should look like this now:
Now define the initQuiz function outside document ready handler as follows:
The preceding code calls the draggable method of the jQuery UI library. It is being called upon the li elements of the ul source, which means it will make all the list items draggable inside the source ul. Further, we are also giving the draggable method three options that we need for our application: revert, revertDuration, and cursor. Let's look at these in more detail:
revert: This decides whether the element being dragged should revert to its original position or not. In our case, we will set it totrue. We will drag a country name onto a capital name and revert it to its original position, that is, the country list. Another possible value forrevertisfalse, which means it will stay at the place where it is when dragging stops. The values,validandinvalid, can also be provided (as strings) for therevertoption. The valuevalidmeans the draggable object will revert only if the draggable object has been dropped on a droppable element. The valueinvalidmeans thedraggablefuction will revert if the draggable object has not been dropped. Alternatively, a function can also be provided to revert. This is required in complex cases where we need to perform any manipulations. Thereturnvalue for this function will decide if it will revert or not. Iftrueis returned, the element will revert.revertDuration: This defines the duration for therevertoption in milliseconds. The lower the value, the faster it will revert. This value is not considered if the revert option is set tofalse.cursor: This is the style of cursor while an element is being dragged.
Our draggable elements are ready now, and so it is time to make the capital names droppable and build the logic to match countries to their correct capitals.
Droppable capital names and scoring
In the previous section, we created an initQuiz function where we made our countries draggable. After the draggable code, write the following code to make the capitals droppable:
Now save the quiz.js file and refresh your browser. You will be able to drag the country names now. Drag a country name to its correct capital and you will see that the country will revert to its original position. The capital list item will show a bounce effect and its text will change to Correct!. Both the country and capital names will be disabled now. You will not be able to drag the country name as well. On the top left hand side, the page will show the score as 1 points.
The screen will look like the following screenshot:
Try the drag and drop for all countries in the left-hand side list. When you have matched all countries correctly, you will see a dialog box and the page will look like the following screenshot:
So, a lot is happening in the preceding code. We will look at it step by step.
We defined a variable named totalScore and set it to 0. We also inserted the score inside the HTML element with the id value score. Each time the quiz starts, the score will be reset as well. After this, we call the droppable method of jQuery UI on the list items of ul with the id value target to make them ready to accept the draggable country elements.
We are using the...
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.