টগল ইভেন্ট (Toggle Event) : জে-কোয়েরী -(পর্ব-৩৪)

1 Comment / জে-কোয়েরী (jQuery) / By

jQuery তে .toggle() নামে একটি animation method আছে যা element এর visibility কে পরপর প্রদর্শন করে। যেখানে কতগুলি animation প্রদর্শন করবে তা নির্ভর করে .toggle() methode এর এক set argument এর উপর। .toggle() methode টি click event এর সাথে bind করা, তাই এর সাথে .click() দেয়ার প্রয়োজন হয়না। যেমন :-

[sourcecode language=”html”]
<div id="target">
Click here
</div>
[/sourcecode]

Event handler যে ভাবে div এর সাথে সংযুক্ত হবে :

[sourcecode language=”js”]
$(‘#target’).toggle(function() {
alert(‘First handler for .toggle() called.’);
}, function() {
alert(‘Second handler for .toggle() called.’);
});
[/sourcecode]

এখন div এর মধ্যে click করতে থাকলে, toggle event টি বারবার active হবে। ফলে output হবে :-

  • First handler for .toggle() called.
  • Second handler for .toggle() called.
  • First handler for .toggle() called.
  • Second handler for .toggle() called.
  • First handler for .toggle() called.

    toggle function এর সাথে যদি দুইয়ের অধিক handler যুক্ত করা হয়, তাহলে .toggle() method টি একের পর এক সবগুলিকে execute করবে। উদাহরন স্বরুপ : যদি তিনটি handler থাকে, তবে প্রথম handler টি প্রথম, চতুর্থ এবং সপ্তম এভাবে call হতে থাকবে।

    [বি:দ্র: একই element এর সাথে যদি একের অধিক বার toggle apply করা হয়, সে ক্ষেত্রে toggle ঠিক ভাবে কাজ করবেনা।]

    Example :
    [sourcecode language=”html”]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul { margin:10px; list-style:inside circle; font-weight:bold; }
    li { cursor:pointer; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
    </ul>
    <script>
    $("li").toggle(
    function () {
    $(this).css({"list-style-type":"disc", "color":"blue"});
    },
    function () {
    $(this).css({"list-style-type":"disc", "color":"red"});
    },
    function () {
    $(this).css({"list-style-type":"", "color":""});
    }
    );

    </script>

    </body>
    </html>
    [/sourcecode]

    Try Demo

    ………………………………………………………………………………
    আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

    জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

    • 1 thought on “টগল ইভেন্ট (Toggle Event) : জে-কোয়েরী -(পর্ব-৩৪)”

    Leave a Comment