Download JQuery-UI from their website. It comes as a zip with lots of things.
All we needs are the following .js files:
jquery-1.7.1.min.js
jquery-ui-1.8.16.custom.min.js
jquery.ui.core.js
jquery.ui.datepicker.js
Copy these files to the /web-content/js folder in your HelloWorld project.
Type (or copy-paste) the following in your HelloWorld.jsp:
<html>
<head>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../js/jquery.ui.core.js"></script>
<script src="../js/jquery.ui.datepicker.js"></script>
</head>
<body>
Enter your birthday: <input id="datepicker" type="text">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</body>
</html> Now if you build and deploy HelloWorld and point your browser to:
http://localhost:8080/HelloWorld/jsp/HelloWorld.jsp
You will see a calendar popup when you click on the date field.
JQuery-UI made it possible to create a complex UI effect with a single line of code!
Note that you can easily associate fancy skins with the calendar - we have demonstrated just the bare-bones version.
No comments:
Post a Comment