jQuery is, toggle and slideToggle method | SP Foundationbd

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

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($('# SPFoundationbd).is(':visible')){

08.$('# SPFoundationbd).hide();

09.}else{

10.$('# S Foundationbd).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=" SPFoundationbd " value="Submit"/>

19.</body>

20.</html>

আউটপুট:

When you click me,a button will toggle

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

এই code দিয়ে একটা toggle তৈরী হল।তবে এই কাজ করার জন্য jquery আরও মেথড আছে।যেমন toggle()

উপরের মত এত বেশি কোড না লিখে এই মেথড দিয়ে একবারেই এই কাজ করতে পারেন যেমন jquery র code টুকু এবার নিচের code দিয়ে প্রতিস্থাপন করুন।

 

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

2.$('#tutorial').click(function(){

3.$('# SPFoundationbd).toggle();

4.});

5.});

এই code রান করান তাহলে এর আগের কোডের মতই result পাবেন।এক্ষত্রে function দুটি দিয়ে একই কাজ করে দেখালাম তবে function দুটি দিয়ে বিভিন্ন সময়ে বিভিন্ন কাজ করা হয়।

বিশেষ করে form কন্ডিশনালি load করার সময় is ব্যবহার করতে পারেন।বিভিন্ন সাইটে দেখবেন ফর্মে কোন অপশন সিলেক্ট করলে এক ধরনের form লোড হচ্ছে আবার আরেকটি অপশন সিলেক্ট করলে অন্য form আসছে।এরুপ ফর্মের ক্ষেত্রে is খুব কার্যকরী একটি method।

আর toggle দিয়ে সাধারনত কোন ডিভ দৃশ্যমান/অদৃশ্য ইত্যাদি করতে বেশি ব্যবহৃত হয়।

এধরনের আরেকটি মেথড আছে নাম slideToggle

এই function দিয়ে যেকোন div বা এলিমেন্টকে smoothly উঠানামা করাতে পারবেন।যেমন আমি যদি চাই আগের উদাহরনের বাটনটি click ইভেন্ট fire হওয়ার সাথে সাথে বাটনটি smoothly উঠানামা করুক তাহলে এভাবে কোড লিখতে হবে।

শুধু jquery র অংশটুকু প্রতিস্থাপন করে code run করান

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

2.$('#tutorial').click(function(){

3.$('# SPFoundationbd).slideToggle(500);

4.});

5.});

When you click me,a button will toggle

এই ফাংশনের ভিতর প্যারামিটার হিসেবে এভাবে সংখ্যা দিয়ে নির্ধারন করে দিতে পারেন যে উঠানামা (এটাকে toggling বলে) কত ধীরে(অথবা দ্রত)হবে।যত বড় সংখ্যা দিবেন তত ধীরে টগলিং হবে।এছাড়া প্যারামিটার হিসেবে কোটেশনের ভিতর slow অথবা fast দিতে পারবেন।কি কাজ হবে তা নাম দেখেই বোঝা যাচ্ছে।slow দিলে ধীরে আর fast দিলে দ্রুত টগলিং হবে।