❶ 前端頁面的插件有哪些
工具類
方便操作對象，數組等的工具庫
underscore.js
lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建
Sugar在原生對象上增加一些工具方法
functional.js提夠了一些Curry的支持
Watch.js監視對象或屬性的變化
bacon.js函數式編程，cool
streamjs用流的方式來對數組，對象進行系列操作
非同步流程式控制制
eventproxy朴靈出品
Arbiter.js詳細
發布訂閱
qPromise風格的
Async.js
mock
Mock.js生成隨機數據和mock Ajax 請求
jquery-mockjaxmockajax請求
時間庫
moment
datejs
瀏覽器探測
Bowser探測具體瀏覽器和版本
ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等
調試
console-polyfill能放心的使用 console.log()之類的console方法
log讓控制台輸出的log有樣式
Konsole.js在頁面的一個元素里輸出log信息詳細
uri.jsuri操作
cookie增刪改cookie的工具庫
director前端路由庫詳細
BigDecimal.js提高精度的數字操作
JSDoc根據javascript文件中注釋的信息，生成API文檔詳細
hotkeys鍵盤事件的封裝
MD5用 MD5 的方式加密文件的庫
瀏覽器增強類
讓一些舊瀏覽器變牛逼的庫
Selectivizr讓IE 6-8一些的css3選擇器
ieBetter讓ie6-8有高級瀏覽器的特性
ExplorerCanvas讓IE8-的瀏覽器支持canvas
CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。
formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus
https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility讓舊的 IE 也支持 Flexbox
選擇器增強
Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果
未歸類
prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了
表單類
jquery-file-upload上傳文件組件詳細
zTree文件樹形視圖控制項
Treed樹編輯器。感覺展示的感覺很像思維導圖
FileAPI對文件選擇框內的文件的一些處理
表單驗證
.Validate詳細
jQuery-Validation-Engine
表單元素美化
uniform提供對下拉框，單，復選框，按鈕等表單元素的美化
select2多選下拉框
selectivity和unfirom比較類似
DropKick下拉框，單，多選。外觀比uniform好
switcheryios7風格的開關組件
nouislider用滾動條來設置/控制（音量等）
range.css美化input[type=range]元素的外觀
圖片類
holderjs生成占點陣圖片
lazyload
imagesLoaded選取的圖片都載入好後執行調回
CSSgram用CSS3的Filter實現Instagram濾鏡的庫
圖標類
Icon Font匯總
SVG做的圖標
svgicons
iconic
HYBICON帶交互效果。如 hover, click
HTML字元實體圖標
http://www.amp-what.com/
transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號
css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
fancybox彈出查看圖片，視屏等等demo
yoxview彈出查看圖片，圖片尺寸縮放很自然
圖片牆
wookmark
UI 框架
WeUI由微信官方設計團隊為微信 Web 開發量身設計。
Framework7
UI 組件類
拖拽
dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子
angular-draguladragular 官方的 angular 版本
數據可視化(圖表)
Echarts網路出品
highcharts功能強大。是收費的。
Plottable.JS基於D3的一個圖表庫
flot文檔不給力
chartJs中文文檔demo很漂亮，很清晰。比較輕量級。
ichartJs中國的一個傢伙搞的，感覺還不錯。
時間選取組件
foundation-datepicker
DatePicker一個簡單的日歷詳細
full calendar支持脫放的方式來改變待辦事宜的時間
Simple Events Calendar外觀很喜歡。收費 5$
jQuery ui datepicker經典，不是很好看
pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。
bootstrap-datepickerbootstrap風格。
dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.
自定義滾動條
perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。
iscroll在移動設備上用不錯
載入(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格組件
jsGridData Grid。詳細
backgrid基於Backbone.js的DataGrid
excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互（對內容進行排序，刪除等）
handsontable生成Excel外觀的數據
JSpreadsheets表格數據的組件庫
選取顏色
Spectrum
分享到SNS
JiaThis生成分享代碼。
編輯器
ace代碼編輯器，可以用來做demo演示
ckeditor
ueditor網路做的
tinymce對html內容進行實時的編輯
summernote在移動設備上用不錯
通知組件
notie.js
HTML5播放器
jwplayer被大量網站使用
html5media簡單的h5player，輕量級
jplayer功能強太，可換膚
展示
Impress.js各種旋轉，和奇特的體驗
fullPage全屏顯示。用滾輪來翻頁詳細
zepto.fullpage專注於移動端的fullPage.js，依賴Zepto
pagePiling和fullPage類似
turn.js做一本書，帶漂亮的翻頁的效果
幻燈
slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細
iSlider無任何插件依賴的手機平台javascript滑動組件詳細
bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。
Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網
coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。
wowslider幻燈切換時各種很炫的效果。收費。
cycle2普通的幻燈，竟然不支持垂直滾動。。。
jcarousel普通的幻燈，不兼容IE6
reveal3d滾動。做ppt相當不錯
nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題
roundabout3d切換，看的後面圖片的邊
彈出框
Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star
layer國人開發的，兼容ie6+。不喜歡其調用方式。
動畫效果
mixitup用漂亮的動畫效果來完成排序和篩選
jQuery.Marquee跑馬燈效果
quickflip卡片翻轉效果
卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里
TheaterJS模擬兩個人在屏幕上對話
midnight.js文字顏色隨著背景變，屌炸了
color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
transit對元素進行css的變換
tagcanvas3D標簽雲效果詳細
iconate圖片切換動畫
Snap.js左/右側導航的出現效果
CSS shake抖動動畫
ClickSpark.js點擊後的一些酷炫的效果
視覺差插件
scrollorama比較簡單
superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。
scrolldeck
flash
swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細
抽獎
wScratchPad刮刮卡刮獎效果
jqueryrotate旋轉插件。可以用來做轉盤抽獎效果
Intro.js用來介紹網站的功能很不錯。也可以做新手引導。
blockUILolding組件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出時，添加在文字末尾加省略號
jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速
AnythingZoomer放大鏡功能
美化/高亮語法代碼
google-code-prettify
DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮
please按要求隨機舒服的顏色
Awesomplete輸入的智能提示，自動補全
proTip提示。感覺比 Bootstrap 的 tip 好
Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢
用戶體驗增強類
動畫
velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。
Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo
walkway以動畫的方式，漸漸地畫出 SVG 的路徑。
SVG
測試
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 設備。
其他類
ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細
html2canvashtml轉化成canvas，可以用來做截圖。詳細
Ink響應式html郵件框架
性能測試
抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）
jFeed
jRss簡單版的jFeed
scriptcam與攝像頭交互
cylon.js機器人框架，支持35個平台
Masonry一個瀑布流框架
devices.css移動設備邊框的外觀。做原型的時候用不錯。
Bootbox.js對bootstrap的彈出框做的一些封裝
免費皮膚
AdminLTE
Bootstrap相關類
JS Plugins倉庫
jQuery Cards高質量的 jQuery 插件網站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各種語言的庫
OniUI去哪兒網做的一套基於Avalon的框架
常用的移動端框架
zepto.js
語法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
iscroll.js
解決頁面不支持彈性滾動，不支持fixed引起的問題~
實現下拉刷新，滑屏，縮放等功能~
最新版本已經更新到5.0
underscore.js
筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
最新版本已經更新到1.8.2
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~
❷ java 如何讀取指定文件夾內的所有文件夾及文件，然後在頁面上以樹的形式顯示出來。
我給你一個讀取指定文件夾下面的所有文件夾，和文件的代碼。
至於頁面上用樹來顯示，html的話，這個有點麻煩。
swing的話，你就只需要用DefaultTreeModel.add(new TreeNode("XXX"));
public class GetAllFiles{
private String filePath = "C:/windows"; // 讀取C:/windos文件
private File f = null;
public GetAllFiles(){
f = new File(filePath);
}
public List<File> getAllFile(){
File[] fileInF = f.listFiles(); // 得到f文件夾下面的所有文件。
List<File> list = new List<File>();
for(File file : fileInF){
list.add(file);
}
return list;
}
public static void main(String[] args){
new GetAllFiles().getAllFile();
}
}
❸ DropDownList控制項如何在前端顯示出後端賦的值
DropDownList控制項可以做如下修改
<asp:DropDownList ID="lstSex" runat="server" Width="150px">
<asp:ListItem Value="B">男</asp:ListItem>
<asp:ListItem Value="A">女</asp:ListItem>
</asp:DropDownList>
註：VALUE值改成男：A 女：B
在後面可以這樣寫
string sex;
//(給這個SEX賦值)
lstSex.SelectedValue=sex
PS:這種方法對於這種數據比較少的情況適用，如果數據項多的不建議
❹ antv G6 分層樹怎麼將圖片插入作為樹節點
你看下這個代碼能不能套用 不是完全復制哈
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.ComponentModel;
usingKingdee.BOS;
usingKingdee.BOS.Util;
usingKingdee.BOS.Core;
usingKingdee.BOS.Core.DynamicForm;
usingKingdee.BOS.Core.DynamicForm.PlugIn;
usingKingdee.BOS.Core.DynamicForm.PlugIn.Args;
usingKingdee.BOS.Core.DynamicForm.PlugIn.ControlModel;
usingKingdee.BOS.Core.Metadata;
namespaceJDSample.FormPlugIn.DynamicForm
{
///<summary>
///分批分層載入樹節點
///</summary>
///<remarks>
///案例背景：
///界面上使用樹控制項，需顯示大量的節點；
///如果一次性載入到客戶端，顯示渲染會非常慢；
///因此，需要分層、分批下載
///
///案例說明：
///新增一個動態表單，掛上本插件，並在界面有一個樹控制項F_JD_TreeView；
///界面初始化時，僅載入第一層節點；
///用戶點擊節點時，才載入其包含的子節點，而且每次最多載入10個；
///單層超過10個節點，通過"點擊載入更多..."節點，分批下載
///</remarks>
[Description("分批分層載入樹節點")]
publicclassS160107TreeEdit:AbstractDynamicFormPlugIn
{
///<summary>
///本地變數，存儲需載入到前端的所有節點信息，以及其是否已經載入標志
///</summary>
privateDictionary<string,NodeInfo>_dctNodes=newDictionary<string,NodeInfo>();
///<summary>
///本地變數，存儲已經被載入過的父節點Id，避免重復搜索其子節點，浪費時間
///</summary>
privateHashSet<string>_loadedNodeIds=newHashSet<string>();
///<summary>
///界面初始化結束，觸發此事件，通知插件開始載入樹節點：在此事件，載入第一層節點
///</summary>
///<paramname="e"></param>
publicoverrideList<TreeNode>GetTreeViewData(TreeNodeArgse)
{
if(e.Key.EqualsIgnoreCase("F_JD_TreeView")==false)
{
//需載入是其他樹控制項的節點，略過
returnnewList<TreeNode>();
}
//載入全部節點信息到內存
this.LoadNodes();
//記錄已經載入過根節點
this._loadedNodeIds.Add("0");
//展開樹控制項節點
TreeViewtv=this.View.GetControl<TreeView>("F_JD_TreeView");
tv.SetExpanded(true);
//構造根目錄下的第一層節點並返回
List<TreeNode>nodes=this.BuildTreeNodes("0");
returnnodes;
}
///<summary>
///用戶點擊節點時觸發此事件：載入更多子節點
///</summary>
///<paramname="e"></param>
(TreeNodeArgse)
{
if(e.Key.EqualsIgnoreCase("F_JD_TreeView")==false)
{
//點擊的是其他樹控制項，略過
return;
}
//判斷是否已經載入過此節點的子節點，如果載入過，則不再載入
if(this._loadedNodeIds.Contains(e.NodeId))
{
return;
}
this._loadedNodeIds.Add(e.NodeId);
TreeViewtv=this.View.GetControl<TreeView>("F_JD_TreeView");
stringparentId=e.NodeId;
if(parentId.StartsWith("more"))
{//當前點擊的節點，是"點擊載入更多..."
string[]keys=parentId.Split('|');
parentId=keys[1];//第2部分為父節點部分
//"點擊載入更多..."節點已經被點擊過，不再需要了，移除之
tv.RemoveNode(e.NodeId);
}
//開始載入更多的子節點
List<TreeNode>childNodes=this.BuildTreeNodes(parentId);
if(childNodes.Count>0)
{
tv.AddNodes(parentId,childNodes);
}
}
///<summary>
///構建樹控制項所需要的節點對象
///</summary>
///<paramname="parentId">父節點Id，為0表示第一層節點</param>
///<returns></returns>
privateList<TreeNode>BuildTreeNodes(stringparentId)
{
List<TreeNode>nodes=newList<TreeNode>();
//遍歷全部節點，找指定節點中，未載入的子節點的子節點
intcount=0;
intindex=0;
foreach(varitemin_dctNodes)
{
NodeInfonodeInfo=item.Value;
if(nodeInfo.Loaded==false
&&nodeInfo.ParentId==parentId)
{
nodeInfo.Loaded=true;
count++;
TreeNodenode=newTreeNode()
{
id=nodeInfo.Id,
text=nodeInfo.Caption,
parentid=nodeInfo.ParentId,
};
nodes.Add(node);
}
if(count>=10)
{//本次載入超過了10個
//生成一個特殊的節點（載入更多...），並停止本批載入更多子節點
TreeNodenode=newTreeNode()
{
//需要基於如下需求，生成一個特殊的節點Id
//1.需要與其他普通節點進行區分：以more為前綴
//2.需要能夠提取出父節點Id：包含父節點Id
//3.每次產生的特殊節點Id不能重復：需包含當前節點索引
id=string.Format("more|{0}|{1}",parentId,index),
text="點擊載入更多...",
parentid=parentId,
};
nodes.Add(node);
break;
}
index++;
}
returnnodes;
}
///<summary>
///到資料庫載入全部節點信息：本示例直接手工構建一批有層次的節點信息
///</summary>
privatevoidLoadNodes()
{
//節點名稱，包含其子節點的數量，以提示用戶，可以展開查看子節點
//第一層節點
_dctNodes.Add("1",newNodeInfo(){Id="1",ParentId="0",Caption="江西(100)"});
_dctNodes.Add("2",newNodeInfo(){Id="2",ParentId="0",Caption="廣東(3)"});
//循環添加100個第一層節點
for(inti=3;i<=100;i++)
{
_dctNodes.Add(i.ToString(),newNodeInfo()
{Id=i.ToString(),ParentId="0",Caption=string.Format("省份{0}(0)",i)});
}
//第二層節點：
_dctNodes.Add("1.1",newNodeInfo(){Id="1.1",ParentId="1",Caption="南昌(0)"});
_dctNodes.Add("1.2",newNodeInfo(){Id="1.2",ParentId="1",Caption="九江(0)"});
_dctNodes.Add("1.3",newNodeInfo(){Id="1.3",ParentId="1",Caption="贛州(0)"});
//循環添加100個第二層節點
for(inti=4;i<=100;i++)
{
_dctNodes.Add(string.Format("1.{0}",i),
newNodeInfo()
{
Id=string.Format("1.{0}",i),
ParentId="1",
Caption=string.Format("城市{0}(0)",i)
});
}
_dctNodes.Add("0201",newNodeInfo(){Id="0201",ParentId="02",Caption="廣州(0)"});
_dctNodes.Add("0202",newNodeInfo(){Id="0202",ParentId="02",Caption="深圳(2)"});
_dctNodes.Add("0203",newNodeInfo(){Id="0203",ParentId="02",Caption="惠州(0)"});
//第三層節點：
_dctNodes.Add("020201",newNodeInfo(){Id="020201",ParentId="0202",Caption="南山區"});
_dctNodes.Add("020202",newNodeInfo(){Id="020202",ParentId="0202",Caption="寶安區"});
}
}
///<summary>
///節點信息對象
///</summary>
classNodeInfo
{
///<summary>
///本節點Id
///</summary>
publicstringId{get;set;}
///<summary>
///父節點Id
///</summary>
publicstringParentId{get;set;}
///<summary>
///本節點標題
///</summary>
publicstringCaption{get;set;}
///<summary>
///是否已經載入標志：默認為false，未載入到前端
///</summary>
publicboolLoaded{get;set;}
}
}
❺ web前端 和java
舉個例子，對於廣告系統的來說， 我們先不管一些job，CACHE，config ... 這些優化，些框架和分層可以是這樣的，
MVC的技術選型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架構
前端開發剛興起的階段，前端開發人員的工作經常穿插在後端開發過程中擔任輔助作用的，隨著業務越來越復雜，前端必須有自己的開發框架和流程，使得後端專注於服務類的開發，前端專注於與用戶交互類的開發。
WEB前端從概念上劃分為三個層次：結構、表現、和行為。三層相對獨立，互不影響。在物理上層面上分別對應HTML、CSS、JS三種不同的的文件格式。
HTML：負責定義網頁的結構，內容
CSS：負責內容的展現方式
JS：負責網頁關於動態的行為反應
好的層次劃分對前端的開發也很關鍵。顯示內容問題的唯一來源應該是html文件定義的，內容展示問題的唯一來源應該是CSS文件定義的，行為問題的唯一來源應該是javascript文件定義的，各司其職相互獨立。但是他們是相關的，因為行為和樣式無法與結構分離，必須寫在同一個文件里。這種情況下，首先還是你要把行為和樣式從html標簽中分開，然後在html文件中引入。
前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。
1）結構層
在java領域，表現層技術主要有三種：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在傳統的網頁HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP標記(tag)，它實現Html語法中的java擴展（以 <%, %>形式）。從而形成JSP文件，後綴名為(.jsp)。因為java具有跨平台特點， 用JSP開發的Web應用是跨平台的，既能在Linux下運行，也能在其他操作系統上運行。JSP與Servlet一樣，是在伺服器端執行的，最終都要變.class文件，通常返回給客戶端的就是一個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。
優點：
可以寫java代碼
支持jsp標簽（jsp tag）
支持表達式語言（el）
官方標准，用戶群廣，豐富的第三方jsp標簽庫
性能良好，jsp編譯成class文件執行，有很好的性能表現
缺點：
編寫java代碼，如使用不當容易破壞mvc結構。
(2) Freemarker
它生成靜態頁面，首先需要使用自己定義的模板頁面，這個模板頁面可以是最最普通的html，也可以是嵌套freemarker中的 取值表達式， 標簽或者自定義標簽等等，然後後台讀取這個模板頁面，解析其中的標簽完成相對應的操作， 然後採用鍵值對的方式傳遞參數替換模板中的的取值表達式，做完之後 根據配置的路徑生成一個新的html頁面， 以達到靜態化訪問的目的。
模板+數據模型=輸出，模板只負責數據在頁面中的表現，不涉及任何的邏輯代碼，而所有的邏輯都是由數據模型來處理的。用戶最終看到的輸出是模板和數據模型合並後創建的。
FreeMarker與Web容器無關，即在Web運行時，它並不知道Servlet或者其他。
優點：
可以徹底的分離表現層和業務邏輯，使用JSP 開發過程中在頁面中大量的存在業務邏輯的代碼，使得頁面內容凌亂，在後期大量的修改維護過程中就變得非常困難。FreeMarker根本不支持Java代碼。
可以提高開發效率，JSP在第一次執行的時候需要轉換成Servlet類，開發階段進行功能調適時，需要頻繁的修改JSP，每次修改都要編譯和轉換 。FreeMarker模板技術不存在編譯和轉換的問題，開發過程中，後端不必在等待界面設計開發人員完成頁面原形後，再來開發程序。
對jsp標簽支持良好
內置大量常用功能，比如html過濾，日期金額格式化等等
使用表達式語言 (EL)
缺點：
不是官方標准
用戶群體和第三方標簽庫沒比jsp豐富
使用FreeMarker後，作為界面開發人員，只專心創建HTML文件、圖像以及Web頁面的其他可視化方面，不用理會數據；而程序開發人員則專注於系統實現，負責為頁面准備要顯示的數據。
還有一些像velocity這樣較早出現的用於代替jsp的模板語言 ... ...
2) 表現層CSS
結構搭建之後，就是為他們添加樣式表屬性。它實現的是頁面內容和現實樣式分離，所有的CSS都是非必需的，就算無法應用CSS或CSS沖突，網頁也能夠正常訪問。
為了管理的方便，可以將不同樣式進行拆分，比如可以拆分為全局樣式，結構布局樣式，色彩樣式，文字樣式和重置樣式。css在開發時代碼採用了規范的形式，比如有注釋，縮進等，這樣，這些文件的大小比較大，為了減少網路流量，提高網頁的下載速度，一般發布時需要對javascript和css進行壓縮處理，我們將樣式文件進行合並壓縮，目的是減少與伺服器交互的時間和次數。如http://www.jb51.net/tools/cssyasuo.shtml可以在線進行壓縮。
樣式混合使用選擇：
有關整個網站統一的樣式代碼，放置在獨立的樣式文件中.css
某些樣式不同的頁面，除了鏈接外部樣式文件，還需要自定義的樣式
某張網頁中，部分內容如果需要一種不同，採用內行樣式
) 行為層 javaScript
常見的也是最有名的javascript 框架，其實准確來說應該是庫：
（http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 類庫，它是比較輕量級的類庫，對 DOM 的操作也比較方便到位，支持的效果和控制項也很多。同時，基於 jQuery 有很多擴展項目，包括 jQuery UI(jQuery 支持的一些控制項和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)。這些補充使得 jQuery 框架更加完整，而且這些擴展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發更加豐富。
Ext
相比 jQuery，Ext JS 更重量級，有幾個兆的文件，使得 Ext 在開發中成為的弊端和累贅。但是，另一方面，在 Ext JS 龐大的文件背後是 Ext JS 強大的功能。Ext JS 的控制項和功能可以說強大和華麗到的程度。圖表、菜單、特效，Ext JS 的控制項庫非常豐富，同時它的交互也非常強大，獨立靠 Ext JS 幾乎就可以取代控制層完成於客戶的交互。強大的功能，豐富的控制項庫，華麗的效果也使得 Ext JS 成為內網開發利器。
YUI
YUI 也有自己的 JavaScript 類庫，DOM 操作和效果處理也還比較方便，功能和控制項也很齊全，但是相比 jQuery 和 Ext JS 顯得比較中庸一些。隨著 Yahoo的沒落，YUI 也漸漸的被淡化。
目前前端框架主要採用 JavaScript+CSS 模式。基於上面的幾種javascript庫，我們可以基於JQuery框架搭建起一個java web前端系統的框架。如叢林的前端就是COS-UI+jQuery搭建起來的，再利用插件ztree實現品類樹在前端的展示。
jquery對javascript的封裝
JQuery能大大簡化Javascript程序的編寫，主要表現：
定位元素
JS寫法:
document.getElementById("abc")
jQuery寫法:
$("#abc") 通過id定位
$(".abc") 通過class定位
$("div") 通過標簽定位
改變元素的內容
JS寫法：
abc.innerHTML = "TEST";
jQuery寫法：
abc.html("TEST");
顯示隱藏元素
JS 寫法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 寫法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();
修改元素樣式
JS寫法：
abc.STYLE.fontSize=size;
jQuery寫法：
abc.css('font-size', 20);
Ajax
JS
自己創建對象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，則如下處理
//result = eval('(' + result + ')');
//ALERT(result);
}
獲得焦點
為表單賦值
獲得表單的值
設置元素不可用
3) 瀏覽器的渲染
4）web前端開發流程
❻ 從資料庫里拿到數據，組成json格式並返回給前端生成動態樹。
對於服務端來說,json只是一個字元串,不過,是一個符合js對象格式的字元串
你可以專門寫一個類或方法來生成json,只要按固定格式拼接字元串就可以了
(拼接的時候注意裡面盡量不要有換行符,否則eval()的時候可能會報語法錯誤)
或者也可以在網上搜生成json的類,如果有的話直接拿來用就是了
❼ 如何使用 JSP JSTL 顯示/製作樹 菜單
謝謝你的回答，本人對前端jquery,css,js都不懂，如果有源碼直接拿來用就最好，是動態帶checkbox的樹菜單，樹節點等數據是從資料庫里取出來的
❽ 在vfp中怎樣使其它控制項顯示在形狀控制項前端也就是怎樣使形狀控制項置於其它控制項下層
容器，顧名思義，就是可以放入其它東西。在容器控制項中可以放入其它的控制項（如文本框、按鈕等），當隱藏容器控制項時，它裡面的控制項也會同時隱藏。而形狀控制項只是簡單的圖形形狀。
❾ ExtJS彈出框層次問題
界面，是一個與後台技術無關的前端ajax框架。
功能豐富，無人能出其右
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
單選行，多選行，高亮顯示選中的行，推拽改變列寬度，按列排序，這些基本功能咱們就不提了。
自動生成行號，支持checkbox全選，動態選擇顯示哪些列，支持本地以及遠程分頁，可以對單元格按照自己的想法進行渲染，這些也算可以想到的功能。
再加上可編輯grid，添加新行，刪除一或多行，提示臟數據，推拽改變grid大小，grid之間推拽一或多行，甚至可以在tree和grid之間進行拖拽，啊，這些功能實在太神奇了。更令人驚嘆的是，這些功能竟然都在ext表格控制項里實現了。
呵呵~不過ext也不是萬能的，與fins的ecside比較，ext不能鎖定列（土豆說1.x里支持鎖定列，但是2.0里沒有了，因為影響效率。），也沒有默認的統計功能，也不支持excel，pdf等導出數據。另外fins說，通過測試ecside的效率明顯優於ext呢。:)
[編輯本段]Ext發展史
1、第一隻「出海」的YUI-Ext只是作者Jack打算對基於BSD協議的Yahoo!UI庫進行自定義的擴展，但後來一度風頭蓋過其父輩YUI，足以說明 大家對它的熱情，很多人把它投入項目人並不十分了解它。分析人士打了一比喻：就好比尚未謀面， 並不了解一個人的家庭、教育、品行等背景，只因為他有一副精緻漂亮的外觀，就對其陷入了瘋狂的傾慕之中。因此分析人士建議，在投入項目前，要認真仔細地了 解EXT的內在原理和與其他Ajax庫不同地方。
2、在2006年初 ，Jack Slocum(傑克斯·洛克姆 ) 就一套公用設施擴建為Yahoo! User Interface (YUI) 庫而工作。這些擴展很快組織成一個獨立的庫代碼並以」 yui-ext」 的名義下發布。
3、在2006年秋天,Jack發行了版本為0.33的yui-ext,而最終被證明為最後版本的代碼，根據這名字（下開放源代碼DSB許可）。在年底之前，這個庫已大受歡迎, 名字被簡化為Ext，反映了它作為一個框架的成熟和獨立。
該公司成立於2007年初，Ext現在為雙執照，使用LGPL和一個商業執照。
4、在2007年4月1日，發布1.0正式版。
5、直至今日(2010年1月8日)ExtJS已發展涵蓋美國、日本、中國、法國、德國等全球范圍的用戶，現在的版本為Ext-3.1.0
6、官方在2009年4月14-16日的首次Ext Conference中發布了Ext的3.0 RC版本。
7、2009年5月4日，Ext的3.0 版本發布。
[編輯本段]什麼是EXT
1、ExtJS可以用來開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於創建前端用戶界面，是一個與後台技術無關的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。ExtJs最開始基於YUI技術，由開發人員JackSlocum開發，通過參考JavaSwing等機制來組織可視化組件，無論從UI界面上CSS樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術的精品。
2、Ext的UI組件模型和開發理念脫胎、成型於Yahoo組件庫YUI和Java平台上Swing兩者，並為開發者屏蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕松。
[編輯本段]ExtJs UI Engine簡介
ExtJs初期僅是對Yahoo! UI的對話框擴展，後來逐漸有了自己的特色，深受網友的喜愛。 發展至今， Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該框架完全基於純Html/CSS+JS技術，提供豐富的跨瀏覽器UI組件，靈活採用JSON/XML數據源開發，使得服務端表示層的負荷真正減輕，從而達到客戶端的MVC應用！
ExtJs支持多平台下的主流瀏覽器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的廠家包括IBM、Adobe、Cisco和更多。ExtJs官方網站
[編輯本段]Ajax主流框架與ExtJS
JQuery、 Prototype和YUI都屬於非常核心的JS庫。雖然YUI，還有最近的JQuery，都給自己構建了一系列的UI器件（Widget），不過卻沒有一個真正的整合好的和完整的程序開發平台。哪怕是這些低層的核心庫已經非常不錯了，但當投入到真正的開發環境中，依然需要開發者做大量的工作去完善很多缺失之處。而Ext就是要填補這些缺口。主流開源框架中只有Dojo像Ext一樣，嘗試著提供整合的開發平台。相比Dojo這個出色的工具包，我們認為 Ext能提供一個粘合度更高的應用程序框架。Ext的各個組件在設計之時就要求和其它Ext組件組合一起工作是無縫合作的。這種流暢的互通性，離不開一個緊密合作的團隊，還必須時刻強調設計和開發這兩方面目標上的統一，而這點是很多開源項目未能做到的。從構建每一個組件開始，我們始終都強調組件的外觀、性能、互通性和可擴展性，而我們認為組件已經達到了這幾點的要求。
Ext絕對可以單獨使用。實際上，除了有特定的要求，推薦單獨使用Ext，這樣的話文件佔位更小，支持和整合也更緊密。我們也支持與jQuery、 YUI或Prototype整合使用，作為低層庫的角色出現，以提供處理各種核心的服務，如DOM和事件處理，Ajax連接和動畫特效。使用整合方式的一個原因是它們已具備了一些特定的器件而Ext並沒有原生支持——像YUI的History控制項便是一個典型的例子。這時，Ext需要依賴YUI這個庫的底層來實現History控制項，這樣一來的話也可免去Ext自身底層庫，從而減少了整個程序的內存佔用。另一個使用整合方式的原因是，對於許多已在使用其他底層庫的程序，你可能希望逐步加入Ext。總之，如果已經有了其他庫，Ext可已利用它們。我們的宗旨是為用戶提供各種可能性和性能上的優化。而事實是，只要實現了相對應的底層庫介面，為任意一個框架添加上適配器是沒有問題的——人們可以輕松地將Dojo、Moo、Ajax.NET，或其它JS庫轉變為 Ext的底層。
Ext從2.x開始收費，這給他的應用前景帶來一些問題。不過對國內開發人員的影響不大，畢竟是客戶付款。
[編輯本段]Ext學習及應用經驗小結
一、理解Html DOM、Ext Element及Component
要學習及應用好Ext框架，需要理解Html DOM、Ext Element及Component三者的區別。
Ext是基於Web的富客戶端框架，其完全是基於標准W3C技術構建設的，使用到的都是HTML、CSS、DIV等相關技術。Ext最傑出之處，是開發了一系列非常簡單易用的控制項及組件，我們只需要使用這些組件就能實現各種豐富多彩的UI的開發。
無論組件有多少配置屬性、還是事件、方法等等，其最終都會轉化為HTML在瀏覽器上顯示出來，而每一個HTML頁面都有一個層次分明的DOM樹模型，瀏覽器中的所有內容都有相應的DOM對象，動態改變頁面的內容，正是通過使用腳本語言來操作DOM對象實現。
僅僅有DOM是不夠的，比如要把頁面中的某一個節點移到其它位置，要給某一個節點添加陰影效果，要隱藏或顯示某一個節點等，我們都需要通過幾句 javascript才能完成。因此，Ext在DOM的基礎上，創建了Ext Element，可以使用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡便的實用方法。
對於終端用戶來說，僅僅有Element是不夠的，比如用戶要顯示一個表格、要顯示一棵樹、要顯示一個彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們在編程時，只要使用這些組件Componet即可實現相關數據展示及交互等，而 Component是較高層次的抽象，每一個組件在渲染render的時候，都會依次通過Element、DOM來生成最終的頁面效果。
在使用Ext開發的應用程序中，組件Component是最高層次的抽象，是直接給用戶使用的，Ext Element是Ext的底層API，主要是由Ext或自定義組件調用的，而DOM是W3C標準定義的原始API，Ext的Element通過操作DOM 來實現頁面的效果顯示。
在Ext中，組件渲染以後可以通過訪問組件的el屬性來得到組件對應的Element，通過訪問Element的dom屬性可以得到其下面的DOM對象。另外，我們可以通過通過Ext類的快捷方法getCmp、get、getDom等方法來得組件Component、Ext元素Element及DOM節點。比如：
var view=new Ext.Viewport();//創建了一個組件Component
view.el.setOpacity(.5);//調用Element的setOpacity方法
view.el.dom.innerHTML="Hello Ext";//通過Element的dom屬性操作DOM對象
再看下面的代碼：
var win=new Ext.Window();
win.show();
var c=Ext.getCmp("win1");//得到組件win
var e=Ext.get("win1");//根據id得到組件win相應的Element
var dom=Ext.getDom("win1");//得到id為win1的DOM節點
二、熟悉ext組件體系
Ext2.0對整個框架進行了重構，最為傑出的是推出了一個以Component類為基礎的組件體系，在Component類基礎上，使用面向對象的方法，設計了一系列的組件及控制項。因此，要能游刃有餘地使用Ext，熟悉Ext組件體系是最基本的。
在《ExtJS實用開發指南》中，有如下面一幅組件圖：
通過組件結構圖我們可以一目瞭然的看出整個Ext組件繼承及組成體系，當使用一個組件的時間，了解他的繼承體系，這樣可以便於我們掌握組件的各種特性。
三、掌握核心控制項
控制項其實也是組件，比如用於顯示樹信息的TreePanel、用於顯示表格的GridPanel及EditorGridPanel，還有代表應用程序窗口的Ext.Window等都屬於Ext控制項。在使用Ext的時候，一定要掌握一些核心控制項，特別是處於基類的控制項。比如上面提到的幾個控制項，他們都是繼承於面板Panel，所以我們要重點掌握面板這個核心控制項的特性。比如面板由以下幾個部分組成：一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成。面板類中還內置了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕松實現自定義的行為，面板可以放入其它任何容器中，面板本身是一個容器，他裡面又可以包含各種其它組件。只要掌握了Panel的應用，那麼學習TreePanel、Window等就會變得簡單得多。
同樣的道理，對於Ext的表單欄位來說，不管是ComboBox，NumberField、還是DateField，他們其它都是 Ext.form.Field類的子類，在他上面定義了表單欄位的各種基本操作及特性。在學習使用表單欄位組件時，一定要重點研究Field這個類，掌握他的主要方法、事件等，就能有助於更好的學習使用其它的欄位。
四、學習及研究示例
由於javascript語言非常靈活，不像靜態強類型語言（比如Java）那樣有固定的代碼設計模式，而往往是不同的人就有不同的編程風格。在實際應用開發中，只有見多識廣，才能在自己的在腦中建立一個開發庫。
學習別人的示例對於我們開發幫助會非常大，示例包括基本組件的應用、綜合應用等多個方面。在此，簡單推薦幾個。
1、Ext官方示例，在ext項目下載包的examples目錄中，包括各個控制項的基本應用演示，同時還有一些比較復雜的組合示例，有簡有繁，非常適合初學者認真研究。
2、Vifir推出的示例，Vifir推出的一些示例主要包括兩類，一種是開源的示例應用，另外一種是針對VIP用戶的實用示例。開源的示例主要是指 wlr單用戶blog系統，這個一個集合了前後台技術的ext綜合示例，而針對VIP用戶的實用示例則是可以作為開發骨架或擴展組件的示例。
3、其它示例，在ext社區中還有很多比較優秀的ext應用示例，有些只是一個應用演示，雖然沒有提供源碼下載，但我們可以直接下載引用的js文件來得到這些示例的ext應用代碼，同樣能取起到非常好的學習效果。
五、多運用
Ext看起來是非常簡單的東西，稍有點編程知識的人，按照《ExtJS實用開發指南》中的入門指南，半小時就能學會使用Ext。然而，當准備使用Ext開發一個項目時，卻不知道從何處入手，或者是在使用Ext的時候，出了一點小問題自己不知道該如何解決。編程是一門實踐性的科學，僅僅靠看書、看別人寫的代碼是遠遠不夠的，因此，必須多做實踐才行，只有通過不斷的練習，大量的使用，才能對Ext的組件特性、事件、事件處理機制以及與伺服器端交互介面等深入的掌握，只有多做運用，深入了解ext的組件的工作原理及機制，才能編寫出高級的Ext的應用。
六、熟讀Ext項目的源代碼
如果要想深入應用Ext，那麼閱讀Ext項目的源代碼這是必不可少的環節，Ext的代碼質量非常高，通過閱讀他的代碼我們可以更加深刻的了解 javascript面向對象編程，Ext代碼中包含了很多高級的js技巧以及設計模式。在使用Ext的過程中，我們經常根據項目的需要對Ext組件進行擴展，設計自己的組件或控制項，而如何實現一個自定義的Ext組件，我們可以從Ext的各個組件源代碼中找到答案。
Ext的源代碼在Ext項目的source目錄。讀Ext源碼，並不一定非要從某一個地方開始，而組件核心代碼Component.js、容器組件代碼 Container.js、面板Panel.js等這些是必看的； core目錄中的Element.js、Ext.js等也是必看的。當需要從一個控制項進行擴展的時候，最好能簡單看一看這個控制項的源代碼。
附：個人喜歡用jquery，哈哈
❿ 家譜樹前端特效怎麼實現
首先確定點到點的向量范圍
然後做枝葉的隨機，將最終節點設置為LEAF
我只給出結構，剩下的LZ自己來吧
function Node(){
this.nodeCount=0;子節點數量
this.isLeaf=false;
this.LChild=[];左枝葉
this.RChild=[];右枝葉
}
結構請按照二叉樹的生成來