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.]1. Convert three headers and content panels into an accordion. Initialize the accordion and active the second option. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
You can see the output from here
11. Create a pre-populated list of values and disables the autocomplete. Go to the editor
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. Go to the editor
13. Create a pre-populated list of values and initialize the autocomplete position right top and right bottom. Go to the editor
14. Initialize the autocomplete and specify the source option. Go to the editor
15. Initialize the button and specify the disable option. Go to the editor
16. Initialize the button and specify an icon on the button. Go to the editor
17. Initialize the button and do not show the label. Go to the editor
18. Initialize the buttonset and specify disabled option true. Go to the editor
19. Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox. Go to the editor
20. Initialize the datepicker. Now pick a date from the datepicker into a textbox and update the date in another textbox. Go to the editor
21. Create a simple jQuery UI Datepicker. Show the required date format after the date field. Go to the editor
22. Initialize the datepicker and autoSize the date field. Go to the editor
23. Initialize the datepicker and display a button Image. Go to the editor
24. Initialize the datepicker and show a button text. Go to the editor
25. Initialize the datepicker and calculate the week of the year. Use the default implementation ISO 8601. Go to the editor
26. Initialize the datepicker and rendered the month as a dropdown instead of text. Go to the editor
27. Initialize the datepicker and rendered the year as a dropdown instead of text. Go to the editor
28. Initialize the datepicker and specify the date format. Go to the editor
29. Initialize the datepicker and specify the day names in French. Go to the editor
30. Initialize the datepicker with minimized day names, starting from Sunday. Go to the editor
31. Initialize the datepicker and set the duration fast. Go to the editor
32. Initialize the datepicker and set the first day of the week as Monday. Go to the editor
Note:Sunday is 0, Monday is 1 etc.
33. Initialize the datepicker and draw current language from right to left. Go to the editor
34. Initialize the datepicker and display number of days one month from today. Go to the editor
35. Initialize the datepicker and display number of days from current date. Go to the editor
36. Initialize the datepicker and specify the month names. Go to the editor
37. Initialize the datepicker and specify the month names in short form. Go to the editor
38. Initialize the datepicker and change the text to display for the next month link. Go to the editor
39. Initialize the datepicker and set two rows and display two months in a single row. Go to the editor
40. Initialize the datepicker and change the text to display for the previous month link. Go to the editor
41. Initialize the datepicker and display dates in other months at the start or end of the current month. Go to the editor
42. Initialize the datepicker and create an animation to show and hide the datepicker. Go to the editor
43. Initialize the datepicker and display a button panel underneath the calendar. Go to the editor
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. Go to the editor
45. Initialize the datepicker and show the month before or after the year in the header. Go to the editor
46. Initialize the datepicker and it will appear when a button is clicked. Go to the editor
47. Initialize the datepicker and display dates in other months. Go to the editor
48. Initialize the datepicker and add a column to show the week of the year. Go to the editor
49. Initialize the datepicker with two months to move when clicking the previous or next links. Go to the editor
50. Initialize the datepicker and specify a text to display for the week of the year column heading. Go to the editor
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.
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework