家都知道Jquery属于快速且简单的一个JavaScript library，它使网页制作更加的方便。它可以对HTML文档以及控制事件等进行简洁且快速的处理。有人说Jquery是一个宝库，下面W3Cschool小师妹将为大家推荐2016年度最佳的Jquery插件库，还附带教程。

1.Jquery插件下载网站合集

很多开发者制作了非常好用且实用的Jquery插件，W3Cschool小师妹为大家收集的Jquery插件下载网站，主要包括开源中国社区、脚本之家、站长之家等。这些网站都有很多免费的Jquery插件，大家可以自由使用，对服务器产生的压力很小。

2.Jquery轮播

一个网站中，轮播是很重要的一种功能。无论是动画轮播、图片轮播，还是HTML5全屏幻灯片背景切换，W3Cschool小师妹都为大家收集了，可以去看一下。

3.Jquery UI特效

Jquery UI特效非常多，像实现天空下雪花、粒子效果、metro界面交互动画等，都是比较常见的。W3Cschool小师妹为大家收集了很多Jquery UI特效，不仅克油演示案例，教你一步步操作，还有下载地址。

4.Jquery瀑布流插件

瀑布流的布局现在很火，用Jquery来实现瀑布流，不会很复杂。W3Cschool为大家收集的几款插件，可以用来制作瀑布流布局。

5.Jquery导航

优秀的Jquery导航很多，此部分内容，主要包括仿京东菜单导航、CSS3回转菜单、页面左侧下拉菜单、仿百度新闻右侧导航栏、beautif导航条等。每一个Jquery导航都提供了下载方式，有需要的可以去看一下。

6.Jquery小游戏

通常情况下开发游戏都是用html5,但是有些Jquery的爱好者，喜欢用它来开发游戏。也许和flash相比，Jquery的效果会更差，但是游戏非常酷。今天为大家收集了一些非常热门的Jquery小游戏，一起看看吧!

7.Jquery功能性插件

Jquery功能性插件相当多，此处为你收集了Jquery 功能性插件jQuery筛选列表过滤插件Filterizr、很酷的CSS3多窗口邮件阅读器、HTML5实现的图书翻页效果、Twitter bootstrap模糊查询插件、jQuery表格排序插件 jquery.tablesort.js等。

8.Jquery提示框

网页上漂亮的提示框，可以让大家觉得耳目一新，还可以起到提醒又不打扰大家的功效。下面,W3Cschool小师妹为大家推荐效果非常棒的Jquery提示框，主要包括html5提示信息提示框、tooltip插件等。

9.Jquery图片处理

用于图片处理的超级Jquery插件很多，主要功效是生成图片的动画及特效，还可以缩放这些图片的大小。

上面W3Cschool小师妹为大家收集的Jquery插件库，如果有需要可以去看一下。有人看到这类的文章，总会说是打广告。其实这些都是免费的Jquery插件库，里面的资源很多，主要目的就是帮助大家。

onic是开源的移动应用开发框架，便于构建高质量的本地和网络技术先进的web应用程序。Ionic是基于Angular，有许多显著的性能提升，可用性和功能都在不断的进行改进。只需要会一点前端知识就能玩转Ionic。

Ionic的应用程序创建开发主要通过Ionic命令行实用工具(“CLI—命令行界面”)，并使用cordova构建和部署本地应用。建立Ionic项目，您需要安装最新版本的CLI和cordova。在你这样做之前，你需要一个node.js的最新版本。这些在我之前的文章有安装教程。

• 官网地址：

  http://ionicframework.com/

• 版本更新说明：

  https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

学习ionic需要了解的知识：

• HTML5

• CSS3

• TypeScript（JavaScript）

• Angular2+

下面是一些组件的示例，不同系统有不同的样式，下面展示iOS上的。

动作表单-Action Sheets

时间选择器-DateTime

浮动的按钮-Floating Action Buttons

分割按钮-Segment

Inputs-输入框

表格布局-Grid

小芯片-Chip

弹窗对话框1-Alert

弹窗对话框2-Popover

想要查看更多的ionic组件示例，可以在App Store和Google Play下载Ionic2Components应用，该APP即为官方所有组件的展示。

• 组件在线演示地址：

  http://ionicframework.com/docs/api/

组件只能作用在用户与界面交互上，想要调用原生设备功能就需要cordova，他提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风、GPS等。在应用商店下载Ionic Native即可体验部分插件。

• 离子原生包装插件：

  http://ionicframework.com/docs/native/

通过以上组件配合使用，即使只懂css3一点皮毛也能做出一个漂亮简单的HTML5 APP，想要了解更多ionic，可以关注我或者在官网查看最新消息。

多数时候，我们的APP应用程序中需要有好的提示信息，比如用户登录成功，使用消失3秒钟的登录成功；或者当用户登录失败时，提示失败原因；或者网络连接失败时，提示网络错误等等。在MUI中，我们可以使用MUI框架提供的消息框，同时我们也可以使用H5+ API提供的nativeUI（管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等）。nativeUI相对于MUI框架提供的消息框功能点要全面一些，其包含弹出系统选择按钮框、弹出系统提示对话框、弹出系统确认对话框、显示/关闭系统等待对话框、显示/关闭自动消失的提示消息、预览图片、弹出系统时间选择对话框、弹出系统输入对话框功能，接下来我们将一一做详细介绍。

