jQuery UI को Customize करना
In this page:
$("selector").widgetName({
option: value,
anotherOption: value
});Widget Options Customize करना
ज़्यादातर jQuery UI widgets initialization पर एक configuration object accept करते हैं जो आपको उनके default behavior और appearance को override करने देता है — उदाहरण के लिए, set।
उदाहरण: Customize Widget Options
<!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({minDate: 0});
</script>
</body>
</html>Buttons Customize करना
button widget plain buttons और links को browsers पर एक consistent visual style देता है, और यह icons तथा disabled जैसी अलग visual states support करता है।
उदाहरण: Customize Buttons
<!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">Save</button>
<script>
$("#btn").button({icon: "ui-icon-disk"});
</script>
</body>
</html>Dialogs Customize करना
Dialog options size, starting position, dialog page के बाकी हिस्से के साथ interaction block करता है या नहीं (modal), और खुलने पर क्या होता है control करते हैं।
उदाहरण: Customize Dialogs
<!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="Settings">Options</div>
<script>
$("#dialog").dialog({modal: true, width: 400});
</script>
</body>
</html>Widgets Combine करना
एक ही page पर कई jQuery UI widgets साथ काम कर सकते हैं — उदाहरण के लिए, एक datepicker वाला एक resizable dialog — और कुछ widgets को combine करना।
उदाहरण: Combine Widgets
<!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="Pick a date">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog({resizable: true});
</script>
</body>
</html>एक छोटा Custom UI Project
एक पूरी तरह customized jQuery UI page आमतौर पर कई widgets, draggable या sortable जैसी एक या ज़्यादा interactions, और एक पर consistent easing combine करता है।
उदाहरण: Small Custom UI 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="Schedule">
<input id="date">
</div>
<script>
$("#date").datepicker();
$("#dialog").dialog({modal: true});
</script>
</body>
</html>- initialization के बाद फिर
.dialog({ width: 600 })call करके options pass करना, जबकि इसे.dialog("option", "width", 600)से set किया जाना चाहिए। - किसी dialog पर
modal: trueset करना और इसे बंद करने का कोई तरीका भूल जाना, जैसेbuttonsoption, page को blocked छोड़ते हुए। - elements पर
.button()इस्तेमाल करना और jQuery UI CSS के बिना theme काम करने की उम्मीद करना, ताकि buttons plain दिखें।
- jQuery UI jQuery के ऊपर interaction helpers और widgets add करता है।
- Essential widgets ready-made interface components देते हैं।
- Custom transitions और easing, और customization, यह adjust करते हैं कि यह कैसा दिखता और चलता है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: