jquery都有哪些前端框架

jquery前端框架有：1、EasyUI，一個基於jQuery的使用者介面外掛集合；2、MiniUI，專業WebUI控制項庫，能縮短開發時間，減少程式碼量；3、jQuery UI，是一套頁面UI外掛；4、Smart UI；5、Liger UI等。

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

jquery前端框架

#1、EasyUI

# #EasyUI 是一種基於jQuery的使用者介面外掛程式集合。 easyui 為創建現代化，互動，JavaScript 應用程序，提供必要的功能。使用 easyui 你不需要寫很多程式碼，你只需要透過寫一些簡單 HTML 標記，就可以定義使用者介面。

優勢：開源免費，頁面也說的過去。

easyUI 入門：

頁面引入必要的js 和css 樣式文件，文件引入順序為：

<!-- 引入 JQuery -->
<script></script>
<!-- 引入 EasyUI -->
<script></script>
<!-- 引入 EasyUI 的中文国际化 js，让 EasyUI 支持中文 -->
<script></script>
<!-- 引入 EasyUI 的样式文件-->
<link>
<!-- 引入 EasyUI 的图标样式文件-->
<link>

然後在頁面寫easyUI 程式碼就行，easyUI 提供了許多樣式：

範例如下：

## 實作程式碼如下：

nbsp;html>


<meta>
<title>Basic Dialog - jQuery EasyUI Demo</title>
<link>
<link>
<link>
<script></script>
<script></script>


<h2 id="Basic-Dialog">Basic Dialog</h2>
<p>Click below button to open or close dialog.</p>
<div>
<a>Open</a>
<a>Close</a>
</div>
<div>
The dialog content.
</div>

2、MiniUIjQuery MiniUI - 專業WebUI控制項庫。

它能縮短開發時間，減少程式碼量，讓開發者更專注於業務和服務端，輕鬆實現介面開發，帶來絕佳的使用者體驗。

使用MiniUI，開發者可以快速建立Ajax 無刷新、 B/S 快速輸入資料、 CRUD、 Master-Detail、選單工具列、彈出式面板、版面導覽、資料驗證、分頁表格、樹、樹形表格等典型WEB 應用系統介面。

缺點：收費，沒有原始碼，基於這個開發如果想對功能做擴充就需要找他們的團隊進行升級！

提供以下幾大類別控制項：

表格控制項樹狀控制項

版面控制項：標題面板、彈出面板、折疊分割器、佈局器、表單佈局器等
• ​​

導覽控制項：分頁導覽器、導覽功能表、標籤、功能表、工具列等。
表單控制項：多選輸入框、彈出選擇框、文字輸入框、數字輸入框、日期選擇框、下拉選擇框、下拉樹形選擇框、下拉表格選擇框、檔案上傳控制項、多選框、列錶框、多選框組、單選框組、按鈕等
#富文本編輯器

圖表控制項：柱狀圖、圓餅圖、線形圖、雙軸圖等。

技術亮點：

快速開發：使用 Html 設定介面，減少 80%介面程式碼量。
易於使用：簡單的API 設計，可以獨立、組合使用控制項。
效能最佳化：內建資料懶載入、低記憶體開銷、快速介面佈局等機制。
豐富控制項：包含表格、樹狀、資料驗證、版面導覽等超過 50 個控制項。
超強表格：提供鎖定列、多表頭、分頁排序、行篩選、資料匯總、儲存格編輯、詳細行、Excel 匯出等功能。
第三方相容：與ExtJS、jQuery、YUI、Dojo 等任意第三方控制項無縫整合。瀏覽器相容：支援IE6 、FireFox、Chrome 等。
• 跨平台支援：支援Java、.NET、PHP 等。

  
  

範例如下：

#

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
allowDrag="true" allowDrop="true" 4.	>
</ul>

3、jQueryUIjQuery UI 是一套jQuery 的頁面UI 插件，包含許多常用的頁面空間，例如Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、資料排序、窗體大小調整等等非常多的內容。

技術亮點：

