jQuery custom function sample

by Matt Howey

HTML

<div class="box selected">
    <h4>Buy Milk</h4>
</div>
<div class="box selected">
    <h4>Pick Up Dry Cleaning</h4>
</div>
<div class="box selected">
    <h4>Workout</h4>
</div>

CSS

body{
    background-color: #f0f0f0;
}
.box{
    background-color: #fdfdfd;
    border-radius: 2px !important;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #ccc;
    border-left: 20px solid #BDBDBD;
    border-top: 1px solid #ddd;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    -moz-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    padding: 0 20px;
    margin: 10px 20px;
    color: #999;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    transition: all 0.3s ease-in-out;
}
.selected{
    background-color: #DBFFB2;
    border-left-color: #5cb85c;
    color: #5cb85c;
    -webkit-transform: scale(1.02,1.02);
    -moz-transform: scale(1.02,1.02);
    -o-transform: scale(1.02,1.02);
    -ms-transform: scale(1.02,1.02);
    transform: scale(1.02,1.02);
    transition: all 0.3s ease-in-out;
}

JavaScript

(function($){
    
   $.fn.myfunc = function() {
   	console.log('this is my func!');
    return true;
   }
    
  // define your custom function
  $.fn.selectToDo = function() {
    return $(this).toggleClass('selected');
  }
  
  $('.box').click(function() {
      // and then use it    
      $(this).myfunc();
      $(this).selectToDo();
  });

})(jQuery);