设计师应该知道的10个代码片段

1. back to top

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>

2. 检查图片是否加载

$(‘img’).load(function() {
console.log(‘image load successful’);
});

3.自动修复破碎的图片

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

4) TOGGLE CLASS ON HOVER

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

5) DISABLING INPUT FIELDS

$('input[type="submit"]').attr("disabled", true);

6) STOP THE LOADING OF LINKS

$(‘a.no-link').click(function(e){
e.preventDefault();
});

7) TOGGLE FADE/SLIDE

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

8) SIMPLE ACCORDION

$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});

9) MAKE TWO DIVS THE SAME HEIGHT

$(‘.div').css('min-height', $(‘.main-div').height());

10) ZEBRA STRIPPED UNORDERED LIST

$('li:odd').css('background', '#E8E8E8’);