জেকোয়েরি প্লাগিন তৈরী (jQuery plugin development)
জেকোয়েরির প্লাগিন তৈরীর জন্য প্রথমেই নির্দিষ্ট একটি কাঠামোর ভিতর কোড লিখতে হয়।এই কাঠামো নিজের ইচ্ছেমত তৈরী করতে পারেন (নিয়মানুযায়ী)।তবে সাধারনত একই কাঠামো বেশি ব্যবহার করা হয়ে থাকে যদি পরিবর্তন করার প্রয়োজনীয় কারন না থাকে।যেমন আমি এখানে স্লাইডিং এর জন্য একটা ছোট্ট প্লাগিন তৈরী করব এবং এর কাঠামো হবে এরুপ:
1.(function($) {2.$.fn.sliderPlugin = function() {3.return this.each(function() {4.//here goes our plugin code5.});6.};7.})(jQuery);এরপর $.fn হচ্ছে জেকোয়েরির অবজেক্ট।এই অবজেক্টের প্রোপার্টি হিসেবে আপনার মেথডের নাম দিতে হবে।যেমন আমি দিয়েছি sliderPlugin.এই প্রোপার্টিই হচ্ছে আপনার প্লাগিনের নাম এবং বাইরে থেকে যখন এই প্লাগিন কল করবেন তখন এটিকে ফাংশন হিসেবে কল করতে হয়।
তারপর this কিওয়ার্ড দিয়ে এই প্লাগিনে যে কাজ হচ্ছে সেটা রিটার্ন করা হচ্ছে।ফলে এখন এই ফাংশন মেথড চেইনিং এর সময় ব্যবহার করা যাবে,জেকোয়েরির অন্যান্য মেথডের সাথে।এরপর each মেথড ব্যবহার করা হয়েছে যাতে প্লাগিনটি সিলেক্টেড সব এলিমেন্ট নিয়ে কাজ করতে পারে।
এখন এই প্লাগিনটি বাইরে এভাবে ব্যবহার করতে পারবেন।
1.$(selector).sliderPlugin();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.complete13.);14.});15. 16. 17.});18. 19. 20.$.fn.sliderPlugin.defaults = {21.duration: 'fast',22.complete: null23.};24.};25.})(jQuery);1.options = $.extend({}, $.fn.sliderPlugin.defaults,options);এরপর each মেথডের ভিতর বাকি সব কোড আছে,এখানে সিলেক্টড এলিমেন্টের পরে যেকোন এলিমেন্টকে (আমাদের এখানে একটা div) টগলিং করবে।সিলেক্টেড এলিমেন্ট কোনটা হবে সেটা এই প্লাগিনের ব্যবহারকারী ঠিক করবে।এরপর slideToggle এর অপশনগুলি দেখুন options.duration (কত দ্রুত টগলিং হবে সেটা) এবং options.complete (এটা কলব্যাক ফাংশন) এভাবে দেয়া হয়েছে।এখন যদি কেউ এই প্লাগিন ব্যবহার করার সময় কোন অপশন না দেয় তাহলে ডিফল্ট অপশনগুলি এখানে চলে আসবে।কলব্যাক ফাংশনের ডিফল্ট হিসেবে null দেয়া উচিৎ কারন কোন কলব্যাক ফাংশন যদি প্লাগিন ব্যবহারকারী না দেয় তাহলে কোন কলব্যাক ফাংশন থাকবেনা।
index.html ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd 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.});17. 18.</script>19.</head>20. 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>25. 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>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.}20. 21. 22..pane_toggler{23. 24. 25.}
0 মন্তব্য(গুলি):
Post a Comment