Extend select, unselect : extend « jQuery « JavaScript DHTML

Extend select, unselect

 


<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
$.fn.extend({
  Select: function() {
    return $(this).addClass('mySelected');
  },
  Unselect: function() {
    return $(this).removeClass('mySelected');
  },
  MyApplication: {
    Ready: function() {
      $('p').click(
        function($e) {
          $('li').Select();
        }
      );
      $('li').click(
        function() {
          $(this).hasClass('mySelected')?$(this).Unselect() : $(this).Select();   
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $.fn.MyApplication.Ready();
  }
);
    </script>
    <style type='text/css'>
li.mySelected {
    background: yellow;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
    <p>
      Select All
    </p>
  </body>
</html>

Related examples in the same category

extends array