clopyleft: jQuery τεχνικές παράδειγμα resize ενός αντικειμένου.

Σε αυτή την ανάρτηση θα σας δείξω πως ένα animation μπορούμε να το κάνουμε resize πατώντας ένα button με τη βοήθεια του jQuery.

<html>
<head>
 <style type="text/css">
 .button{
  float:left;
  background-color:#F00;
  color:#FFF;
  font-weight:bold;
  width:70px;
  text-align:center;
  margin:2px;
  cursor:pointer;
 }
 #box{
  clear:both;  
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  text-align:center;
  background-color:#F30;
  padding:10px;
  position:absolute;
  top:100px;
  border:1px solid #006;
 }
 .normal{
  width:100px;
  height:100px;  
 }
 
 .big{
  width:150px;
  height:150px;  
 }
 
 .small{
  width:50px;
  height:50px;  
 } 
 
 </style>
 <script src="jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  $('#normal').bind('click', function(){
   $('#box').addClass('normal');
   $('#box').removeClass('big');   
   $('#box').removeClass('small');      
  });          
  $('#big').bind('click', function(){
   $('#box').addClass('big');
   $('#box').removeClass('normal');   
   $('#box').removeClass('small');    
  });
  $('#small').bind('click', function(){
   $('#box').addClass('small');
   $('#box').removeClass('normal');   
   $('#box').removeClass('big');    
  });  
 });
 </script>
</head>
<body>
<div id="buttonSwitcher">
  <div class="button" id="normal">
   Normal Box
  </div>
  <div class="button" id="big">
   Bigger Box
  </div> 
  <div class="button" id="small">
   Smaller Box
  </div>  
</div>
<div id="box" class="normal">
I am a Box
</div>
</body>
</html>

First, the HTML markup is as follows:

<div id="buttonSwitcher">
  <div class="button" id="normal">
   Normal Box
  </div>
  <div class="button" id="big">
   Bigger Box
  </div> 
  <div class="button" id="small">
   Smaller Box
  </div>  
</div>
<div id="box" class="normal">
I am a Box
</div>

Combined with some basic CSS like following:

.button{
 float:left;
 background-color:#F00;
 color:#FFF;
 font-weight:bold;
 width:70px;
 text-align:center;
 margin:2px;
 cursor:pointer;
}
#box{
 clear:both;  
 color:#000;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 text-align:center;
 background-color:#F30;
 padding:10px;
 position:absolute;
 top:100px;
 border:1px solid #006;
}

These are CSS style for changing box size:

.normal{
 width:100px;
 height:100px;  
}
.big{
 width:150px;
 height:150px;  
}
.small{
 width:50px;
 height:50px;  
}

The jQuery code for doing action to make bigger like this:

$('#big').bind('click', function(){
 $('#box').addClass('big');
 $('#box').removeClass('normal');   
 $('#box').removeClass('small');    
});

Completely code:

$(document).ready(function() {
 $('#normal').bind('click', function(){
  $('#box').addClass('normal');
  $('#box').removeClass('big');   
  $('#box').removeClass('small');      
 });          
 $('#big').bind('click', function(){
  $('#box').addClass('big');
  $('#box').removeClass('normal');   
  $('#box').removeClass('small');    
 });
 $('#small').bind('click', function(){
  $('#box').addClass('small');
  $('#box').removeClass('normal');   
  $('#box').removeClass('big');    
 });  
});

You can simplify like this:

$('#normal').bind('click', function(){
 $('#box').addClass('normal').removeClass('big').removeClass('small');
});          
$('#big').bind('click', function(){
 $('#box').addClass('big').removeClass('normal').removeClass('small');
});
$('#small').bind('click', function(){
 $('#box').addClass('small').removeClass('normal').removeClass('big');
});

For code optimization, you can remove all classes from element using .removeClass(). Like this:

$('#normal').bind('click', function(){
 $('#box').removeClass().addClass('normal');
});          
$('#big').bind('click', function(){
 $('#box').removeClass().addClass('big');
});
$('#small').bind('click', function(){
 $('#box').removeClass().addClass('small');
});


Shorthand events   
JQuery have an even terser way to bind a handler for an event (such as click event).

jQuery Shorthand event methods work in the same way as .bind() with keystrokes.

$(document).ready(function() {
 $('#buttonSwitcher .button').click(function() {
  $('box').removeClass();
  if (this.id == 'big') {
   $('box').addClass('big');
  }
  else if (this.id == 'small') {
   $('box').addClass('small');
  }
  $('#buttonSwitcher .button').removeClass('selected');
  $(this).addClass('selected');
 });
});

Shorthand event methods such as this exist for all standard DOM events:

blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload

Labels

Τρίτη 18 Δεκεμβρίου 2012

jQuery τεχνικές παράδειγμα resize ενός αντικειμένου.

Shorthand events

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου