jQuery UI का Introduction
In this page:
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
$("selector").widgetName(options);jQuery UI क्या है?
jQuery UI jQuery को datepickers, dialogs, sliders, और tabs जैसे pre-built, themeable interface widgets की एक library से extend करता है, आपको इन्हें बनाने से बचाते हुए।
उदाहरण: What is jQuery UI?
<!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="date">Pick a date</div>
<script>
$("#date").datepicker();
</script>
</body>
</html>jQuery UI CSS
jQuery UI एक theme stylesheet के साथ आता है जो हर widget के लिए default visual styling देता है — buttons, borders, spacing, और hover जैसी states।
उदाहरण: jQuery UI CSS
<!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>
<button id="btn">Styled Button</button>
<script>
$("#btn").button();
</script>
</body>
</html>पहला Interactive Widget
jQuery UI widgets एक jQuery selection पर किसी widget का initialization method call करके plain HTML elements को richer interactive controls में बदल देते हैं।
उदाहरण: First Interactive Widget
<!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>Themes और Appearance
एक jQuery UI theme colors, borders, spacing, और overall appearance control करता है जो हर widget इस्तेमाल करता है, और themes को पूरी तरह look बदलने के लिए swap किया जा सकता है।
उदाहरण: Themes and Appearance
<!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>
<button id="btn">Themed Button</button>
<script>
// Swapping the linked jquery-ui.css theme file changes this button's look with no JS changes
$("#btn").button();
</script>
</body>
</html>एक छोटा Introduction Project
एक ही page पर कई jQuery UI components combine किए जा सकते हैं — उदाहरण के लिए, एक dialog के अंदर एक datepicker, या एक sortable list के अंदर draggable items।
उदाहरण: Small Introduction 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="Basic dialog">Dialog content</div>
<script>
$("#dialog").dialog();
</script>
</body>
</html>- jQuery UI script load करना लेकिन उसका CSS theme नहीं, ताकि dialogs और datepickers जैसे widgets unstyled या टूटे हुए दिखें।
- jQuery UI को जQuery से पहले load करना, ताकि
$.fnmissing हो जाए और$("#box").draggable()जैसी calls error throw करें। - jQuery UI को core jQuery से confuse करना और सिर्फ jQuery script load होने पर
.datepicker()के exist करने की उम्मीद करना।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: