JqueryUI - संवाद

डायलॉग बॉक्स एक HTML पृष्ठ पर जानकारी प्रस्तुत करने के अच्छे तरीकों में से एक हैं। एक संवाद बॉक्स एक शीर्षक और सामग्री क्षेत्र के साथ एक अस्थायी खिड़की है। डिफ़ॉल्ट रूप से "X" आइकन का उपयोग करके इस विंडो को स्थानांतरित, आकार और निश्चित रूप से बंद किया जा सकता है।

jQueryUI प्रदान करता है dialog() वह विधि जो पृष्ठ पर लिखे गए HTML कोड को डायलॉग बॉक्स प्रदर्शित करने के लिए HTML कोड में बदल देती है।

वाक्य - विन्यास

dialog() विधि का उपयोग दो रूपों में किया जा सकता है -

$ (चयनकर्ता, संदर्भ) .dialog (विकल्प) विधि
$ (चयनकर्ता, संदर्भ) .dialog ("एक्शन", [परम]] विधि

$ (चयनकर्ता, संदर्भ) .dialog (विकल्प) विधि

संवाद (विकल्प) विधि घोषणा करता है कि किसी HTML तत्व एक संवाद बॉक्स के रूप में नियंत्रित किया जा सकता। विकल्प पैरामीटर एक उद्देश्य यह है कि उपस्थिति और उस खिड़की के व्यवहार निर्दिष्ट करता है।

वाक्य - विन्यास

$(selector, context).dialog(options);

आप जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके एक समय में एक या अधिक विकल्प प्रदान कर सकते हैं। यदि एक से अधिक विकल्प प्रदान किए जाने हैं, तो आप उन्हें निम्नानुसार अल्पविराम का उपयोग करके अलग कर देंगे -

$(selector, context).dialog({option1: value1, option2: value2..... });

निम्न तालिका उन विभिन्न विकल्पों को सूचीबद्ध करती है जिनका उपयोग इस विधि के साथ किया जा सकता है -


$(".selector").dialog(
   { appendTo: "#identifier" }
);
$(".selector").dialog(
   { autoOpen: false }
);
$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
$(".selector").dialog(
   { closeOnEscape: false }
);
$(".selector").dialog(
   { closeText: "hide" }
);
$(".selector").dialog(
   { dialogClass: "alert" }
);
$(".selector").dialog(
   { draggable: false }
);
$(".selector").dialog(
   { height: 400 }
);
$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").dialog(
   { maxHeight: 600 }
);
$(".selector").dialog(
   { maxWidth: 600 }
);
$(".selector").dialog(
   { minHeight: 200 }
);
$(".selector").dialog(
   { minWidth: 200 }
);
$(".selector").dialog(
   { modal: true }
);
$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
$(".selector").dialog(
   { resizable: false }
);
$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").dialog(
   { title: "Dialog Title" }
);
$(".selector").dialog(
   { width: 500 }
);

