Essential UI Widgets
In this page:
$(selector).widgetName({ option: value });Datepicker
datepicker widget एक input field से एक pop-up calendar attach करता है ताकि users किसी specific format में type करने के बजाय visually एक date pick कर सकें।
उदाहरण: Datepicker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<input id="date">
<script>
$("#date").datepicker();
</script>
</body>
</html>Dialog
dialog widget content को एक movable, अक्सर modal window में दिखाता है जो page के बाकी हिस्से के ऊपर float करता है, और इसे programmatically खोला और बंद किया जा सकता है।
उदाहरण: Dialog
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="Confirm">Are you sure?</div>
<script>
$("#dialog").dialog();
</script>
</body>
</html>Tabs
tabs widget related content को अलग panels में organize करता है जो एक visible area share करते हैं, users को एक tab label click करके उनके बीच switch करने देते हुए।
उदाहरण: Tabs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul><li><a href="#tab1">One</a></li><li><a href="#tab2">Two</a></li></ul>
<div id="tab1">Content 1</div>
<div id="tab2">Content 2</div>
</div>
<script>
$("#tabs").tabs();
</script>
</body>
</html>Accordion और Autocomplete
accordion widget expandable और collapsible sections दिखाता है, एक समय में एक section का content दिखाते हुए space बचाने के लिए। Autocomplete matching।
उदाहरण: Accordion and Autocomplete
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3><div>Content 1</div>
<h3>Section 2</h3><div>Content 2</div>
</div>
<input id="auto">
<script>
$("#accordion").accordion();
$("#auto").autocomplete({source: ["Apple", "Banana"]});
</script>
</body>
</html>एक छोटा Widget Project
ये widgets पूरे forms और interfaces जल्दी बनाने के लिए अक्सर combine किए जाते हैं — उदाहरण के लिए, एक datepicker और एक autocomplete field वाला एक dialog।
उदाहरण: Small Widget Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="Book Appointment">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog();
</script>
</body>
</html>- DOM ready होने से पहले किसी
<div>या<input>पर.datepicker()call करना, ताकि element न मिले और कुछ न हो। - यह उम्मीद करना कि
.dialog()सिर्फ demand पर खुलेगा, जबकि यह तुरंत खुल जाता है जब तक आपautoOpen: falsepass न करें। - matching ids के बिना
.tabs()markup बनाना, जैसे<a href="#tab-1">बिना किसी elementid="tab-1"के, ताकि panels खाली रहें।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: