← Back to jQuery Course | Chapter 13: jQuery UI | Lesson 3 of 5

ज़रूरी UI Widgets

datepicker users को date choose करने के लिए एक calendar देता है। यह forms में commonly इस्तेमाल होता है।

In this page:

  1. Datepicker
  2. Dialog
  3. Tabs
  4. Accordion और Autocomplete
  5. एक छोटा Widget Project
Syntax
javascript 
$(selector).widgetName({ option: value });

Datepicker

datepicker widget एक input field से एक pop-up calendar attach करता है ताकि users किसी specific format में type करने के बजाय visually एक date pick कर सकें।

उदाहरण: Datepicker

javascript 
<!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>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="date">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Dialog

dialog widget content को एक movable, अक्सर modal window में दिखाता है जो page के बाकी हिस्से के ऊपर float करता है, और इसे programmatically खोला और बंद किया जा सकता है।

उदाहरण: Dialog

javascript 
<!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>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="dialog" title="Confirm">Are you sure?</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#dialog").dialog();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Tabs

tabs widget related content को अलग panels में organize करता है जो एक visible area share करते हैं, users को एक tab label click करके उनके बीच switch करने देते हुए।

उदाहरण: Tabs

javascript 
<!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>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
    #demo .ui-state-active, #demo .ui-state-active a { color:#1a1a1a; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <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>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#tabs").tabs();
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Accordion और Autocomplete

accordion widget expandable और collapsible sections दिखाता है, एक समय में एक section का content दिखाते हुए space बचाने के लिए। Autocomplete matching।

उदाहरण: Accordion and Autocomplete

javascript 
<!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>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
    #demo .ui-state-active, #demo .ui-state-active a { color:#1a1a1a; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="accordion">
      <h3>Section 1</h3><div>Content 1</div>
      <h3>Section 2</h3><div>Content 2</div>
    </div>
    <input id="auto">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#accordion").accordion();
      $("#auto").autocomplete({source: ["Apple", "Banana"]});
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

एक छोटा Widget Project

ये widgets पूरे forms और interfaces जल्दी बनाने के लिए अक्सर combine किए जाते हैं — उदाहरण के लिए, एक datepicker और एक autocomplete field वाला एक dialog।

उदाहरण: Small Widget Project

javascript 
<!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>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="dialog" title="Book Appointment">
      <input id="date">
    </div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
      $("#dialog").dialog();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

jQuery UI का Introduction · jQuery UI को Customize करना · Interaction हेल्पर्स · Custom Transitions और Easing

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. DOM ready होने से पहले किसी <div> या <input> पर .datepicker() call करना, ताकि element न मिले और कुछ न हो।
  2. यह उम्मीद करना कि .dialog() सिर्फ demand पर खुलेगा, जबकि यह तुरंत खुल जाता है जब तक आप autoOpen: false pass न करें।
  3. matching ids के बिना .tabs() markup बनाना, जैसे <a href="#tab-1"> बिना किसी element id="tab-1" के, ताकि panels खाली रहें।
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Interaction Helpers Next Lesson → Custom Transitions and Easing

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.