জেকোয়েরি is, toggle এবং slideToggle মেথড (jQuery is, toggle and slideToggle method)

 



জোকোয়েরিতে is() মেথডটি বেশ কাজের।ধরুন আপনার একটা এপ্লিকেশনে চেক করা দরকার যে h3 ট্যাগের পর কোন p ট্যাগ আছে কিনা?বা একটা এলিমেন্ট visible কিনা?ইত্যাদি কাজের জন্য এই মেথড ব্যবহার করতে পারেন।যেমন

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($('#codestrickz').is(':visible')){
08.$('#codestrickz').hide();
09.}else{
10.$('#codestrickz').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="codestrickz" value="Submit"/>
19.</body>
20.</html>

আউটপুট:


When you click me,a button will toggle

এখানে is মেথড যাচাই করে দেখবে যে webcoachbd আইডি সম্বলিত এলিমেন্টটি (ইনপুট বাটন) visible কিনা।যদি visible হয় তাহলে true রিটার্ন করবে এবং এরপরের লাইনের কোডে ঢুকবে আর যদি visible নাহয় তাহলে false রিটার্ন করবে এবং else এর ভিতরের কোড এক্সিকিউট হবে।এই কোড রান করিয়ে দেখুন যখনি “When you click me,a button will toggle” এই প্যারাগ্রাফের উপর ক্লিক করবেন সাথে সাথে ইনপুট বাটনটি অদৃশ্য হয়ে যাবে (কারন is ফাংশন :visible সিডো ক্লাস সিলেক্টর দিয়ে চেক করে বাটনটি visible পাবে এবং true রিটার্ন করবে)।এরপর আবার ঐ প্যারাগ্রাফে ক্লিক করলে পুনরায় বাটনটি দৃশ্যমান হবে কারন এবার is বাটনটি visible পায়নি এবং flase রিটার্ন করেছে।


এই কোড দিয়ে একটা টগল তৈরী হল।তবে এই কাজ করার জন্য জেকোয়েরি আরও মেথড আছে।যেমন 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 দিলে দ্রুত টগলিং হবে।

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.