Web前端開發之EasyUI

連江偉發表於2015-02-03
Web前端UI

         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的官網上逛了,那裡有各種控制元件的使用說明和引數說明,這樣你們可以自己隨意定製自己想要的效果.

相關文章