簡單易用：繼承 jQuery 簡易使用特性，提供高度抽象接口，短期改善網站易用性。
開源免費：採用 MIT & GPL 雙協定授權，輕鬆滿足自由產品至企業產品各種授權需求。
廣泛相容：相容於各主流桌面瀏覽器。包括 IE 6 、Firefox 2 、Safari 3 、Opera 9 、Chrome 1 。輕量快速：元件間相對獨立，可按需載入，避免浪費頻寬拖慢網頁開啟速度。
標準先進：支援 WAI-ARIA，透過標準 XHTML 程式碼提供漸進增強，保證低階環境可訪問性。

• 美觀多變：提供近 20 種預設主題，並可自訂多達 60 項可配置樣式規則，提供 24 種背景紋理選擇。度娘上搜尋jQueryUI 的api，其用法與 easyUI、MiniUI 都大同小異，此處將不再舉例。

4、Smart UI

#官網網址http://smartui.chinamzz.com 

#Smart UI是基於JQuery的Ajax開發框架，實作前、後台分離、功能和資料分離，UI層全部使用htm js json完成，透過一個統一資料介面與服務端進行資料交換。

主要有三個部分組成：

1、一套日常應用的JQuery插件(類似JQuery UI,JQuery EasyUI)，核心基於template.js模板插件,具有強大的自訂功能。

2、一套前端開發框架（js、css），滿足各種基本場景，有著不錯的封裝、擴充性。系統自動完成動態建立頁面，與後台交互，取、賦值等繁瑣的操作。

3、與Smart UI無縫結合的後台資料框架（.net）。

Smart UI的框架，主要包括UI層（Smart UI）、資料介面、業務層、資料層四個部分。今天主要講解UI層，這部分與以往通常框架的架構不同的是，為純前台的開發架構，css html】，css和js都有詳細的分層，不僅在Smart UI中，其他框架的朋友也可以藉鑑，也希望大家能提出寶貴的建議。

5、Liger UI

#官網網址http://www.ligerui.com/

LigerUI是基於jQuery開發的一系列控制組組成的jquery ui框架，包括表單、佈局、表格等等常用UI控制項使用LigerUI可以快速建立風格統一的介面效果。

6、Chico UI

和jQuery UI 一樣，Chico UI 包含auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar 等諸多逐漸，同時也提供一個CSS 佈局框架，用於實現網頁佈局和表格。

線上示範：http://chico-ui.com.ar/

#7、PrimeUI

PrimeUI 是PrimeFaces 團隊的一個jQuery UI 元件庫，目前包含多個UI 元件

線上示範：http://www.primefaces.org/primeui/

8、 w2ui

基於Jquery的UI庫，包含常用UI元件，如：佈局、表格、樹狀、Tabs、工具列、彈出式功能表、表單等等。

採用Html5 CSS3編寫，可以支援常用的瀏覽器，如：Chrome、FireFox7 、Safari 5 和IE 9 等。

線上示範：http://w2ui.com/web/home

#9、Ninja UI

jQuery 是一個非常優秀的JavaScript 框架，而且還有相當多的插件。其中的一些UI插件也相當的給力，例如 Ninja UI，是一款介面插件，使用它將能為你的物品增色不少。此外掛包含有幻燈，智慧提示等常見的效果。

線上示範：http://ninjaui.com/examples

#10、B-JUI

##B-JUI客戶端框架(Best jQuery UI)，是基於Bootstrap樣式及jQuery函式庫實作的Ajax RIA開源框架。

B-JUI客戶端框架擴充功能方便、簡單易用，很多情況下只要熟悉HTML語法，使用HTML屬性就可以輕鬆用Ajax開發專案。對於javascript不太熟悉的程式設計師是非常方便的，他們只需要關注後端業務邏輯的實作就行了，前端頁面上只需要簡單的寫點HTML程式碼。

本框架基於Bootstrap前端樣式及jQuery庫開發，提供豐富的各類組件及UI，封裝有多種組件，及相關的Ajax請求調用，並且都以jQuery標準插件的方式組合在一起，所以非常方便進行二次開發或再擴展。

【推薦學習：

jQuery影片教學、web前端影片】

以上是jquery都有哪些前端框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！