Ⅰ Web前端開發框架有哪些
目前常用的一些前端的框架如下：
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2、flex
Apache基金會發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日，Apache Flex技術社區發布了全新的Apache Flex 4.12.0版本，該版本是Apache Flex 4.11.0的升級版本，改進的功能包括：
◆支持最新版本的Flash Player
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex 4.12.1，新版本加入對全新Flash Player及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。
3、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
5、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQuery MiniUI – 快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
6、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
7、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
8、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！
9、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫，為了能建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證，基本上沒怎麼研究過！
YUI Compressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦！
11、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！
12、ZK
ZK是 一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以 及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！
13、OperaMasks-UI
OperaMasks- UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前，該團隊已將這一產品以LGPL 開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
14、JavaFX
Sun 公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用Java API的能力。因為 JavaFX Script是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序 變為可能。
Ⅱ 網頁樹形折疊菜單製作
JavaScript Code： function Ob(o){ var o=document.getElementById(o)?document.getElementById(o):o; return o; } function Hd(o) { Ob(o).style.display="none"; } function Sw(o) { Ob(o).style.display=""; } function ExCls(o,a,b,n){ var o=Ob(o); for(i=0;i<n;i++) {o=o.parentNode;} o.className=o.className==a?b:a; } function CNLTreeMenu(id,TagName0) { this.id=id; this.TagName0=TagName0==""?"li":TagName0; this.AllNodes = Ob(this.id).getElementsByTagName(TagName0); this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl || "css/s.gif"; this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展開/折疊\" />"; this.ImgBlankB ="<img src=\"css/s.gif\" class=\"s\" />"; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML; } } this.SetNodes = function (n) { var sClsName=n==0?this.ClassName0:this.ClassName1; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName; } } } CSS Code： .CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;} .CNLTreeMenu ul {padding:0;} .CNLTreeMenu li {list-style:none;padding:0;} .Closed ul {display:none;} .Child img.s {background:none;cursor:default;} #CNLTreeMenu1 ul {margin:0 0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px;} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0 0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px;} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0 0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px;} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;} html code: <p> <!--CNLTreeMenu Start:--> </p> <div class="CNLTreeMenu" id="CNLTreeMenu1"> <h4>CNL Tree Menu1</h4> <p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展開</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折疊</a></p> <ul> <li class="Opened"><a href=" http://www.iecn.net ">IECN.Net</a> <ul> <li><a href="#1">技術區</a> <ul> <li><a href="#">網頁技術</a> <ul> <li class="Child"><a href="#">JavaScript</a></li><!--Child Node--> <li class="Child"><a href="#">HTML/XHTML/CSS</a></li> <li class="Child"><a href="#">Ajax</a></li> <li class="Child"><a href="#">網頁製作工具</a></li> <li class="Child"><a href="#">設計/圖形</a></li> <li class="Child"><a href="#">Flash/多媒體</a></li> <li class="Child"><a href="#">VML/Web3D</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">Web編程</a> <ul> <li class="Child"><a href="#">Java</a></li><!--Child Node--> <li class="Child"><a href="#">.Net</a></li> <li class="Child"><a href="#">ASP/VBScript</a></li> <li class="Child"><a href="#">PHP</a></li> <li class="Child"><a href="#">Perl/Python</a></li> <li class="Child"><a href="#">Web綜合/開源</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">資料庫</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node--> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">伺服器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node--> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">應用伺服器</a></li> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> </ul></li><!--Sub Node 1 --> </ul> </div><!-- CNLTreeMenu --> <!--CNLTreeMenu1 End!-->
希望採納
Ⅲ eclipse項目文件夾右上角有個js左上角有個地球是什麼項目
eclipse項目文件夾右上角有個js左上角有個地球是eclipse自帶瀏覽器項目。Eclipse系統內部自帶了瀏覽器，該瀏覽器可以通過點擊Window菜單並選擇ShowView>Other，在彈出來的對話框的搜索欄中輸入"browser"。在樹形菜單中選擇"InternalWebBrowser"並點擊OK。在內置瀏覽器中我們在地址欄中輸入網址http://www.w3cschool.cc即可打開網頁。
Ⅳ 如何快速讀懂項目源碼javaWeb
一：學會如何讀一個JavaWeb項目源代碼 步驟：表結構->web.xml->mvc->db->spring
ioc->log-> 代碼
1、先了解項目資料庫的表結構，這個方面是最容易忘記 的，有時候我們只顧著看每一個方法是怎麼進行的，卻沒
有去了解資料庫之間的主外鍵關聯。其實如果先了解數據 庫表結構，再去看一個方法的實現會更加容易。
2、然後需要過一遍web.xml，知道項目中用到了什麼攔
截器，監聽器，過濾器，擁有哪些配置文件。如果是攔截 器，一般負責過濾請求，進行AOP 等;如果是監 可能是定時任務，初始化任務;配置文件有如使用了 spring
後的讀取mvc 相關，db 相關，service 相關，aop 相關的文件。
3、查看攔截器，監聽器代碼，知道攔截了什麼請求，這
個類完成了怎樣的工作。有的人就是因為缺少了這一步， 自己寫了一個action，配置文件也沒有寫錯，但是卻怎麼
調試也無法進入這個action，直到別人告訴他，請求被攔
4、接下來，看配置文件，首先一定是mvc相關的，如 springmvc
中，要請求哪些請求是靜態資源，使用了哪些 view 策略，controller 註解放在哪個包下等。 然後是db 相關配置文件，看使用了什麼資料庫，使用了
什麼orm框架，是否開啟了二級緩存，使用哪種產品作 為二級緩存，事務管理的處理，需要掃描的實體類放在什 么位置。最後是spring 核心的ioc
功能相關的配置文件， 知道介面與具體類的注入大致是怎樣的。當然還有一些如 apectj 置文件，也是在這個步驟中完成
5、log
相關文件，日誌的各個級別是如何處理的，在哪些 地方使用了log 記錄日誌
6、從上面幾點後知道了整個開源項目的整體框架，閱讀 每個方法就不再那麼難了。
7、當然如果有項目配套的開發文檔也是要閱讀的。
Ⅳ 樹形菜單在ie6 7下能用，在高版本的360 。 火狐 ie8都顯示不了。。
您好，感謝您對火狐的支持
如果使用的tomcat就是系統配置原因造成的，這與頁面代碼沒有關系，檢查下設置參數。
您可以在火狐官方網站下載火狐瀏覽器，在火狐社區了解更多內容。希望我的回答對您有所幫助，如有疑問，歡迎繼續在本平台咨詢。
Ⅵ web前端框架是做什麼的
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
Ⅶ 使用treeview控制項讀資料庫動態生成帶checkbox復選框的樹形導航菜單asp.net（C#），急求幫助還可加分
頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tree.aspx.cs" Inherits="MyTeachers.web.Tree" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" Height="257px" ImageSet="WindowsHelp"
Width="142px" Target="rightFrame">
</asp:TreeView>
</div>
</form>
</body>
</html>
後台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data;
namespace MyTeachers.web
{
public partial class Tree : System.Web.UI.Page
{
DataView dv;
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
int id =Convert.ToInt32(Session["userID"]);
//資料庫執行查詢的方法就不寫了。
//Operator op = new Operator();
//這里執行的是：select * from tabmenu
dt = BLL.tabMenuBLL.GetAlltabMenut(id);
//第一次載入時調用方法傳參
CreateTree(0, null, dt, this.TreeView1);
}
}
/// <summary>
/// 創建一個樹
/// </summary>
/// <param name="parentID">父ID</param>
/// <param name="node">節點</param>
/// <param name="dt">DataTable</param>
/// <param name="treeView">TreeView的名稱</param>
public void CreateTree(int parentID, TreeNode node, DataTable dt, TreeView treeView)
{
//實例化一個DataView dt = 傳入的DataTable
dv = new DataView(dt);
//篩選(相當於select * from tabMenu where menuParentID = 傳入的 parentID)
dv.RowFilter = "[pid]=" + parentID;
//用foreach遍歷dv
foreach (DataRowView row in dv)
{
//第一次載入時為空
if (node == null)
{
//創建根節點
TreeNode root = new TreeNode();
//root.Target = "rightFrame";
//必須與資料庫的對應
root.Text = row["menuName"].ToString();
root.Value = row["menuID"].ToString();
//添加根節點
this.TreeView1.Nodes.Add(root);
//遞歸調用方法本身
CreateTree(int.Parse(row["menuID"].ToString()), root, dt, treeView);
}
else
{
//添加子節點
TreeNode childNode = new TreeNode();
childNode.Text = row["menuName"].ToString();
childNode.Value = row["menuID"].ToString();
childNode.NavigateUrl = row["menuUrl"].ToString();
node.ChildNodes.Add(childNode);
CreateTree(int.Parse(row["menuID"].ToString()), childNode, dt, treeView);
}
}
}
}
}
Ⅷ Web前端工程師喜歡的高質量Web前端框架有哪些
今天小編要跟大家分享的文章是關於高質量Web前端框架，相信很多Web前端工程師都會對此感興趣的。Web前端框架就是為了節約開發成本和時間，一般開發一個項目都會用到前端框架(除非自己有前端開發團隊)。今天小編就為大家分享一些高質量的前端框架希望能夠對大家有所幫助。
一、QUICKUI
QUICK
UI是一套完整的企業級web前端開發解決方案，由基礎框架、UI組件庫、皮膚包、示例工程和文檔等組成。使用QUICKUI開發者可以極大地減少工作量，提高開發效率，快速構建功能強大、美觀、兼容的web應用系統。
QUICKUI優勢：
①功能最為強大
QUICKUI經歷了7年的迭代更新，不斷從客戶的各種業務中對組件的需求進行歸納和抽離，從而打造新的組件和功能。現在最新的4.0版本框架包含了一百多種組件，一千多個應用場景示例。可以說在前端框架領域中，QUICKUI擁有功能最強大組件庫。
②運行最為穩定
很多其他的第三方UI控制項在簡單場合使用OK，到了復雜的場景中就會出現很多問題，這種現象很常見，因為在組件設計時無法預料到所有的應用場合。而QUICKUI在7年間經歷了數千個項目實際檢驗，在各種復雜場景都應用過，並根據客戶的反饋不斷完善和調整。目前的第四代可以說是最穩定、最完美的版本。
③豐富精美的界麵皮膚
跟其他web前端框架僅僅是一套組件庫不同，QUICKUI是一整套前端解決方案，擁有豐富的外觀界面解決方案。採用現今流行的扁平化設計理念，推出了包括登錄、響應式web、工作桌面、地圖類、門戶風格、大屏展示風格等等幾百套製作精美、用戶體驗優秀的界面。這些界面是以QUICKUI皮膚包的形式發布，使用和更換都非常方便。
④事無巨細的開發文檔
QUICKUI擁有16萬字+的開發文檔，框架和組件的每一個功能點都有詳細的講解和代碼示例，用於開發過程中隨時查閱。除了框架機制講解和組件使用教程，文檔還涉及web前端開發的很多知識。仔細閱讀並結合框架使用的話，你很快就能成為web開發的高手。
⑤上手開發非常容易
QUICKUI採用組件化思想來構建組件，一個組件就是一兩句html的標簽，使用起來非常簡單。將開發人員從繁瑣的JS編碼中解脫出來，很大程度減少前台編碼的出錯率;保留了HTML的布局方式，從而快速進行頁面布局。對開發者前台技術要求也非常低，只需要了解html語法和一些簡單的JS即可，從而把更多精力放在業務功能的實現上，極大地提高開發效率。
⑥瀏覽器兼容性非常好
QUICKUI4.0使用了很多HTML5，CSS3技術用於提高表現力和用戶體驗，這些新的特性在現代瀏覽器中會有很好的效果。但是，國內依然有大量的用戶在使用IE7、IE8等舊時代的瀏覽器，為照顧這部分用戶，框架採用了漸進式思想，確保低版本瀏覽器也能正常使用。所以，QUICKUI兼容IE7以上所有主流瀏覽器。
二、flex
Apache基金會今天發布了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本。
需要注意的是，Flex目前還在孵化階段，還不是Apache的正式項目，Flex4.8也不是一個正式的Apache版本。
Apache稱，該版本標志著Flex新時代的開始，Flex的未來將由社區來驅動，而不是由一個公司驅動。開發者可以通過貢獻代碼，來幫助改進Flex，如修復bug、增加功能等。
從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了!
三、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢!
四、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩!不過一個比較大的優勢是開源免費，並且界面做的還說的過去!
五、jQueryUI
jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs(如本站首頁右上角部分)、拉簾效果(本站首頁左上角)、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源!
六、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQueryMiniUI_快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源!基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級!
七、DWZ
DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下!不過性能怎麼樣不敢確定!
八、YUI
Yahoo!UILibrary
(YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為
BSD許可證，基本上沒怎麼研究過!YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣!
九、Sencha
Sencha是由ExtJS、jQTouch以及Raphael三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦!
十、OperaMasks-UI
OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發!而且是國產的喲!
以上排序是整理時的排序，一起整理分析一下，下次用的時候就不用到處找了，我想同樣的問題應該也存在在很多程序員身上，任何一款UI框架，只要能夠容易入手就行。
以上就是小編今天為大家分享的關於高質量web前端框架有哪些?的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端知識的小夥伴們記得關注北大青鳥web培訓官網哦。
作者：qianankuangjia，來源：CSDN
原文：https://blog.csdn.net/qianankuangjia/article/details/78042944
Ⅸ Axure RP 6.5 web原型圖製作中的下拉多選製作
帶復選框的效果沒法做，Axure自身帶的樹形菜單組件不支持帶復選框。但樹形菜單可以做，展示效果也可以做成這樣，即帶圖標的顯示。
Ⅹ div+css問題 js樹形菜單 展開變成減號 閉合是加號 怎麼實現的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body
a
a:hover
#menu
#menu ul
#menu ul li
#menu ul li a
#menu ul li a:hover
#menu ul li a#current
#menu ul li ul
#menu ul li ul li
#menu ul li ul li a
#menu ul li ul li a:hover
#menu ul li:hover ul
#menu ul li.sfhover ul
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首頁</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
</li>
<li><a href="#">網頁版式</a>
<ul>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉2</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉3</a></li>
</ul>
</li>
<li><a href="#">web實例</a>
<ul>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉4</a></li>
</ul>
</li>
<li><a href="#">常用代碼</a></li>
</ul>
</div>
</body>
</html>