अनु क्रमांक।	विकल्प और विवरण
1	जोङना यदि यह विकल्प सेट है false, यह रोक देगा ui-draggableचयनित DOM तत्वों की सूची में जोड़े जाने से वर्ग। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - appendTo इस विकल्प का उपयोग संवाद बॉक्स को निर्दिष्ट तत्व में जोड़ने के लिए किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य है"body"। Syntax `$(".selector").dialog( { appendTo: "#identifier" } );`
2	AutoOpen यह विकल्प जब तक गलत पर सेट नहीं हो जाता , तब तक डायलॉग बॉक्स निर्माण पर खोला जाता है। जब झूठी संवाद करने के लिए ( 'खुला'), संवाद बॉक्स एक फोन पर खोला जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - autoOpen यह विकल्प जब तक गलत पर सेट नहीं हो जाता , तब तक डायलॉग बॉक्स निर्माण पर खोला जाता है। जब झूठी संवाद करने के लिए ( 'खुला'), संवाद बॉक्स एक फोन पर खोला जाएगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax `$(".selector").dialog( { autoOpen: false } );`
3	बटन यह विकल्प संवाद बॉक्स में बटन जोड़ता है। इन्हें ऑब्जेक्ट के रूप में सूचीबद्ध किया गया है, और प्रत्येक गुण बटन पर पाठ है। मूल्य एक कॉलबैक फ़ंक्शन है जिसे उपयोगकर्ता बटन पर क्लिक करता है। डिफ़ॉल्ट रूप से इसका मूल्य है{}। Option - buttons यह विकल्प संवाद बॉक्स में बटन जोड़ता है। इन्हें ऑब्जेक्ट के रूप में सूचीबद्ध किया गया है, और प्रत्येक गुण बटन पर पाठ है। मूल्य एक कॉलबैक फ़ंक्शन है जिसे उपयोगकर्ता बटन पर क्लिक करता है। डिफ़ॉल्ट रूप से इसका मूल्य है{}। इस हैंडलर को डायलॉग बॉक्स एलिमेंट के फंक्शन सन्दर्भ के साथ लगाया जाता है, और टारगेट प्रॉपर्टी के रूप में सेट बटन के साथ इवेंट इंस्टेंस पास किया जाता है। यदि छोड़ दिया जाता है, तो संवाद बॉक्स के लिए कोई बटन नहीं बनाया जाता है। Syntax `$(".selector").dialog( { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] } );`
4	closeOnEscape जब तक यह विकल्प गलत पर सेट नहीं हो जाता , तब संवाद बॉक्स बंद हो जाएगा जब उपयोगकर्ता डायल कुंजी को दबाएगा, जबकि संवाद बॉक्स में फोकस होगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - closeOnEscape जब तक यह विकल्प गलत पर सेट नहीं हो जाता , तब संवाद बॉक्स बंद हो जाएगा जब उपयोगकर्ता डायल कुंजी को दबाएगा, जबकि संवाद बॉक्स में फोकस होगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax `$(".selector").dialog( { closeOnEscape: false } );`
5	closeText इस विकल्प में क्लोज़ बटन के लिए क्लोज़ के डिफ़ॉल्ट को बदलने के लिए टेक्स्ट है। डिफ़ॉल्ट रूप से इसका मूल्य है"close"। Option - closeText इस विकल्प में क्लोज़ बटन के लिए क्लोज़ के डिफ़ॉल्ट को बदलने के लिए टेक्स्ट है। डिफ़ॉल्ट रूप से इसका मूल्य है"close"। Syntax `$(".selector").dialog( { closeText: "hide" } );`
6	dialogClass यदि यह विकल्प सेट है false, यह रोक देगा ui-draggableचयनित DOM तत्वों की सूची में जोड़े जाने से वर्ग। डिफ़ॉल्ट रूप से इसका मूल्य है""। Option - dialogClass यदि यह विकल्प सेट है false, यह रोक देगा ui-draggableचयनित DOM तत्वों की सूची में जोड़े जाने से वर्ग। डिफ़ॉल्ट रूप से इसका मूल्य है""। Syntax `$(".selector").dialog( { dialogClass: "alert" } );`
7	खींचने योग्य जब तक आप इस विकल्प को false, डायलॉग बॉक्स टाइटल बार पर क्लिक करके और खींचकर खींचा जा सकेगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - draggable जब तक आप इस विकल्प को false, डायलॉग बॉक्स टाइटल बार पर क्लिक करके और खींचकर खींचा जा सकेगा। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax `$(".selector").dialog( { draggable: false } );`
8	ऊंचाई यह विकल्प संवाद बॉक्स की ऊंचाई निर्धारित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है"auto"। Option - height यदि यह विकल्प संवाद बॉक्स की ऊंचाई निर्धारित करता है। डिफ़ॉल्ट रूप से इसका मूल्य है"auto"। यह विकल्प प्रकार का हो सकता है - यह प्रकार का हो सकता है - Number - यह मिलीसेकंड में अवधि निर्दिष्ट करता है String- एकमात्र समर्थित स्ट्रिंग मान ऑटो है जो संवाद की ऊंचाई को उसकी सामग्री के आधार पर समायोजित करने की अनुमति देगा। Syntax `$(".selector").dialog( { height: 400 } );`
9	छिपाना संवाद बॉक्स बंद होने पर उपयोग किए जाने वाले प्रभाव को सेट करने के लिए इस विकल्प का उपयोग किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Option - hide संवाद बॉक्स बंद होने पर उपयोग किए जाने वाले प्रभाव को सेट करने के लिए इस विकल्प का उपयोग किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। यह प्रकार का हो सकता है - Boolean- मूल्य सही / गलत हो सकते हैं । यदि झूठे एनीमेशन का उपयोग नहीं किया जाएगा और संवाद तुरंत छिपा दिया जाएगा। यदि सही है , तो संवाद डिफ़ॉल्ट अवधि और डिफ़ॉल्ट सहजता के साथ मिट जाएगा। Number - निर्दिष्ट अवधि और डिफ़ॉल्ट सहजता के साथ संवाद फीका हो जाएगा। String- स्लाइडअप , गुना जैसे निर्दिष्ट प्रभाव का उपयोग करके संवाद छिपाया जाएगा । Object- यदि मूल्य एक वस्तु है, तो संवाद को छिपाने के लिए प्रभाव, देरी, अवधि और सहजता प्रदान की जा सकती है। 10 Syntax `$(".selector").dialog( { hide: { effect: "explode", duration: 1000 } } );`
1 1	अधिकतम ऊँचाई यह विकल्प पिक्सल में अधिकतम ऊंचाई निर्धारित करता है, जिससे संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - maxHeight यह विकल्प पिक्सल में अधिकतम ऊंचाई निर्धारित करता है, जिससे संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$(".selector").dialog( { maxHeight: 600 } );`
12	अधिकतम चौड़ाई यह विकल्प अधिकतम चौड़ाई निर्धारित करता है, जिसमें संवाद को पिक्सेल में आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - maxWidth यह विकल्प अधिकतम चौड़ाई निर्धारित करता है, जिसमें संवाद को पिक्सेल में आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$(".selector").dialog( { maxWidth: 600 } );`
13	minHeight यह विकल्प पिक्सल में न्यूनतम ऊंचाई है, जिस पर संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है150। Option - minHeight यह विकल्प पिक्सल में न्यूनतम ऊंचाई है, जिस पर संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है150। Syntax `$(".selector").dialog( { minHeight: 200 } );`
14	minWidth यह विकल्प पिक्सल में न्यूनतम चौड़ाई है, जिससे संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है150। Option - minWidth यह विकल्प पिक्सल में न्यूनतम चौड़ाई है, जिससे संवाद बॉक्स को आकार दिया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है150। Syntax `$(".selector").dialog( { minWidth: 200 } );`
15	मॉडल यदि यह विकल्प सेट है trueसंवाद में मधुर व्यवहार होगा; पृष्ठ पर अन्य आइटम अक्षम हो जाएंगे, अर्थात, उनके साथ सहभागिता नहीं की जा सकती। मोडल संवाद डायलॉग के नीचे लेकिन अन्य पृष्ठ तत्वों के ऊपर एक ओवरले बनाते हैं। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - modal यदि यह विकल्प सेट है trueसंवाद में मधुर व्यवहार होगा; पृष्ठ पर अन्य आइटम अक्षम हो जाएंगे, अर्थात, उनके साथ सहभागिता नहीं की जा सकती। मोडल संवाद डायलॉग के नीचे लेकिन अन्य पृष्ठ तत्वों के ऊपर एक ओवरले बनाते हैं। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$(".selector").dialog( { modal: true } );`
16	पद यह विकल्प संवाद बॉक्स की प्रारंभिक स्थिति को निर्दिष्ट करता है। पूर्वनिर्धारित पदों में से एक हो सकता है: केंद्र (डिफ़ॉल्ट), बाएँ, दाएँ, ऊपर या नीचे । बाएं और शीर्ष मानों (पिक्सेल में) के साथ एक 2-तत्व सरणी भी हो सकती है जैसे कि [बाएँ, शीर्ष], या पाठ स्थिति जैसे कि '' सही ',' शीर्ष ']। डिफ़ॉल्ट रूप से इसका मूल्य है{ my: "center", at: "center", of: window }। Option - position यह विकल्प संवाद बॉक्स की प्रारंभिक स्थिति को निर्दिष्ट करता है। पूर्वनिर्धारित पदों में से एक हो सकता है: केंद्र (डिफ़ॉल्ट), बाएँ, दाएँ, ऊपर या नीचे । बाएं और शीर्ष मानों (पिक्सेल में) के साथ एक 2-तत्व सरणी भी हो सकती है जैसे कि [बाएँ, शीर्ष], या पाठ स्थिति जैसे कि '' सही ',' शीर्ष ']। डिफ़ॉल्ट रूप से इसका मूल्य है{ my: "center", at: "center", of: window }। Syntax `$(".selector").dialog( { position: { my: "left top", at: "left bottom", of: button } } );`
17	आकार बदलने योग्य यह विकल्प जब तक सेट न हो falseसंवाद बॉक्स सभी दिशाओं में resizable है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - resizable यह विकल्प जब तक सेट न हो falseसंवाद बॉक्स सभी दिशाओं में resizable है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Syntax `$(".selector").dialog( { resizable: false } );`
18	प्रदर्शन यह विकल्प डायलॉग बॉक्स खोले जाने पर उपयोग किए जाने वाला एक प्रभाव है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Option - show यह विकल्प डायलॉग बॉक्स खोले जाने पर उपयोग किए जाने वाला एक प्रभाव है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। यह प्रकार का हो सकता है - Boolean- मूल्य सही / गलत हो सकते हैं । यदि झूठे एनीमेशन का उपयोग नहीं किया जाएगा और संवाद तुरंत बंद कर दिया जाएगा। यदि सही है , तो संवाद डिफ़ॉल्ट अवधि और डिफ़ॉल्ट सहजता के साथ फीका हो जाएगा। Number - निर्दिष्ट अवधि और डिफ़ॉल्ट सहजता के साथ संवाद फीका हो जाएगा। String- स्लाइडडाउन , फोल्ड जैसे निर्दिष्ट प्रभाव का उपयोग करके संवाद दिखाया जाएगा । Object- यदि मान एक वस्तु है, तो संवाद दिखाने के लिए प्रभाव, देरी, अवधि और सहजता प्रदान की जा सकती है। 19 Syntax `$(".selector").dialog( { show: { effect: "blind", duration: 800 } } );`
20	शीर्षक यह विकल्प पाठ को संवाद बॉक्स के शीर्षक बार में प्रदर्शित करने के लिए निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Option - title यह विकल्प पाठ को संवाद बॉक्स के शीर्षक बार में प्रदर्शित करने के लिए निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Syntax `$(".selector").dialog( { title: "Dialog Title" } );`
21	चौड़ाई यह विकल्प पिक्सेल में डायलॉग बॉक्स की चौड़ाई को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य है300। Option - width यह विकल्प पिक्सेल में डायलॉग बॉक्स की चौड़ाई को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य है300। Syntax `$(".selector").dialog( { width: 500 } );`

निम्नलिखित अनुभाग आपको संवाद कार्यक्षमता के कुछ कार्य उदाहरण दिखाएगा।

डिफ़ॉल्ट कार्यक्षमता

निम्नलिखित उदाहरण संवाद कार्यक्षमता का एक सरल उदाहरण प्रदर्शित करता है जिसमें कोई पैरामीटर नहीं है dialog() तरीका।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं dialogexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

बटन, शीर्षक और स्थिति का उपयोग

निम्न उदाहरण तीन विकल्पों के उपयोग को दर्शाता है buttons, title तथा position JqueryUI के संवाद विजेट में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

छिपाने, दिखाने और ऊंचाई का उपयोग

निम्न उदाहरण तीन विकल्पों के उपयोग को दर्शाता है hide, show तथा height JqueryUI के संवाद विजेट में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

मोडल का उपयोग

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

$ (चयनकर्ता, संदर्भ) .dialog ("एक्शन", [परम]] विधि

संवाद (कार्रवाई, पैरामीटर) विधि इस तरह के बॉक्स को बंद करने के रूप में, संवाद बॉक्स पर कोई क्रिया कर सकते हैं। action पहले तर्क में एक स्ट्रिंग के रूप में निर्दिष्ट किया गया है और वैकल्पिक रूप से, एक या अधिक params दिए गए कार्रवाई के आधार पर प्रदान किया जा सकता है।

मूल रूप से, यहां क्रियाएं कुछ भी नहीं हैं, लेकिन वे jQuery के तरीके हैं जिन्हें हम स्ट्रिंग के रूप में उपयोग कर सकते हैं।

वाक्य - विन्यास

$(selector, context).dialog ("action", [params]);

निम्न तालिका इस पद्धति के कार्यों को सूचीबद्ध करती है -


$(".selector").dialog("close");
$(".selector").dialog("destroy");
$(".selector").dialog("isOpen");
$(".selector").dialog("moveToTop");
$(".selector").dialog("open");
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
var options = $( ".selector" ).dialog( "option" );
$(".selector").dialog( "option", "disabled", true );
$(".selector").dialog( "option", { disabled: true });
$(".selector").dialog("widget");

अनु क्रमांक।	कार्रवाई और विवरण
1	बंद करे() यह क्रिया डायलॉग बॉक्स को बंद कर देती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - close() यह क्रिया डायलॉग बॉक्स को बंद कर देती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("close");`
2	नष्ट () यह क्रिया संवाद बॉक्स को सक्षम रूप से निकाल देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - destroy() यह क्रिया संवाद बॉक्स को सक्षम रूप से निकाल देती है। यह तत्व को अपनी पूर्व-स्थिति पर वापस लौटा देगा। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("destroy");`
3	खुला हैं() यह क्रिया जाँचता है कि क्या संवाद बॉक्स खुला है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - isOpen() यह क्रिया जाँचता है कि क्या संवाद बॉक्स खुला है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("isOpen");`
4	moveToTop () यह क्रिया संबंधित डायलॉग बॉक्स को अग्रभूमि (दूसरों के ऊपर) पर रखती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - moveToTop() यह क्रिया संबंधित डायलॉग बॉक्स को अग्रभूमि (दूसरों के ऊपर) पर रखती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("moveToTop");`
5	खुला हुआ() यह क्रिया डायलॉग बॉक्स को खोलता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - open() यह क्रिया डायलॉग बॉक्स को खोलता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("open");`
6	विकल्प (विकल्पनाम) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है। जहां विकल्पनाम पाने के विकल्प का नाम है। Action - option( optionName ) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है। जहां विकल्पनाम पाने के विकल्प का नाम है। Syntax `var isDisabled = $( ".selector" ).dialog( "option", "disabled" );`
7	विकल्प () यह क्रिया वर्तमान डायलॉग विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु प्राप्त करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - option() यह क्रिया वर्तमान डायलॉग विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु प्राप्त करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `var options = $( ".selector" ).dialog( "option" );`
8	विकल्प (विकल्पनाम, मान) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े संवाद विकल्प का मान निर्धारित करती है। Action - option( optionName, value ) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े संवाद विकल्प का मान निर्धारित करती है। Syntax `$(".selector").dialog( "option", "disabled", true );`
9	विकल्प (विकल्प) यह क्रिया संवाद के लिए एक या अधिक विकल्प सेट करती है। Action - option( options ) यह क्रिया संवाद के लिए एक या अधिक विकल्प सेट करती है। Syntax `$(".selector").dialog( "option", { disabled: true });`
10	विजेट () यह क्रिया संवाद बॉक्स का विजेट तत्व लौटाती है; तत्व को ui-Dial वर्ग नाम के साथ एनोटेट किया गया है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - widget() यह क्रिया संवाद बॉक्स का विजेट तत्व लौटाती है; तत्व को ui-Dial वर्ग नाम के साथ एनोटेट किया गया है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$(".selector").dialog("widget");`

उदाहरण

अब हम उपरोक्त तालिका से क्रियाओं का उपयोग करके एक उदाहरण देखते हैं। निम्न उदाहरण isOpen () , ओपन () और क्लोज़ () विधियों के उपयोग को प्रदर्शित करता है ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं dialogexample.htm और इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा -

डायलॉग बॉक्स पर इवेंट मैनेजमेंट

संवाद (विकल्प) विधि के अलावा जो हमने पिछले अनुभागों में देखा था, जेक्वेरीयू इवेंट विधियों को प्रदान करता है जो एक विशेष घटना के लिए ट्रिगर हो जाता है। ये घटना विधियाँ नीचे सूचीबद्ध हैं -


$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
$(".selector").dialog (
   close: function(event, ui) {}
);
$(".selector").dialog (
   create: function(event, ui) {}
);
$(".selector").dialog (
   drag: function(event, ui) {}
);
$(".selector").dialog (
   dragStart: function(event, ui) {}
);
$(".selector").dialog (
   dragStop: function(event, ui) {}
);
$(".selector").dialog (
   focus: function(event, ui) {}
);
$(".selector").dialog (
   open: function(event, ui) {}
);
$(".selector").dialog (
   resize: function(event, ui) {}
);
$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

अनु क्रमांक।	घटना विधि और विवरण
1	पहले क्लिक करें (घटना, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स बंद होने वाला होता है। रिटर्निंग झूठी बंद करने से रोकता है संवाद बॉक्स। यह उन डायलॉग बॉक्स के लिए आसान है जो सत्यापन में विफल होते हैं। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - beforeClose(event, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स बंद होने वाला होता है। रिटर्निंग झूठी बंद करने से रोकता है संवाद बॉक्स। यह उन डायलॉग बॉक्स के लिए आसान है जो सत्यापन में विफल होते हैं। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").dialog ( beforeClose: function(event, ui) {} );`
2	करीब (घटना, यूआई) संवाद बॉक्स बंद होने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - close(event, ui) संवाद बॉक्स बंद होने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").dialog ( close: function(event, ui) {} );`
3	बनाएं (ईवेंट, यूआई) यह घटना तब शुरू होती है जब संवाद बॉक्स बनाया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - create(event, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स बनाया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").dialog ( create: function(event, ui) {} );`
4	खींचें (घटना, यूआई) इस घटना को बार-बार ट्रिगर किया जाता है क्योंकि एक ड्रैग के दौरान संवाद बॉक्स को स्थानांतरित किया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - drag(event, ui) इस घटना को बार-बार ट्रिगर किया जाता है क्योंकि एक ड्रैग के दौरान संवाद बॉक्स को स्थानांतरित किया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। offset - संवाद की वर्तमान ऑफसेट स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( drag: function(event, ui) {} );`
5	ड्रैगस्टार्ट (घटना, यूआई) यह घटना तब शुरू होती है जब डायलॉग बॉक्स का रिपॉजिटिंग उसके टाइटल बार को खींचकर शुरू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - dragStart(event, ui) यह घटना तब शुरू होती है जब डायलॉग बॉक्स का रिपॉजिटिंग उसके टाइटल बार को खींचकर शुरू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। offset - संवाद की वर्तमान ऑफसेट स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( dragStart: function(event, ui) {} );`
6	ड्रैगटॉप (घटना, यूआई) जब ड्रैग ऑपरेशन समाप्त हो जाता है तो यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - dragStop(event, ui) जब ड्रैग ऑपरेशन समाप्त हो जाता है तो यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। offset - संवाद की वर्तमान ऑफसेट स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( dragStop: function(event, ui) {} );`
7	फोकस (घटना, यूआई) डायलॉग का फ़ोकस होने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - focus(event, ui) डायलॉग का फ़ोकस होने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").dialog ( focus: function(event, ui) {} );`
8	खुला (घटना, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स खोला जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - open(event, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स खोला जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$(".selector").dialog ( open: function(event, ui) {} );`
9	आकार (घटना, ui) डायलॉग बॉक्स के आकार बदलने पर इस घटना को बार-बार ट्रिगर किया जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - resize(event, ui) डायलॉग बॉक्स के आकार बदलने पर इस घटना को बार-बार ट्रिगर किया जाता है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की वस्तु है। ui के संभावित मान निम्न हैं - originalPosition - आकार बदलने से पहले संवाद की सीएसएस स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। originalSize - आकार बदलने से पहले एक jQuery वस्तु संवाद के आकार का प्रतिनिधित्व करता है। size - संवाद के वर्तमान आकार का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( resize: function(event, ui) {} );`
10	resizeStart (घटना, यूआई) यह घटना तब शुरू होती है जब संवाद बॉक्स का आकार बदल जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - resizeStart(event, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स का आकार बदल जाता है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की वस्तु है। ui के संभावित मान निम्न हैं - originalPosition - आकार बदलने से पहले संवाद की सीएसएस स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। originalSize - आकार बदलने से पहले एक jQuery वस्तु संवाद के आकार का प्रतिनिधित्व करता है। size - संवाद के वर्तमान आकार का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( resizeStart: function(event, ui) {} );`
1 1	resizeStop (घटना, यूआई) यह घटना तब शुरू होती है जब संवाद बॉक्स का आकार बदल जाता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - resizeStop(event, ui) यह घटना तब शुरू होती है जब संवाद बॉक्स का आकार बदल जाता है। जहाँ घटना प्रकार की घटना है , और ui प्रकार की वस्तु है। ui के संभावित मान निम्न हैं - originalPosition - आकार बदलने से पहले संवाद की सीएसएस स्थिति का प्रतिनिधित्व करने वाला एक jQuery वस्तु। position - संवाद की वर्तमान सीएसएस स्थिति का प्रतिनिधित्व करने वाली एक jQuery वस्तु। originalSize - आकार बदलने से पहले एक jQuery वस्तु संवाद के आकार का प्रतिनिधित्व करता है। size - संवाद के वर्तमान आकार का प्रतिनिधित्व करने वाला एक jQuery वस्तु। Syntax `$(".selector").dialog ( resizeStop: function(event, ui) {} );`

निम्नलिखित उदाहरण उपरोक्त तालिका में सूचीबद्ध घटनाओं के उपयोग को प्रदर्शित करते हैं।

घटना के पहले विधि का उपयोग करें

निम्नलिखित उदाहरण के उपयोग को दर्शाता है beforeClose घटना विधि।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

ईवेंट विधि का आकार परिवर्तन करें

निम्नलिखित उदाहरण के उपयोग को दर्शाता है resize घटना विधि।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

एक्सटेंशन पॉइंट्स

संवाद विजेट विजेट कारखाने के साथ बनाया गया है और इसे बढ़ाया जा सकता है। विगेट्स का विस्तार करने के लिए, हम या तो मौजूदा तरीकों के व्यवहार को ओवरराइड या जोड़ सकते हैं। निम्नलिखित विधि संवाद विधियों की तरह ही एपीआई स्थिरता के साथ विस्तार बिंदु प्रदान करती है। उपरोक्त तालिका में सूचीबद्ध है ।

अनु क्रमांक।	विधि और विवरण
1	_allowInteraction (घटना) यह विधि उपयोगकर्ता को किसी ऐसे लक्ष्य तत्व के साथ सहभागिता करने की अनुमति देती है जो श्वेत तत्वों से संवाद करता है जो संवाद के बच्चे नहीं हैं लेकिन उपयोगकर्ताओं को उपयोग करने में सक्षम बनाते हैं। जहां इवेंट टाइप इवेंट का होता है । Extension Point - allowInteraction(event, ui) यह विधि उपयोगकर्ता को किसी ऐसे लक्ष्य तत्व के साथ सहभागिता करने की अनुमति देती है जो श्वेत तत्वों से संवाद करता है जो संवाद के बच्चे नहीं हैं लेकिन उपयोगकर्ताओं को उपयोग करने में सक्षम बनाते हैं। जहां इवेंट टाइप इवेंट का होता है । Code Example `_allowInteraction: function( event ) { return !!$( event.target ).is( ".select2-input" ) \|\| this._super( event ); }` मॉडल संवादों के भीतर Select2 प्लगइन का उपयोग किया जाता है सुपर () कॉल सुनिश्चित करता है कि संवाद के भीतर तत्वों के साथ अभी भी बातचीत की जा सकती है।

JQuery UI विजेट फैक्ट्री एक एक्स्टेंसिबल बेस है जिस पर jQuery UI के सभी विजेट बनाए गए हैं। प्लगइन बनाने के लिए विजेट फैक्ट्री का उपयोग करना राज्य प्रबंधन के लिए उपयुक्तता प्रदान करता है, साथ ही प्लगइन के तरीकों को उजागर करने और तात्कालिकता के बाद विकल्प बदलने जैसे सामान्य कार्यों के लिए कन्वेंशन करता है।