JqueryUI - विजेट फैक्टरी

इससे पहले, jQuery में कस्टम नियंत्रण लिखने का एकमात्र तरीका $ .fn नामस्थान का विस्तार करना था । यह सरल विजेट के लिए अच्छी तरह से काम करता है। मान लीजिए कि आप अधिक स्टेटफुल विजेट बनाते हैं, तो यह जल्दी ही बोझिल हो जाता है। विजेट बनाने की प्रक्रिया में सहायता के लिए, विजेट फैक्टरी को jQuery UI में पेश किया गया था, जो अधिकांश बॉयलरप्लेट को हटा देता है जो आमतौर पर एक विजेट को प्रबंधित करने से जुड़ा होता है।

JQueryUI विजेट फैक्ट्री बस एक फ़ंक्शन ($ .widget) है जो एक स्ट्रिंग नाम और ऑब्जेक्ट को तर्कों के रूप में लेता है और इसकी कार्यक्षमता को एनकैप करने के लिए एक jQuery प्लगइन और एक "क्लास" बनाता है।

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

निम्नलिखित jQueryUI विजेट फैक्टरी विधि का वाक्य विन्यास है -

jQuery.widget( name [, base ], prototype )

name- यह एक स्ट्रिंग है जिसमें एक नेमस्पेस और विजेट का नाम (एक डॉट द्वारा अलग किया हुआ) है।

base- आधार विजेट से विरासत में मिला। यह एक ऐसा कंस्ट्रक्टर होना चाहिए जिसे `new` कीवर्ड के साथ इंस्टेंट किया जा सके। JQuery.Widget के लिए डिफ़ॉल्ट ।

prototype- विजेट से विरासत के लिए एक प्रोटोटाइप के रूप में उपयोग करने के लिए वस्तु। उदाहरण के लिए, jQuery UI में एक "माउस" प्लगइन है, जिस पर बाकी इंटरेक्शन प्लगइन्स आधारित हैं। आदेश, इस लक्ष्य को हासिल करने के लिए खींचने योग्य, droppable, आदि माउस प्लगइन से सभी इनहेरिट की तरह तो: jQuery.widget ( "ui.draggable", $ .ui.mouse, {...}); यदि आप इस तर्क की आपूर्ति नहीं करते हैं, तो विजेट "बेस विजेट," jQuery.Widget से सीधे इनहेरिट करेगा (ध्यान दें कि लोअरकेस के बीच अंतर "w" jQuery.widget और अपरकेस "W" jQuery.Widget)।

बेस विजेट

बेस विजेट विजेट फैक्टरी द्वारा उपयोग किया जाने वाला विजेट है।

विकल्प

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

$( ".selector" ).widget({ disabled: true });

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

तरीकों

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

_create: function() {
   this.element.css( "background-color", this.options.color );
}

this._delay( this._foo, 100 );

_destroy: function() {
   this.element.removeClass( "my-widget" );
}

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}

_getCreateEventData: function() {
   return this.options;
}

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});

this._hoverable( this.element.find( "div" ) );

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}

this._off( this.element, "click" );

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});

this.option( "width" );

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}

this.option( "width", 500 );

this.option({
   width: 500,
   height: 500
});

_create: function() {
   this.widget().css( "border", "2px solid red" );
}

आयोजन

$( ".selector" ).widget({
   create: function( event, ui ) {}
});

jQueryUI विजेट फैक्टरी जीवनचक्र

JQueryUI विजेट फैक्टरी, एक विजेट के जीवनचक्र का प्रबंधन करने के लिए एक वस्तु-उन्मुख तरीका प्रदान करता है। इन जीवन चक्र गतिविधियों में शामिल हैं -

विजेट बनाना और नष्ट करना: उदाहरण के लिए,

$( "#elem" ).progressbar();

विजेट विकल्प बदलना: उदाहरण के लिए

$( "#elem" ).progressbar({ value: 20 });

उपवर्गित विजेट्स में "सुपर" कॉल करना: उदाहरण के लिए

$( "#elem" ).progressbar( "value" );
or 
$( "#elem" ).progressbar( "value", 40 );

घटना की सूचनाएँ: उदाहरण के लिए

$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});

उदाहरण

अब हम निम्नलिखित उदाहरण में एक कस्टम विजेट बनाते हैं। हम एक बटन विजेट बनाएंगे। हम निम्नलिखित उदाहरणों में एक विजेट में विकल्प, तरीके और घटनाओं को बनाने का तरीका देखेंगे -

कस्टम विजेट बनाना

आइए हम पहले एक सरल कस्टम विजेट बनाते हैं।

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <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>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>

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

कस्टम विजेट में विकल्प जोड़ना

पिछले उदाहरण में, हमने कस्टम नियंत्रण बनाने के लिए _create फ़ंक्शन का उपयोग किया था । लेकिन उपयोगकर्ता आमतौर पर विकल्पों को सेट और संशोधित करके नियंत्रण को अनुकूलित करना चाहते हैं। हम एक विकल्प ऑब्जेक्ट को परिभाषित कर सकते हैं जो आपके द्वारा परिभाषित सभी विकल्पों के लिए डिफ़ॉल्ट मानों को संग्रहीत करता है। _setOption फ़ंक्शन का उपयोग इस उद्देश्य के लिए किया जाता है। यह प्रत्येक व्यक्तिगत विकल्प के लिए कहा जाता है जिसे उपयोगकर्ता सेट करता है। यहां हम बटन की चौड़ाई और पृष्ठभूमि-रंग सेट कर रहे हैं ।

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <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>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>

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

कस्टम विजेट में विधियाँ जोड़ना

निम्नलिखित उदाहरण में हम उन तरीकों को जोड़ेंगे जो उपयोगकर्ता उपयोग कर सकते हैं और ये फ्रेमवर्क में निर्माण करना बहुत आसान है। हम एक चाल विधि लिखेंगे, जो बटन को एक निर्दिष्ट क्षैतिज दूरी को स्थानांतरित कर देगा। इस कार्य को करने के लिए, हमें _create फ़ंक्शन में स्थिति और बाएँ गुण सेट करने की आवश्यकता है -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

इसके बाद, उपयोगकर्ता अब सामान्य jQuery UI तरीके से आपके तरीके को कॉल कर सकता है -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

$("button3").myButton("move", 200);

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <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>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>

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

कस्टम विजेट में ईवेंट जोड़ना

इस उदाहरण में हम एक घटना बनाने के लिए प्रदर्शित करेंगे। एक घटना बनाने के लिए आपको बस इतना करना होगा कि _trigger विधि का उपयोग करें। पहला पैरामीटर ईवेंट का नाम है, दूसरा कोई भी मानक ईवेंट ऑब्जेक्ट जिसे आप पास करना चाहते हैं और तीसरा कोई कस्टम ईवेंट ऑब्जेक्ट जिसे आप पास करना चाहते हैं।

जब हम बटन x = 400 से आगे बढ़ते हैं, तो यहां हम एक घटना को फायर कर रहे हैं। आपको बस इतना करना है कि आपको मूव फंक्शन में जोड़ना है -

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

इस स्थिति में ईवेंट को आउटबाउंड कहा जाता है और एक खाली ईवेंट ऑब्जेक्ट को कस्टम ईवेंट ऑब्जेक्ट के साथ पास किया जाता है जो केवल स्थिति को इसकी एकमात्र संपत्ति के रूप में आपूर्ति करता है।

संपूर्ण चालन समारोह है -

move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

उपयोगकर्ता केवल उसी नाम के विकल्प को परिभाषित करके ईवेंट हैंडलिंग फ़ंक्शन सेट कर सकता है।

$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <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>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>

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