10个简单的jQuery设计技巧

有很多jQuery技巧和技术，而且数量庞大，功能强大jQuery库可以满足几乎所有人的JavaScript使用需求。由于jQuery使想要在设计中添加简单交互和视觉技术的设计师无需具备丰富的编程知识就可以使用JavaScript，所以花点时间来研究这个优秀的库是值得的。任何设计师都知道，添加一些额外的视觉细节和用户友好度可以为任何网页设计增加专业性和吸引力。

另外，对于那些卖模板的设计师，WordPress主题，以及其他类型的网页设计，使用jQuery在设计中是一个很好的卖点。让我们一起来看看吧十个简单、有效、有用的技巧和技巧来自几个优秀的jQuery开发者和网站，利用这个库将你的设计提升到另一个水平。

1.等高列

相同高度的圆柱一直是设计师使用的一个问题divS，虽然现在有很多解。您可以使用的解决方案之一是使用jQuery。这种技术只需要一个非常小的JavaScript函数来处理一切，然后与主布局进行一些基本的集成就可以实现神奇的效果。

这种方法的函数和代码片段来自CSSNewbie．如果有人想更深入地了解这个函数是如何工作的，这些都在那里。要用jQuery解决这个问题，只需将此函数添加到您希望具有相同高度的页面中(或将其作为JavaScript文件包含—这有利于可维护性)。

function equalHeight(组){最高的= 0;group.each(function() {thisHeight = $(this).height();if(thisHeight >最高){最高= thisHeight;}});group.height(最高);｝

要获得等高列，请链接到包含该函数的脚本，并将下面的代码块放在< >头页面的标签。

<脚本类型="text/javascript"> $(文档).ready(函数(){equalHeight($(".col1"));equalHeight ($ (" .col2 "));equalHeight ($ (" .col3 "));});> < /脚本

当DOM准备好使用时，代码将立即执行，($(文档)时函数())，然后使用equalHeight函数精确计算所有列的高度。

正如我们所看到的，设计师所需要做的就是使用divS具有的类col1，col2,col3使这个例子正常工作。

2.没有HTML混乱的圆角

幸运的是，CSS3已经推出了一种不使用图像就可以自动创建圆角的方法，但另一方面，许多流行的浏览器(如Internet Explorer)可能需要一段时间才能完全/部分支持CSS3的W3C推荐标准。许多设计师知道如何使用CSS、HTML和一堆图片来创建圆角，但这些技术会导致HTML/CSS的混乱。下面是一个用于创建圆角的混乱HTML示例。

< div class = " roundedbox " > < div class = "高清" > < div class = " c " > < / div > < / div > < div class = " bd " > < div class = " c " > < div class = " s " > <——主要内容就在这里——> < / div > < / div > < / div > < div class =“英尺”> < div class = " c " > < / div > < / div > < / div >

对于一个圆形的盒子来说，这是相当多的代码。

大多数设计师都知道，像这样筛选HTML代码是很困难的，特别是当试图修改使用多个圆角的页面时。不过，解决这个问题的方法很简单——不用编写所有额外的HTMLdiv每次我们需要一个新的圆角框时，我们可以简单地让jQuery为我们做所有的工作(通过DOM操作的方式)。这个有用的技巧来自jQuery网站的第13天。

要获得关于它如何工作的完整教程或更多细节，请访问那里。通过使用下面的脚本，我们可以自动添加额外的div在需要的地方。

请注意:如果你想更快的动画移动，修改slideToggle而且slideUp方法，以便传递字符串“正常”或“快”，或者简单地使用以毫秒为单位的整数(例如.slideUp (500)为半秒的过渡)。下面是我们需要使用的HTML。如你所见，这很简单我们需要的是div.accordion元素,< h3 >/< p >对在里面。

< div class = "手风琴" > <h3> < /项h3> <p> dolor sit amet.p> 
Item Number Two
 
Lorem ipsum dolor sit amet
 
这是第三项
 
< / p > < / div >

仔细看看这个和其他一些jQuery技巧WebDesignerWall．

7.工具提示用于传达感兴趣的元素的上下文消息

当用户悬停在特定的页面元素上时，工具提示是一种提供更多信息的简单方法。将鼠标悬停在所选的元素上，用户可以看到一个简单的工具提示，显示链接、内容、大图和其他有用的上下文信息。上面的图片实际上是一个演示页面的例子(来自CSSGlobe)。

要下载这个脚本集，请访问他们的文章最简单的工具提示和图像预览使用jQuery．下面是您需要的HTML标记，正如您所看到的，它遵循了不引人注目的JavaScript最佳实践，通过使用类(.preview)来指示哪些元素将有工具提示。

< a href = " image.jpg " class = "预览预览图像“title = > < / >

8.模态窗口来取代弹出窗口

模态窗口可以用来显示图像、内容，甚至iframe。像这样的对话框需要的不仅仅是几段代码，而是整个教程。上面是NetTuts+教程创建模态对话框的图片。

如果你想自己制作并定制它，这是一个很好的教程。

jQuery插件用于模态窗口

你不需要为模态窗口创建自己的jQuery脚本，你可以使用许多插件来完成这项工作;以下只是其中的一些。FancyZoom WordPress jQuery Lightbox插件SimpleModal

9.用于显示内容的选项卡界面

标签是节省空间的好方法，就像手风琴一样。随着极简主义设计的兴起，设计师需要新的方法来减少网页内容所占的空间。标签也是一个很好的方式来组织网页上的信息，使设计更友好。

下面的图像展示了一个使用jQuery UI tabs．

10.使用jQuery UI实现小部件

对于设计师来说，最后一个“技巧”很简单:看看(并学习)jQuery用户界面(jQuery UI）. 基本上，jQuery UI扩展了jQuery核心库，使您能够访问有用和常见的UI组件(小部件)，如日期选择器、手风琴、标签、滑块等。为了让想要节省时间和编码需求的设计师更容易，他们提供了一个快速测试和创建您自己的jQuery UI主题的漂亮工具ThemeRoller，(它也可以作为Firefox书签工具使用)。

不用多说，jQuery UI提供了很多特性，让设计师可以。”少写代码，多做事情。”

结束

使用jQuery可以实现许多视觉效果和令人印象深刻的交互。以上10个技巧可能很常见，而且非常有用，但jQuery的强大功能还不止于此。我希望这篇文章能让您产生足够的兴趣，继续探索和学习更多关于这个设计师友好的JavaScript库的知识。

请分享任何额外的插件，教程,jQuery的技巧这可能会在评论中帮助到你的其他网页设计师。

相关内容

• 使用jQuery创建一个流畅的和可访问的幻灯片
• 40个出色的jQuery界面技术和教程
• 14个用于处理图像的jQuery插件