টগল ইভেন্ট (Toggle Event)

টগল ইভেন্ট (Toggle Event)

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


<div id="target">
  Click here
</div>

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

$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});

এখন 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 :

    <!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>

    Demo :






    লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।

    • কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.