弹出系统选择按钮框（actionSheet）

这类选择框，可以用于如HTML 中select标签所代表的含义，比如选择数据的状态，我们可以设置为启用或者禁用。

/**
 * @description 弹出系统选择按钮框
 * @example NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
 * @param {actionsheetStyle} 选择按钮框显示的样式
 * @param {actionsheetCallback} 选择按钮框关闭后的回调函数
 */
plus.nativeUI.actionSheet({
	title: "弹出系统选择按钮框", //选择按钮框的标题
	cancel: "取消", //取消按钮上显示的文字内容
	buttons: [ //选择框上的按钮
		{
			title: '提交', //按钮上显示的文字内容
			color: '#FF0000' //按钮上显示文字颜色
		},
		{
			title: '取消',
			color: '00FF00'
		}
	]
}, function(e) {
	//按钮框关闭后的操作
});

弹出系统提示对话框

这类控件我们一般用于需要确认后才能进行下一步处理的业务逻辑，或者登录失败，用户需要确认后再次进行登录数据验证。

/**
 * @description 弹出系统提示对话框
 * @example void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
 * @param {message} 提示对话框上显示的内容
 * @param {alertCB} 提示对话框上关闭后的回调函数
 * @param {title} 提示对话框上显示的标题
 * @param {buttonCapture} 提示对话框上按钮显示的内容
 */
plus.nativeUI.alert('用户名不能为空！', function(e) {
	//关闭对话框后刷新验证码
}, '警告', '确定');

弹出系统确认对话框

这类控件用于业务数据操作提示，防止用户在不需要的时候误点导致的数据提交，相当于用户在提交之前需要对所提交的数据进行再次确认是否需要提交。

/**
 * @description 弹出系统确认对话框
 * @example void plus.nativeUI.confirm(message, confirmCB, styles);
 * @param {message} 确认对话框上显示的内容
 * @param {confirmCB} 确认对话框关闭后的回调函数
 * @param {styles} 确认对话框的参数
 */
plus.nativeUI.confirm('您确定要启用该菜单项？', function(e) {
	//点击确定后需要继续的操作
}, {
	title: '再次确认',//确认对话框显示的标题
	buttons: [//确认对话框上显示的按钮
		"确定", "取消"
	],
	verticalAlign: 'center',//对话框在屏幕中的垂直分享对齐方式,top|center|bottom
});

弹出系统日期选择对话框

我们一般用于需要根据日期来查询数据的时候，使用该控件可以简单的进行日期选择查询。

/**
 * @description 弹出系统日期选择对话框
 * @example void plus.nativeUI.pickDate(successCB, errorCB, style)
 * @param {successCB} 日期选择操作成功的回调函数
 * @param {errorCB} 日期选择操作取消或失败的回调函数
 * @param {style} 日期选择操作的参数
 */
plus.nativeUI.pickDate(function(e) {
	var d = e.date;
	//选择日期进行查询
}, function(e) {
	//取消或失败的提示信息
});

弹出系统时间选择对话框

时间对话框和日期选择对话框用途基本相似，只不过，时间选择对话框更加具体。

/**
 * @description 弹出系统时间选择对话框
 * @example void plus.nativeUI.pickTime(successCB, errorCB, styles)
 * @param {successCB} 时间选择操作成功的回调函数
 * @param {errorCB} 时间选择操作取消或失败的回调函数
 * @param {styles} 时间选择操作的参数
 */
plus.nativeUI.pickTime(function(e) {
	var d = e.date;
	//选择时间进行查询
}, function(e) {
	//取消或失败的提示信息
}, {
	title: "选择查询时间",//时间选择对话框显示的标题
	is24Hour: true,//是否24小时制模式
	//time 默认显示时间, popover弹出指定区域{top:10;left:10;width:200;height:200;}
})

弹出系统输入对话框

这类控件一般用于需要输入参数后再执行业务处理操作的区域，比如我们需要修改密码，我们可以弹出输入对话框，填写修改后的密码，进行修改密码操作。

/**
 * @description 弹出系统输入对话框
 * @example void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
 * @param {message} 输入对话框上显示的内容
 * @param {promptCB} 关闭输入对话框的回调函数
 * @param {title} 输入对话框上显示的标题
 * @param {tip} 输入对话框上编辑框显示的提示文字
 * @param {buttons} 输入对话框上显示的按钮数组
 */
plus.nativeUI.prompt('请输入您要修改的密码：', function(e) {
	//点击按钮后的操作
}, '修改密码', '您的新密码', ['确定', '取消']);

显示/关闭等待对话框

一般用于打开页面，渲染数据时。数据未渲染完成前，显示等待对话框，数据渲染完成后，关闭等待对话框。

plus.nativeUI.showWaiting("正在加载..."); //显示系统等待对话框
setTimeout(function() {
	plus.nativeUI.closeWaiting(); //关闭系统等待对话框
}, 2000);

显示/关闭自动提示消息对话框

该控件是一个简单的控件，其经常用于不干扰用户操作情况下的信息提示。

plus.nativeUI.toast("我是自动小时提示框", {
	duration: 3000
}); //显示自动消失的提示信息
setTimeout(function() {
	plus.nativeUI.closeToast(); //关闭已经显示的所有自动消失的提示框
}, 1500)

预览图片

这是我们在APP中经常会用到的一个控件，比如头像上传时我们需要预览一下是否是我们指定的头像。