随着响应式网页设计演变成每个网站的必备部分，在设计手机和平板电脑网站时出现了越来越多的用户界面问题。在下面的演示中，我们展示了15个新的响应式JQuery代码片段，它们可以增强手机、平板电脑或普通浏览器上的用户体验。用户界面类MultiScrollMultiscroll是一个功能强大的JQuery插件，它允许您创建带有两个垂直滚动条的独立页面。其强大的功能不仅体现在所有现代浏览器中（甚至支持IE8），也适用于移动设备和平板电脑。这个插件让您即使在响应式网站上也能利用这种华丽的效果。如何使用：实现这种效果很简单。您需要做的就是将脚本文件包含在
标记中，并将其余代码放在标记中。TourTipTourTip是网页元素的交互式视觉指南。TourTip可以替代静态的帮助信息界面或说明文字，通过增加页面引导，让用户更容易了解产品的新特性和新功能。TourTip对于新产品或服务的介绍性网站或登陆页面，或帮助指南非常有用。其直观的界面使解释任何事情变得轻而易举。使用方法：TourTip可根据用户需求自定义构建，让您“玩转”多个变量，您只需要根据您的目的或需要进行调整即可。jQueryTiltedPageScroll这个高级jQuery片段允许您使用页面滚动插件来创建3D倾斜滚动效果。这种效果看起来很简单，但对于您的博客或摄影作品集或作品集网站来说却是非常好的体验。目前所有浏览器都通过了兼容性测试，当然不包括IE。jQueryTipCards此代码片段可帮助您创建一组卡片布局供用户浏览。这个想法非常有趣，已经被Google的“Tips”项目实现了。这个代码片段有很多不同的用途，你可以用它来展示你最新的博文、投资组合项目、网页游戏等。用法：根据翻页卡片的性质，你可以使用堆栈来存储内容，效果非常好！在头部连接脚本，将回调函数放在页脚中。Slinky.jsSlinky.js是一个jQuery插件，用于创建带有堆叠标题的优雅的可滚动导航列表。当您在浏览器上体验它时，它会创建一个类似于移动设备的环境。因为它是轻量级的（大约1KB），所以它给你一个流畅和舒适的体验，并且它与你最喜欢的浏览器的最新版本兼容。使用方法：在jQuery之后，使用script标签导入下载的文件，然后在要激活Slinky的jQuery元素上调用.slinky()方法。GoalProgressGoalProgress是一个允许您使用jQuery创建动画进度条的插件。填写必填项后，插件会自动计算您当前的进度，并以动画形式显示进度条。您可以指定要在显示的数字前后显示的文本。很高兴使用此插件在各种事件或事件的捐赠驱动器上显示捐赠。用法：您需要做的就是引用脚本的样式文件，在页面上创建一个空的htmldiv元素并初始化脚本。#p#表单和输入类Card如果您正在开发电子商务项目，那么这个轻量级但优雅的代码片段就是您所需要的。Card只需一行代码，即可显示用户需要输入的信用卡信息。创建支持4种卡片的动画效果，并为用户提供直观的体验，所有这些都是免费和开源的。如何使用：在您的HTML中包含并引用所需的文件。init脚本然后创建或替换当前表单中的输入值，使它们具有响应性。UniboxUnibox是一个jQuery插件，支持通用搜索框以提供基于查询的搜索提示。它提供了丰富多样的内容表示形式——从链接到图像或任何其他元数据——在用户提交标签后显示。使用方法：Unibox的安装有点复杂，但并不难。在需要配置的页面引入脚本和CSS文件，安装服务端/客户端插件。由于插件是通过提供搜索提示来工作的，所以除了在客户端安装脚本外，还需要在服务器端有相应的数据格式来支持。VanillaboxVanillabox是一个简单而现代的灯箱风格JQuery插件，可用于轻松构建图片库。它具有简单、最小的设计，适用于所有现代浏览器。它是众多类似功能插件中的一个易于安装、轻量级的插件，可用于替换以前使用的插件。使用方法：安装非常简单。只需在中导入脚本和css并调用脚本即可。MediaToneDenPlayerToneDen是一款纯js定制的音频播放器。它具有完全可定制的界面，为您提供一系列配置选项以增强您的聆听体验。简洁干净的界面令人赏心悦目，不会给页面带来任何混乱。如何使用：由于显示和播放音乐的方式有很多种，因此可以通过多种方式自定义播放器。在播放器配置方面，开发人员做得很好，易于使用，而且确实相当先进。使用脚本满足基本需求，或按照文档进行更高级的配置。PizzaPieCharts是一个代码片段，可让您在任何设备上呈现披萨式图表。这是一个易于使用的插件，可与Zurb的响应式框架一起使用或作为独立脚本使用。关于这个插件没什么好说的，因为它唯一的选择就是显示饼图或开发人员所说的披萨图。这个插件非常好、易于使用且可自定义，因此不将其包含在本文中将是一个错误。用法：引用css和js文件，你就得到了一个基本的饼图，但不要忘记HTML。HashtabberHashtabber是一个JavaScript插件，用于hashchange驱动的选项卡式内容选择器。考虑到它也适用于移动设备，您可以通过多种方式来利用此插件。它包括一些预设主题以及一些自定义方法。用法：在HTML中单独链接每个文件，然后创建一个HashTabber部分。英文原文：15ResponsivejQueryUISnippets&Modules翻译自：http://www.oschina.net/translate/jquery-ui-snippets