10个jQuery片段每个设计师都应该知道

Sara Vieira. 经过 Sara Vieira.  |  2014年1月21日

jquery.用于成千上万的网页。它是插入页面中最常见的库之一,它使DOM操纵一个捕捉。

当然,部分jQuery的普及是其简单性。似乎我们几乎可以用这个强大的图书馆做任何我们喜欢的东西。

对于向我们开放的所有选项,有一些代码段我们倾向于再次回到时间和时间。今天我想给你10个片段,每个人都有新手,将再次使用时间和时间。

 

1)返回顶部按钮

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

正如你可以看到的那样 动画scrolltop. jQuery中的函数我们不需要插件来创建一个简单的滚动到顶部动画。

通过改变 scrolltop. 值得更改我们希望滚动条到落地的地方,在我的情况下,我使用了0的值,因为我希望它进入我们的页面顶部,但如果我想要一个100px的偏移,我可以在100px中键入100px功能。

所以我们真正做的就是在整个课程中为我们的文件的主体动画动画,直到它滚动到文档的顶部。

 

2)检查是否加载了图像

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

有时您需要检查您的图像是否完全加载以继续使用脚本,这三行jQuery代码段可以轻松为您做到这一点。

您也可以通过用ID或类替换IMG标记来检查是否加载了一个特定的映像。

 

3)自动修复破碎的图像

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

偶尔我们有时间在我们的网站上有破碎的图像链接并逐个替换它们并不容易,所以添加这个简单的代码可以节省大量的头痛。

即使您没有任何破坏的链接,也会增加任何伤害。

 

4)在悬停中切换课程

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

我们通常希望在用户悬停且此jQuery片段执行此操作时更改我们页面上的可点击元素的Visual,它会在用户悬停时为您的元素添加一个类,并且当用户停止其删除该类时,请将其添加到课程中您需要做的就是在CSS文件中添加必要的样式。

 

5)禁用输入字段

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

有时,您可能需要表单的提交按钮甚至是其文本输入之一要禁用,直到用户执行了某个操作(检查“我读取了”术语“复选框),并且这行代码完成那;它补充说 禁用 属性到您的输入,以便您可以启用它。

为此,您需要做的就是在输入的输入上运行RemoveAttr函数,作为参数禁用:

$('input[type="submit"]').removeAttr("禁用”);

 

6)停止加载链接

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

有时我们不希望链接转到某个页面甚至重新加载它,我们希望它们要做一些像触发其他脚本的其他东西,在这种情况下,这段代码将执行阻止默认操作的诀窍。

 

7)切换褪色/幻灯片

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

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

幻灯片和淡化是我们使用jQuery在动画中使用的东西,有时我们只想在我们点击内容时显示一个元素,并且对于Fadein和Sliddedown方法是完美的,但如果我们希望该元素出现在第一次单击和然后在第二段上消失,这段代码将正常工作。

 

8)简单的手风琴

// Close all Panels
$('#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;
});

通过添加此脚本,您真正需要在页面上的必要条件是必要的HTML Go Get此工作。

正如您在此代码段所看到的,我首先关闭了我们手风琴中的所有面板,然后在Click事件上完成了与该标头幻灯片切换的内容,以及所有其他幻灯片。这是一种快速手风琴的简单方法。

 

9)让两个​​人的高度

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

有时你想要两个div,无论他们在哪些内容中都有相同的高度,这个小赛段就可以了;在这种情况下,它设置了 最小高度 这意味着它可以比主要的div大,但从未更小。这对于像网站这样的砖石来说很棒。

 

10)斑马剥离无序列表

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

使用此小片段,您可以轻松地创建Zebra条纹无序列表,其中您将在每个奇数列表项上定义的背景,以便您可以将默认值放置在CSS文件中的偶数。您可以将此片段添加到任何类型的标记,从表到普通Divs,您想要成为斑马的任何东西。

 

结论

这些是我发现自己在我的项目中再次使用的jQuery代码。我希望你在这个页面上写下这个页面并随时随地回来。

 

你依靠什么jquery片段?您有更好的代码是否有以下方案?让我们在评论中知道。

特色图片/缩略图, 有用的图像 via Shutterstock.