jQuery plugin development | SP Foundationbd

Jquery র plugin তৈরীর জন্য প্রথমেই নির্দিষ্ট একটি কাঠামোর ভিতর কোড লিখতে হয়।এই কাঠামো নিজের ইচ্ছেমত তৈরী করতে পারেন (নিয়মানুযায়ী)।তবে সাধারনত একই কাঠামো বেশি ব্যবহার করা হয়ে থাকে যদি পরিবর্তন করার প্রয়োজনীয় কারন না থাকে।যেমন আমি এখানে স্লাইডিং এর জন্য একটা ছোট্ট plugin তৈরী করব এবং এর কাঠামো হবে এরুপ:  1.(function($) {

2.$.fn.sliderPlugin = function() {

3.return this.each(function() {

4.//here goes our plugin code

5.});

6.};

7.})(jQuery);

ব্যাখ্যা: $ চিহ্ন এখানে Jquery Object (jQuery) এর শটকার্ট প্রতীক।এভাবে ফাংশনের প্যারামিটার হিসেবে এই চিহ্ন রেখে তারপরে এটা প্লাগিনের ভিতর যেকোন জায়গায় ব্যবহার করতে পারেন।এতে করে বাইরের কোন স্ক্রিপ্টে যেখানে $ চিহ্ন ব্যবহার করা হয়েছে তার সাথে কোন কনফ্লিক্ট হবেনা।

এরপর $.fn হচ্ছে jquery র Object । এই অবজেক্টের প্রোপার্টি হিসেবে আপনার মেথডের নাম দিতে হবে।যেমন আমি দিয়েছি sliderPlugin.এই প্রোপার্টিই হচ্ছে আপনার প্লাগিনের নাম এবং বাইরে থেকে যখন এই প্লাগিন কল করবেন তখন এটিকে function হিসেবে call করতে হয়।

তারপর this কিওয়ার্ড দিয়ে এই প্লাগিনে যে কাজ হচ্ছে সেটা রিটার্ন করা হচ্ছে।ফলে এখন এই ফাংশন মেথড চেইনিং এর সময় ব্যবহার করা যাবে,জেকোয়েরির অন্যান্য মেথডের সাথে।এরপর each মেথড ব্যবহার করা হয়েছে যাতে প্লাগিনটি সিলেক্টেড সব element নিয়ে কাজ করতে পারে।

এখন এই plugin টি বাইরে এভাবে ব্যবহার করতে পারবেন।

  1. $(selector).sliderPlugin();

এখনও এটা দিয়ে কোন কাজ হবেনা কারন আমারা কাঠামোর ভিতরে কোন code লিখেনি।যাইহোক এখন sliding এর জন্য প্লাগিনটি তৈরী করছি যেটা হেডিং এর উপর click করলে এরপরের এলিমেন্ট (এখানে একটা div) উপরে নিচে টগলিং হবে।এই প্লাগিনের ব্যবহারকারী টগলিং কিভাবে হবে তা অপশন দিয়ে ঠিক করে দিতে পারবে।এমনকি নিজের তৈরী কলব্যাক function ব্যবহার করতে পারবে।

01.(function($) {

02.$.fn.sliderPlugin  = function(options) {

03.04. 05.06.options = $.extend({}, $.fn.sliderPlugin.defaults,options);

07.return this.each(function() {

08.$(this)

09..bind('click', function() {

10.$(this).next().slideToggle(

11.options.duration,

12.options.complete

13.);

14.});

  1. 16.17.});

18.19.20. $.fn.sliderPlugin.defaults = {

21.duration: 'fast',

22.complete: null

23.};

24.};

25.})(jQuery);

ব্যাখ্যা:প্রথমে যে কাঠামো দেখালাম সেটার ভিতরেই বাকি code লিখেছি।এই বাইরে শুধু extend মেথড ব্যবহার করে প্লাগিনের option গুলি ঠিক করেছি।

  1. options = $.extend({}, $.fn.sliderPlugin.defaults,options);

এই লাইন দ্বারা প্লাগিনের default option গুলি (যেগুলি ২০ নম্বর লাইনে ঠিক করা হয়েছে) slideToggle মেথডে ঢুকে যাবে তবে যদি developer নিজের কোন option দেয় তাহলে ডিফল্টগুলি ঢুকবেনা বরং তার দেয়া option গুলি তখন সেট হবে।

এরপর each মেথডের ভিতর বাকি সব কোড আছে,এখানে সিলেক্টড এলিমেন্টের পরে যেকোন element কে (আমাদের এখানে একটা div) টগলিং করবে।সিলেক্টেড এলিমেন্ট কোনটা হবে সেটা এই প্লাগিনের ব্যবহারকারী ঠিক করবে।এরপর slideToggle এর অপশনগুলি দেখুন options.duration (কত দ্রুত টগলিং হবে সেটা) এবং options.complete (এটা কলব্যাক ফাংশন) এভাবে দেয়া হয়েছে।এখন যদি কেউ এই plugin ব্যবহার করার সময় কোন option না দেয় তাহলে Default option গুলি এখানে চলে আসবে।কলব্যাক ফাংশনের default হিসেবে null দেয়া উচিৎ কারন কোন কলব্যাক function যদি plugin ব্যবহারকারী না দেয় তাহলে কোন callback function থাকবেনা।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> spfoundationbd Plugin development tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css" />

06.<script src="/jquery_latest.js" type="text/javascript"></script>

07.<script src="/jquery.sliderPlugin.js" type="text/javascript"></script>

08.<script type="text/javascript">

09.$(document).ready(function() {

10.$('h3').sliderPlugin({

11.duration: 500,

12.complete: function(){

13.alert('Sliding finished');

14.}

15.});

16.});

  1. 18.</script>

19.</head>

  1.  

21.<body>

22.<div id="content_pane">

23.<h3>Information</h3>

24.<p id="shower" class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.</p>

  1. 26. 27.<h3>Metadata</h3>

28.<p class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx2.</p>

29.</div>

30.</body>

31.</html>

css ফাইল

01.body{

02.font-family:Verdana;

03.font-size:13px;

04.}

05.#content_pane{

06.width:400px;

07.margin:0 auto;

08.overflow:hidden;

09.border:1px solid #ccc;

10.border-radius:5px;

11.padding:10px;

12.}

13.h3{

14.text-align:center;

15.padding:5px;

16.background:#ddd;

17.border:1px solid #ccc;

18.cursor:pointer;

19.}

  1. 21. 22..pane_toggler{
  2. 24. 25.}