In this article we’ll learn about designing beautiful website using JQuery UI User Interface Beautiful Web Design using JQuery UI. JQuery UI contains many user friendly website graphics like accordions, slide bar, datepicker and more its a combination of JavaScript and CSS library, we can implement with no cost on our websites.
JQuery UI is developed by JQuery a JavaScript library. it has very nice collaborative design, handy and flexible design, Elegant API.
Jquery UI:
JQuery UI contais Draggables, dropables, accordians, datepickers amny widgets and effects.
yo install Jquery UI in your development just add CDN link to your web page.
if you dont have live internet connection you can download the file from here and link to your html document using link tag since JQuery uses both JavaScript and CSS libraries. we’ve to link JQuery and jquery CSS files to our HTML document
<!–add this lines on top of your HTML near head tag–>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
and for offline users download file whcih contain all related CSS and JS files from here Practical Example of JQuery Accordion:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>jQuery UI Accordion – Default functionality</title>
<link rel=”stylesheet” href=”
//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”
https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script>
$( function() {
$( “#accordion” ).accordion();
} );
</script>
</head>
<body>
<div id=”accordion”>
<h3>Section 1</h3>
<div>
<p>
dummy words here
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
dummy words here
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
dummy words here
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
dummy words here
</p>
<p>
dummy words here
</p>
</div>
</div>
</body>
</html>
This Code Generates following Accordion. you can implement it on side bar or wherever you want, if you go to JQuery UI official site you can learn and implement practically all the JQuery UI library.
I hope this article was helpful to start JQuery UI on your website ..
