jQuery - ปลั๊กอิน

ปลั๊กอินคือส่วนของโค้ดที่เขียนในไฟล์ JavaScript มาตรฐาน ไฟล์เหล่านี้มีวิธีการ jQuery ที่เป็นประโยชน์ซึ่งสามารถใช้ร่วมกับวิธีการไลบรารี jQuery

มีปลั๊กอิน jQuery มากมายซึ่งคุณสามารถดาวน์โหลดได้จากลิงค์ที่เก็บที่ https://jquery.com/plugins.

วิธีใช้ปลั๊กอิน

ในการทำให้วิธีการของปลั๊กอินพร้อมใช้งานสำหรับเราเรารวมไฟล์ปลั๊กอินที่คล้ายกับไฟล์ไลบรารี jQuery ใน <head> ของเอกสาร

เราต้องตรวจสอบให้แน่ใจว่ามันปรากฏหลังไฟล์ต้นฉบับ jQuery หลักและก่อนโค้ด JavaScript ที่กำหนดเองของเรา

ตัวอย่างต่อไปนี้แสดงวิธีการรวม jquery.plug-in.js ปลั๊กอิน -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

วิธีการพัฒนา Plug-in

การเขียนปลั๊กอินของคุณเองทำได้ง่ายมาก ต่อไปนี้เป็นไวยากรณ์ในการสร้างเมธอด aa -

jQuery.fn.methodName = methodDefinition;

ที่นี่methodNameMคือชื่อของวิธีการใหม่และmethodDefinitionคือนิยามวิธีการจริง

แนวทางที่แนะนำโดยทีม jQuery มีดังต่อไปนี้ -

วิธีการหรือฟังก์ชันใด ๆ ที่คุณแนบจะต้องมีเครื่องหมายอัฒภาค (;) ต่อท้าย
วิธีการของคุณต้องส่งคืนวัตถุ jQuery เว้นแต่จะระบุไว้อย่างชัดเจนเป็นอย่างอื่น
คุณควรใช้สิ่งนี้แต่ละรายการเพื่อวนซ้ำชุดองค์ประกอบที่ตรงกันในปัจจุบันซึ่งจะสร้างรหัสที่สะอาดและเข้ากันได้ด้วยวิธีนั้น
นำหน้าชื่อไฟล์ด้วย jquery ตามด้วยชื่อของปลั๊กอินและสรุปด้วย. js
แนบปลั๊กอินกับ jQuery โดยตรงแทน $ ดังนั้นผู้ใช้จึงสามารถใช้นามแฝงที่กำหนดเองผ่านวิธี noConflict ()

ตัวอย่างเช่นหากเราเขียนปลั๊กอินที่เราต้องการตั้งชื่อว่าdebugชื่อไฟล์ JavaScript ของเราสำหรับปลั๊กอินนี้คือ -

jquery.debug.js

การใช้ jquery. คำนำหน้าช่วยขจัดความขัดแย้งของชื่อที่เป็นไปได้กับไฟล์ที่มีไว้สำหรับใช้กับไลบรารีอื่น ๆ

ตัวอย่าง

ต่อไปนี้เป็นปลั๊กอินขนาดเล็กที่มีวิธีการเตือนสำหรับการดีบัก เก็บรหัสนี้ไว้ในไฟล์jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

นี่คือตัวอย่างที่แสดงวิธีการใช้คำเตือน () สมมติว่าเราใส่ไฟล์jquery.debug.jsในไดเรกทอรีเดียวกันของหน้า html

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

สิ่งนี้จะแจ้งเตือนคุณด้วยผลลัพธ์ต่อไปนี้ -

This is paragraph
This is division