家都知道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中經常會用到的一個控件，比如頭像上傳時我們需要預覽一下是否是我們指定的頭像。