w3resource

jQuery UI Practical exercises, practice, solution - Fundamental-I

jQuery UI Fundamental - I exercises [ 50 exercises with solution ]

[An editor is available at the bottom of the page to write and execute the scripts. Go to the editor]

1. Convert three headers and content panels into an accordion. Initialize the accordion and active the second option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

2. Convert three headers and content panels into an accordion. Initialize the accordion and specify the animate option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

3. Convert three headers and content panels into an accordion. Initialize the accordion and specify the collapsible option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

4. Convert three headers and content panels into an accordion. Initialize the accordion and specify the disabled option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

5. Convert three headers and content panels into an accordion. Initialize the accordion and specify the event.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

6. Convert three headers and content panels into an accordion. Initialize the accordion and specify the header option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h2>jQuery</h2>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h2>jQuery UI</h2>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h2>jQuiry Mobile</h2>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

7. Convert three headers and content panels into an accordion. Initialize the accordion and specify the height.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h2>jQuery</h2>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h2>jQuery UI</h2>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h2>jQuiry Mobile</h2>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

8. Convert three headers and content panels into an accordion. Initialize the accordion and specify the icon (+, -) option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

9. Create a pre-populated list of values and focus on the first item when the menu is shown.

You can see the output from here

Click me to see the solution

10. Create a pre-populated list of values and delay in milliseconds between a keystroke occurs and a search is performed.

You can see the output from here

Click me to see the solution

11. Create a pre-populated list of values and disables the autocomplete.

Click me to see the solution

12. Create a pre-populated list of values and fixed minimum number of characters in two, a user must type before a search is performed.

Click me to see the solution

13. Create a pre-populated list of values and initialize the autocomplete position right top and right bottom.

Click me to see the solution

14. Initialize the autocomplete and specify the source option.

Click me to see the solution

15. Initialize the button and specify the disable option.

Click me to see the solution

16. Initialize the button and specify an icon on the button.

Click me to see the solution

17. Initialize the button and do not show the label.

Click me to see the solution

18. Initialize the buttonset and specify disabled option true.

Click me to see the solution

19. Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox.

Click me to see the solution

20. Initialize the datepicker. Now pick a date from the datepicker into a textbox and update the date in another textbox.

Click me to see the solution

21. Create a simple jQuery UI Datepicker. Show the required date format after the date field.

Click me to see the solution

22. Initialize the datepicker and autoSize the date field.

Click me to see the solution

23. Initialize the datepicker and display a button Image.

Click me to see the solution

24. Initialize the datepicker and show a button text.

Click me to see the solution

25. Initialize the datepicker and calculate the week of the year. Use the default implementation ISO 8601.

Click me to see the solution

26. Initialize the datepicker and rendered the month as a dropdown instead of text.

Click me to see the solution

27. Initialize the datepicker and rendered the year as a dropdown instead of text.

Click me to see the solution

28. Initialize the datepicker and specify the date format.

Click me to see the solution

29. Initialize the datepicker and specify the day names in French.

Click me to see the solution

30. Initialize the datepicker with minimized day names, starting from Sunday.

Click me to see the solution

31. Initialize the datepicker and set the duration fast.

Click me to see the solution

32. Initialize the datepicker and set the first day of the week as Monday.

Note:Sunday is 0, Monday is 1 etc.

Click me to see the solution

33. Initialize the datepicker and draw current language from right to left.

Click me to see the solution

34. Initialize the datepicker and display number of days one month from today.

Click me to see the solution

35. Initialize the datepicker and display number of days from current date.

Click me to see the solution

36. Initialize the datepicker and specify the month names.

Click me to see the solution

37. Initialize the datepicker and specify the month names in short form.

Click me to see the solution

38. Initialize the datepicker and change the text to display for the next month link.

Click me to see the solution

39. Initialize the datepicker and set two rows and display two months in a single row.

Click me to see the solution

40. Initialize the datepicker and change the text to display for the previous month link.

Click me to see the solution

41. Initialize the datepicker and display dates in other months at the start or end of the current month.

Click me to see the solution

42. Initialize the datepicker and create an animation to show and hide the datepicker.

Click me to see the solution

43. Initialize the datepicker and display a button panel underneath the calendar.

Note: The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons' text can be customized using the currentText and closeText options respectively.

Click me to see the solution

44. Initialize the datepicker and display two months and defines position one to display the current month in.

Click me to see the solution

45. Initialize the datepicker and show the month before or after the year in the header.

Click me to see the solution

46. Initialize the datepicker and it will appear when a button is clicked.

Click me to see the solution

47. Initialize the datepicker and display dates in other months.

Click me to see the solution

48. Initialize the datepicker and add a column to show the week of the year.

Click me to see the solution

49. Initialize the datepicker with two months to move when clicking the previous or next links.

Click me to see the solution

50. Initialize the datepicker and specify a text to display for the week of the year column heading.

Click me to see the solution

More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.

See the Pen jquery-ui-common-editor by w3resource (@w3resource) on CodePen.



Follow us on Facebook and Twitter for latest update.