How to use jQuery UI in HTML - jQuery UI Tutorial 04

Опубликовано: 28 Сентябрь 2024
на канале: ChidresTechTutorials

9,307

124

Notes for You:: How to use jQuery UI in HTML - jQuery UI Tutorial 04

1. Create a new folder with the name jQueryUI Demos.

2. Create a folder with the name jquery-ui within the jQueryUI Demos folder.

3. Copy and paste the below mentioned files and folders from jquery-ui-1.12.1 folder to jquery-ui folder.
- external folder
- images folder
- jquery-ui.min.css file
- jquery-ui.min.js file

4. Create and save a new html document with the name default.html in jQueryUI Demos folder.

5. Link the necessary jquery ui library CSS and javascript files to default.html document.
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

6. Call jQuery UI functions on html elements.

<div id="datepicker"></div>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>

default.html Complete Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Date picker Demo</title>

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<div id="datepicker"></div>

<script type="text/javascript">
$("#datepicker").datepicker();
</script>
</body>
</html>

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:
jQuery UI Tutorial 05 - Introduction to jQuery UI Widgets Tutorial
   • jQuery UI Widgets Tutorial - jQuery U...

Follow the link for previous video:
jQuery UI Tutorial 03 - How to Download jQuery UI | Where to Download jQuery UI
   • How to Download jQuery UI - jQuery UI...

=========================================

jQuery UI Tutorials Playlist:-
   • jQuery UI Tutorials

=========================================
Watch My Other Useful Tutorials:-

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials

PHP Tutorials Playlist:-
   • PHP Tutorials

=========================================

► Subscribe to our YouTube channel:
   / chidrestechtutorials

► Visit our Website:
https://www.chidrestechtutorials.com

=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial