JqueryUI - चयन करने योग्य

jQueryUI व्यक्तिगत रूप से या समूह में DOM तत्व का चयन करने के लिए चयन योग्य () विधि प्रदान करता है। इस विधि के साथ तत्वों पर माउस के साथ एक बॉक्स (कभी-कभी एक लासो कहा जाता है) को खींचकर तत्वों का चयन किया जा सकता है। इसके अलावा, तत्वों को Ctrl / मेटा कुंजी को दबाए रखते हुए या खींचकर, एकाधिक (गैर-सन्निहित) चयनों के लिए अनुमति देकर चुना जा सकता है।

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

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

$ (चयनकर्ता, संदर्भ)। चयन योग्य (विकल्प) विधि
$ (चयनकर्ता, संदर्भ)। चयन करने योग्य ("कार्रवाई", परम) विधि

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

चयन (विकल्प) विधि घोषणा करता है कि किसी HTML तत्व चयन आइटम शामिल हैं। विकल्प पैरामीटर एक वस्तु है निर्दिष्ट तत्वों के व्यवहार शामिल है कि जब चयन।

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

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

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

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

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


$( ".selector" ).selectable({ appendTo: "#identifier" });
$( ".selector" ).selectable({ autoRefresh: false });
$( ".selector" ).selectable({ cancel: "a,.cancel" });
$( ".selector" ).selectable({ delay: 150 });
$( ".selector" ).selectable({ disabled: true });
$( ".selector" ).selectable({ distance: 30 });
$( ".selector" ).selectable({ filter: "li" });
$( ".selector" ).selectable({ tolerance: "fit" });

अनु क्रमांक।	विकल्प और विवरण
1	जोङना यह विकल्प बताता है कि चयन सहायक (लास्सो) को किस तत्व से जोड़ा जाना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य हैbody। Option - appendTo यह विकल्प बताता है कि चयन सहायक (लास्सो) को किस तत्व से जोड़ा जाना चाहिए। डिफ़ॉल्ट रूप से इसका मूल्य हैbody। Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	स्वयं नवीनीकरण यह विकल्प यदि सही पर सेट है , तो प्रत्येक चयनित आइटम की स्थिति और आकार का चयन ऑपरेशन की शुरुआत में किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। Option - autoRefresh यह विकल्प यदि सही पर सेट है , तो प्रत्येक चयनित आइटम की स्थिति और आकार का चयन ऑपरेशन की शुरुआत में किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैtrue। यदि आपके पास कई आइटम हैं, तो आप इसे झूठा सेट करना चाहते हैं और ताज़ा () विधि को मैन्युअल रूप से कॉल कर सकते हैं । Syntax `$( ".selector" ).selectable({ autoRefresh: false });`
3	रद्द करना यदि आप तत्वों का चयन शुरू करते हैं तो यह विकल्प चुनने से मना करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैinput,textarea,button,select,option। Option - cancel यदि आप तत्वों का चयन शुरू करते हैं तो यह विकल्प चुनने से मना करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैinput,textarea,button,select,option। Syntax `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	विलंब इस विकल्प का उपयोग मिलीसेकंड में समय निर्धारित करने के लिए किया जाता है और चयन शुरू होने पर परिभाषित करता है। इसका उपयोग अवांछित चयन को रोकने के लिए किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है0। Option - delay इस विकल्प का उपयोग मिलीसेकंड में समय निर्धारित करने के लिए किया जाता है और चयन शुरू होने पर परिभाषित करता है। इसका उपयोग अवांछित चयन को रोकने के लिए किया जा सकता है। डिफ़ॉल्ट रूप से इसका मूल्य है0। Syntax `$( ".selector" ).selectable({ delay: 150 });`
5	विकलांग यह विकल्प सही होने पर, चयन तंत्र को निष्क्रिय कर देता है। उपयोगकर्ता तब तक तत्वों का चयन नहीं कर सकते जब तक कि चयन योग्य ("सक्षम") निर्देश का उपयोग करके तंत्र को बहाल नहीं किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Option - disabled यह विकल्प सही होने पर, चयन तंत्र को निष्क्रिय कर देता है। उपयोगकर्ता तब तक तत्वों का चयन नहीं कर सकते जब तक कि चयन योग्य ("सक्षम") निर्देश का उपयोग करके तंत्र को बहाल नहीं किया जाता है। डिफ़ॉल्ट रूप से इसका मूल्य हैfalse। Syntax `$( ".selector" ).selectable({ disabled: true });`
6	दूरी यह विकल्प दूरी (पिक्सेल में) है जो माउस को प्रगति पर चयन पर विचार करने के लिए बढ़ना चाहिए। उदाहरण के लिए, समूह चयन के रूप में सरल क्लिक्स की व्याख्या करने से रोकने के लिए यह उपयोगी है। डिफ़ॉल्ट रूप से इसका मूल्य है0। Option - distance यह विकल्प दूरी (पिक्सेल में) है जो माउस को प्रगति पर चयन पर विचार करने के लिए बढ़ना चाहिए। उदाहरण के लिए, समूह चयन के रूप में सरल क्लिक्स की व्याख्या करने से रोकने के लिए यह उपयोगी है। डिफ़ॉल्ट रूप से इसका मूल्य है0। Syntax `$( ".selector" ).selectable({ distance: 30 });`
7	फिल्टर यह विकल्प एक चयनकर्ता है जो दर्शाता है कि कौन से तत्व चयन का हिस्सा हो सकते हैं। डिफ़ॉल्ट रूप से इसका मूल्य है। Option - filter* यह विकल्प एक चयनकर्ता है जो दर्शाता है कि कौन से तत्व चयन का हिस्सा हो सकते हैं। डिफ़ॉल्ट रूप से इसका मूल्य है। Syntax* `$( ".selector" ).selectable({ filter: "li" });`
8	सहनशीलता यह विकल्प निर्दिष्ट करता है कि परीक्षण के लिए किस मोड का उपयोग करना है कि चयन सहायक (लैस्सो) को किसी आइटम का चयन करना चाहिए या नहीं। डिफ़ॉल्ट रूप से इसका मूल्य हैtouch। Option - tolerance यह विकल्प निर्दिष्ट करता है कि परीक्षण के लिए किस मोड का उपयोग करना है कि चयन सहायक (लैस्सो) को किसी आइटम का चयन करना चाहिए या नहीं। डिफ़ॉल्ट रूप से इसका मूल्य हैtouch। यह प्रकार का हो सकता है - fit - यह प्रकार इंगित करता है कि एक ड्रैग चयन को पूरी तरह से एक तत्व को चुना जाना चाहिए। touch - इस प्रकार से संकेत मिलता है कि ड्रैग आयत को केवल चयन करने योग्य आइटम के किसी हिस्से को इंटरसेक्ट करने की आवश्यकता है। Syntax `$( ".selector" ).selectable({ tolerance: "fit" });`

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

डिफ़ॉल्ट कार्यशीलता

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</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>
      
      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

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

उत्पादों पर क्लिक करने का प्रयास करें, कई उत्पादों का चयन करने के लिए CTRLS कुंजी का उपयोग करें।

देरी और दूरी का उपयोग

निम्न उदाहरण दो विकल्पों के उपयोग को प्रदर्शित करता है delay तथा distance JqueryUI के चयन समारोह में।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

उत्पादों पर क्लिक करने का प्रयास करें, कई उत्पादों का चयन करने के लिए CTRL कुंजी का उपयोग करें। आप देखेंगे कि उत्पाद 1, उत्पाद 2 और उत्पाद 3 का चयन 1000ms की देरी के बाद शुरू होता है। उत्पाद 4, उत्पाद 5, उत्पाद 6 और उत्पाद 7 का चयन व्यक्तिगत रूप से नहीं किया जा सकता है। माउस 100px की दूरी तय करने के बाद ही चयन शुरू होता है।

फ़िल्टर का उपयोग

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</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>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
     
      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

उत्पादों पर क्लिक करने का प्रयास करें। आप देखेंगे कि केवल पहले उत्पाद का चयन किया जा सकता है।

$ (चयनकर्ता, संदर्भ)। चयन करने योग्य ("कार्रवाई", परम) विधि

चयन ( "कार्रवाई", पैरामीटर) विधि इस तरह के चयन कार्यक्षमता को रोकने के रूप में चयन तत्वों, पर कोई क्रिया कर सकते हैं। कार्रवाई को पहले तर्क में एक स्ट्रिंग के रूप में निर्दिष्ट किया गया है (उदाहरण के लिए, चयन को रोकने के लिए "अक्षम")। निम्न तालिका में पारित किए जा सकने वाले कार्यों को देखें।

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

$(selector, context).selectable ("action", params);;

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


$( ".selector" ).selectable("destroy");
$( ".selector" ).selectable("disable");
$( ".selector" ).selectable("enable");
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
var options = $( ".selector" ).selectable( "option" );
$( ".selector" ).selectable( "option", "disabled", true );
$( ".selector" ).selectable( "option", { disabled: true } );
$( ".selector" ).selectable("refresh");
var widget = $( ".selector" ).selectable( "widget" );

अनु क्रमांक।	कार्रवाई और विवरण
1	नष्ट यह क्रिया एक तत्व के चयन योग्य कार्यक्षमता को पूरी तरह से हटा देती है। तत्व अपनी पूर्व-स्थिति पर लौट आते हैं। Action - destroy यह क्रिया एक तत्व के चयन योग्य कार्यक्षमता को पूरी तरह से हटा देती है। तत्व अपनी पूर्व-स्थिति पर लौट आते हैं। Syntax `$( ".selector" ).selectable("destroy");`
2	अक्षम यह क्रिया किसी तत्व के चयन योग्य कार्यक्षमता को निष्क्रिय कर देती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - disable यह क्रिया एक तत्व के चयन योग्य कार्यक्षमता को पूरी तरह से हटा देती है। तत्व अपनी पूर्व-स्थिति पर लौट आते हैं। Syntax `$( ".selector" ).selectable("disable");`
3	सक्षम यह क्रिया किसी तत्व की चयन करने योग्य कार्यक्षमता को सक्षम करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - enable यह क्रिया किसी तत्व की चयन करने योग्य कार्यक्षमता को सक्षम करती है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$( ".selector" ).selectable("enable");`
4	विकल्प (विकल्पनाम) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है । Action - option( optionName ) यह क्रिया वर्तमान में निर्दिष्ट विकल्प के साथ संबद्ध मान प्राप्त करती है । Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	विकल्प () इस क्रिया को वर्तमान चयन योग्य विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। Action - option() इस क्रिया को वर्तमान चयन योग्य विकल्प हैश का प्रतिनिधित्व करने वाली कुंजी / मान जोड़े वाली एक वस्तु मिलती है। Syntax `var options = $( ".selector" ).selectable( "option" );`
6	विकल्प (विकल्पनाम, मान) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े चयन विकल्प का मान निर्धारित करती है । तर्क विकल्पनाम सेट किए जाने वाले विकल्प का नाम है और विकल्प के लिए निर्धारित मूल्य मान है। Action - option( optionName, value ) यह क्रिया निर्दिष्ट विकल्प के साथ जुड़े चयन विकल्प का मान निर्धारित करती है । तर्क विकल्पनाम सेट किए जाने वाले विकल्प का नाम है और विकल्प के लिए निर्धारित मूल्य मान है। Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
7	विकल्प (विकल्प) यह क्रिया चयन के लिए एक या अधिक विकल्प सेट करती है। तर्क विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Action - option( options ) यह क्रिया चयन के लिए एक या अधिक विकल्प सेट करती है। तर्क विकल्प सेट करने के लिए विकल्प-मूल्य जोड़े का एक नक्शा है। Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	ताज़ा करना यह क्रिया चुनिंदा तत्वों के आकार और स्थिति को ताज़ा करने का कारण बनती है। इसका उपयोग ज्यादातर तब किया जाता है जब AutoRefresh विकल्प अक्षम हो जाता है ( गलत पर सेट )। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - refresh यह क्रिया चयनात्मक तत्वों के आकार और स्थिति को ताज़ा करने का कारण बनती है। ऑटो रिफ्रेश विकल्प अक्षम होने पर ज्यादातर उपयोग किया जाता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `$( ".selector" ).selectable("refresh");`
9	विजेट यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें चयन करने योग्य तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Action - widget यह क्रिया एक jQuery ऑब्जेक्ट देता है जिसमें चयन करने योग्य तत्व होता है। यह विधि किसी भी तर्क को स्वीकार नहीं करती है। Syntax `var widget = $( ".selector" ).selectable( "widget" );`

उदाहरण

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>
      
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

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

उत्पादों पर क्लिक करने का प्रयास करें, कई उत्पादों का चयन करने के लिए CTRL कुंजी का उपयोग करें। आप देखेंगे कि उत्पाद 1, उत्पाद 2 और उत्पाद 3 अक्षम हैं। उत्पाद 4, उत्पाद 5, उत्पाद 6 और उत्पाद 7 का चयन माउस 1px की दूरी के बाद होता है।

चयन तत्वों पर इवेंट मैनेजमेंट

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


$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

अनु क्रमांक।	घटना विधि और विवरण
1	बनाएं (ईवेंट, यूआई) चयन योग्य तत्व बनाए जाने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - create(event, ui) चयन योग्य तत्व बनाए जाने पर यह घटना शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	चयनित (घटना, यूआई) यह ईवेंट चयनित होने वाले प्रत्येक तत्व के लिए चालू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - selected(event, ui) यह ईवेंट चयनित होने वाले प्रत्येक तत्व के लिए चालू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - selected - यह चयनित आइटम को निर्दिष्ट करता है जिसे चुना गया है .. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	चयन (घटना, यूआई) प्रत्येक चयनित तत्व के लिए यह ईवेंट ट्रिगर किया गया है जो चयनित होने वाला है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - selecting(event, ui) प्रत्येक चयनित तत्व के लिए यह ईवेंट ट्रिगर किया गया है जो चयनित होने वाला है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - selecting - यह उस तत्व का संदर्भ निर्दिष्ट करता है जो चयनित होने वाला है। Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	प्रारंभ (घटना, यूआई) यह घटना चुनिंदा ऑपरेशन की शुरुआत में शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - start(event, ui) यह घटना चुनिंदा ऑपरेशन की शुरुआत में शुरू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	स्टॉप (घटना, यूआई) यह घटना चुनिंदा ऑपरेशन के अंत में चालू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - stop(event, ui) यह घटना चुनिंदा ऑपरेशन के अंत में चालू हो जाती है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	अचयनित (घटना, यूआई) यह ईवेंट अचयनित हो जाने वाले प्रत्येक तत्व के लिए चयनित ऑपरेशन के अंत में चालू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - unselected(event, ui) यह ईवेंट अचयनित हो जाने वाले प्रत्येक तत्व के लिए चयनित ऑपरेशन के अंत में चालू होता है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - unselected - एक तत्व जिसमें उस तत्व का संदर्भ होता है जो अचयनित हो गया है। Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	अचयनशील (घटना, यूआई) इस घटना को प्रत्येक चयनित तत्व के लिए ऑपरेशन के दौरान ट्रिगर किया गया है जो कि अचयनित होने वाला है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । Event - unselecting(event, ui) इस घटना को प्रत्येक चयनित तत्व के लिए ऑपरेशन के दौरान ट्रिगर किया गया है जो कि अचयनित होने वाला है। जहां इवेंट टाइप इवेंट का होता है , और यूआई टाइप ऑब्जेक्ट का होता है । यूआई के संभावित मूल्य हैं - unselecting - एक तत्व जिसमें उस तत्व का संदर्भ होता है जो अचयनित होने वाला है। Syntax `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

उदाहरण

निम्न उदाहरण चयनात्मक कार्यक्षमता के दौरान ईवेंट विधि के उपयोग को प्रदर्शित करता है। यह उदाहरण चयनित घटना के उपयोग को दर्शाता है ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</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>
      
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

उत्पादों पर क्लिक करने का प्रयास करें, कई उत्पादों का चयन करने के लिए CTRL कुंजी का उपयोग करें। आप देखेंगे कि चयनित उत्पाद संख्या सबसे नीचे मुद्रित है।