জেকোয়েরি is, toggle এবং slideToggle মেথড (jQuery is, toggle and slideToggle method)
জোকোয়েরিতে
is() মেথডটি বেশ কাজের।ধরুন আপনার একটা এপ্লিকেশনে চেক করা দরকার যে h3
ট্যাগের পর কোন p ট্যাগ আছে কিনা?বা একটা এলিমেন্ট visible কিনা?ইত্যাদি
কাজের জন্য এই মেথড ব্যবহার করতে পারেন।যেমন
index.html
আউটপুট:
এখানে is মেথড যাচাই করে দেখবে যে webcoachbd আইডি সম্বলিত এলিমেন্টটি
(ইনপুট বাটন) visible কিনা।যদি visible হয় তাহলে true রিটার্ন করবে এবং
এরপরের লাইনের কোডে ঢুকবে আর যদি visible নাহয় তাহলে false রিটার্ন করবে
এবং else এর ভিতরের কোড এক্সিকিউট হবে।এই কোড রান করিয়ে দেখুন যখনি “When
you click me,a button will toggle” এই প্যারাগ্রাফের উপর ক্লিক করবেন
সাথে সাথে ইনপুট বাটনটি অদৃশ্য হয়ে যাবে (কারন is ফাংশন :visible সিডো
ক্লাস সিলেক্টর দিয়ে চেক করে বাটনটি visible পাবে এবং true রিটার্ন
করবে)।এরপর আবার ঐ প্যারাগ্রাফে ক্লিক করলে পুনরায় বাটনটি দৃশ্যমান হবে
কারন এবার is বাটনটি visible পায়নি এবং flase রিটার্ন করেছে।index.html
01.<html>02.<head>03.<script src="/jquery_latest.js" type="text/javascript"></script>04.<script type="text/javascript">05.$(document).ready(function(){06.$('#tutorial').click(function(){07.if($('#webcoachbd').is(':visible')){08.$('#webcoachbd').hide();09.}else{10.$('#webcoachbd').show();11.};12.});13.});14.</script>15.</head>16.<body>17.<p id="tutorial">When you click me,a button will toggle</p>18.<input type="submit" id="webcoachbd" value="Submit"/>19.</body>20.</html>
When you click me,a button will toggle
এই কোড দিয়ে একটা টগল তৈরী হল।তবে এই কাজ করার জন্য জেকোয়েরি আরও মেথড আছে।যেমন toggle()
উপরের মত এত বেশি কোড না লিখে এই মেথড দিয়ে একবারেই এই কাজ করতে পারেন যেমন জেকোয়েরির কোডটুকু এবার নিচের কোড দিয়ে প্রতিস্থাপন করুন।
1.$(document).ready(function(){2.$('#tutorial').click(function(){3.$('#webcoachbd').toggle();4.});5.});বিশেষ করে ফর্ম কন্ডিশনালি লোড করার সময় is ব্যবহার করতে পারেন।বিভিন্ন সাইটে দেখবেন ফর্মে কোন অপশন সিলেক্ট করলে এক ধরনের ফর্ম লোড হচ্ছে আবার আরেকটি অপশন সিলেক্ট করলে অন্য ফর্ম আসছে।এরুপ ফর্মের ক্ষেত্রে is খুব কার্যকরী একটি মেথড।
আর toggle দিয়ে সাধারনত কোন ডিভ দৃশ্যমান/অদৃশ্য ইত্যাদি করতে বেশি ব্যবহৃত হয়।
এধরনের আরেকটি মেথড আছে নাম slideToggle
এই ফাংশন দিয়ে যেকোন ডিভ বা এলিমেন্টকে smoothly উঠানামা করাতে পারবেন।যেমন আমি যদি চাই আগের উদাহরনের বাটনটি click ইভেন্ট fire হওয়ার সাথে সাথে বাটনটি smoothly উঠানামা করুক তাহলে এভাবে কোড লিখতে হবে।
শুধু জোকোয়েরির অংশটুকু প্রতিস্থাপন করে কোড রান করান
1.$(document).ready(function(){2.$('#tutorial').click(function(){3.$('#webcoachbd').slideToggle(500);4.});5.});
When you click me,a button will toggle
এই ফাংশনের ভিতর প্যারামিটার হিসেবে এভাবে সংখ্যা দিয়ে নির্ধারন করে
দিতে পারেন যে উঠানামা (এটাকে toggling বলে) কত ধীরে(অথবা দ্রত)হবে।যত বড়
সংখ্যা দিবেন তত ধীরে টগলিং হবে।এছাড়া প্যারামিটার হিসেবে কোটেশনের ভিতর
slow অথবা fast দিতে পারবেন।কি কাজ হবে তা নাম দেখেই বোঝা যাচ্ছে।slow
দিলে ধীরে আর fast দিলে দ্রুত টগলিং হবে।
0 মন্তব্য(গুলি):
Post a Comment