標籤：easyui web前端 介面
EasyUI是一宗基於JQuery的使用者介面外掛程式集合.因此Jquery EasyUI的目的就是協助Web開發人員能夠易如反掌的打造出功能豐富並且非常漂亮的UI介面.
EasyUI一個很大的好處就是,你不需要很懂JavaScript,也不需要對CSS樣式有深刻的研究,你需要瞭解一些簡單的HTML標籤,就能隨心所欲的設計精美的Web前端介面.
Jquery EasyUI的優勢
1為建立現代化,互動,JavaScript應用程式,提供必要的功能.
2大大的節省開發的時間和資源
3一個字easy 兩個字簡單 but功能強大
4支援擴充,你可以根據自己的需求隨意擴充控制項
5完美的支援HTML5網頁的編寫
兩種方法聲明UI組件:
1直接在HTML指令碼中聲明組件
2編寫JavaScript代碼來建立組件
具體的程式碼範例大家可以到Jquery EasyUI官網上去看,這裡就不再贅述了.
這裡想重點討論的是如何在VS2012中使用EasyUI去美化我們的頁面。我們要準備就是VS2012和jquery-easyui-1.3.2，就以這個為例說明一下。
首先我們要建立項目，這個很簡單，我以MVC3為例建立一個項目，如所示：
然後將我們準備好的jquery-easyui-1.3.2放到中的Scripts檔案夾下，因為easyui整體不大，對一個程式的載入，不存在過多的影響，完成之後效果如下：
然後我們就可以使用了,使用的時候有一個問題要注意,那就是在使用EasyUI外掛程式的頁面添加必要的檔案,比如樣式表了,js檔案了什麼的,要想使用EasyUI封裝好的控制項,中的5個檔案是必須要添加的
最後我們來寫一個進度條的代碼執行個體,視圖頁面代碼如下:
<span style="font-size:18px;">@{ Layout = null;}<!DOCTYPE html><link href="../../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /><link href="../../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /><link href="../../Scripts/jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" /><script src="../../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script><script src="../../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script><script type ="text/javascript"> $(function () { var value = $('#p').progressbar('getValue'); if (value < 100) { value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); setTimeout(arguments.callee, 200); } }) </script><html><head> <title>EasyUITest</title></head><body> <div id="p" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div></body></html></span>
運行結果
小結:這篇部落格沒有什麼技術含量,但是對於如何在VS中使用EasyUI封裝好的控制項進行了描述,相信會給初學者帶來些許協助,當然進一步的學習需要各位朋友去EasyUI的官網上逛了,那裡有各種控制項的使用說明和參數說明,這樣你們可以自己隨意定製自己想要的效果.
Web前端開發之EasyUI
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
