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
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
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
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
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
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
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
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
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
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
11. Create a pre-populated list of values and disables the autocomplete.
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.
13. Create a pre-populated list of values and initialize the autocomplete position right top and right bottom.
14. Initialize the autocomplete and specify the source option.
15. Initialize the button and specify the disable option.
16. Initialize the button and specify an icon on the button.
17. Initialize the button and do not show the label.
18. Initialize the buttonset and specify disabled option true.
19. Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox.
20. Initialize the datepicker. Now pick a date from the datepicker into a textbox and update the date in another textbox.
21. Create a simple jQuery UI Datepicker. Show the required date format after the date field.
22. Initialize the datepicker and autoSize the date field.
23. Initialize the datepicker and display a button Image.
24. Initialize the datepicker and show a button text.
25. Initialize the datepicker and calculate the week of the year. Use the default implementation ISO 8601.
26. Initialize the datepicker and rendered the month as a dropdown instead of text.
27. Initialize the datepicker and rendered the year as a dropdown instead of text.
28. Initialize the datepicker and specify the date format.
29. Initialize the datepicker and specify the day names in French.
30. Initialize the datepicker with minimized day names, starting from Sunday.
31. Initialize the datepicker and set the duration fast.
32. Initialize the datepicker and set the first day of the week as Monday.
Note:Sunday is 0, Monday is 1 etc.
33. Initialize the datepicker and draw current language from right to left.
34. Initialize the datepicker and display number of days one month from today.
35. Initialize the datepicker and display number of days from current date.
36. Initialize the datepicker and specify the month names.
37. Initialize the datepicker and specify the month names in short form.
38. Initialize the datepicker and change the text to display for the next month link.
39. Initialize the datepicker and set two rows and display two months in a single row.
40. Initialize the datepicker and change the text to display for the previous month link.
41. Initialize the datepicker and display dates in other months at the start or end of the current month.
42. Initialize the datepicker and create an animation to show and hide the datepicker.
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.
44. Initialize the datepicker and display two months and defines position one to display the current month in.
45. Initialize the datepicker and show the month before or after the year in the header.
46. Initialize the datepicker and it will appear when a button is clicked.
47. Initialize the datepicker and display dates in other months.
48. Initialize the datepicker and add a column to show the week of the year.
49. Initialize the datepicker with two months to move when clicking the previous or next links.
50. Initialize the datepicker and specify a text to display for the week of the year column heading.
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.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/jquery-ui-exercises/1/index.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics