天天看點

EasyUI文檔學習心得

概述

jQuery EasyUI 是一組基于jQuery 的UI 插件集合,它可以讓開發者在幾乎完全不需要CSS以及複雜的JS代碼情況下完成美觀且功能強大的Web界面。

本文主要說明一些如何利用EasyUI文檔快速學習的心得。官網文檔介紹的比較詳細,也可以使用中文文檔。

官網文檔:

http://www.jeasyui.com/tutorial/index.php

http://www.jeasyui.com/documentation/index.php

中文官網文檔:

http://www.jeasyui.net/tutorial/

各版本中文離線文檔整合位址:

http://download.csdn.net/album/detail/343

為什麼說幾乎不需要CSS?

EasyUI中自帶了各個元件的CSS樣式,并且有多種主題可選。即使預設提供的幾種主題不能滿足需要,也可以使用官方的主題編輯器進行修改。官方主題編輯器位址:

http://www.jeasyui.com/themebuilder/index.php

浏覽器相容性如何?

支援所有主流浏覽器,支援H5,支援擴充。在1.3.5版本後自帶了jQuery2.x,是以如果需要支援低版本IE浏覽器請使用1.3.5之前版本。

比較重要的元件

EasyUI對自己的元件已有分類:Base(基礎)、Layout(布局)、Menu and Button(菜單和按鈕)、Form(表單)、Windows(視窗)、DataGrid and Tree(表格和樹)、Extension(擴充)。

快速學習的話,可以直接從具體的分類裡直接看。如果不想要書寫CSS的話,應從Layout開始看,特别是Layout中的Layout部分(它确實是這麼分類的)。Base裡面包含提示框、進度條等常用元件。

個人使用最多的是DataGrid and Tree部分。

學習EasyUI有哪些條件

必要條件是需要知道一些HTML的标簽、基礎知識。最好是有JS和jQuery的基礎。

本文大部分内容是基于有JS和jQuery基礎的。

入門示例

本文主要介紹文檔學習,是以入門我就貼一段HTML代碼,效果是實作一個可拖拽的對話框。這個示例沒有使用自定義的CSS和JS。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div class="easyui-dialog" style="width:500px;height:250px"
data-options="title:\'My Dialog\',collapsible:true,iconCls:\'icon-ok\'">
Hello World!
</div>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
</body>
</html>      

屬性、事件、方法

 文檔首頁率先說明了屬性、事件、方法。因為EasyUI每個元件幾乎都有這三個東西,并且API也是通過這三個東西展示的。開篇介紹裡需要記住的,調用方法的文法:

$(\'selector\').plugin(\'method\', parameter);       

開篇還介紹了如果添加擴充方法,比如為dialog元件添加一個移動的方法:

$.extend($.fn.dialog.methods, {    
    mymove: function(jq, newposition){    
        return jq.each(function(){    
            $(this).dialog(\'move\', newposition);    
        });    
    }    
});        

調用時:

$(\'#dd\').dialog(\'mymove\', {    
    left: 200,    
    top: 100    
});        

EasyUI中的繼承

EasyUI存在繼承,在每個元件的開始都會先介紹其繼承關系。比如combo元件:

擴充自$.fn.validatebox.defaults。使用$.fn.combo.defaults重寫預設值對象。      

那麼知道這個繼承關系有什麼用?在某些時候需要這個元件的某些屬性、事件、方法,但是文檔上卻查不到,這裡你可以試試從其繼承鍊向上查。

比如datagrid,繼承于panel,我想給datagrid設定标題、高度、寬度,但是在datagrid文檔中沒找到這些屬性,這時可以去panel元件文檔上找,由于繼承的關系,這些屬性也是可用的。

缺點

EasyUI一直在以版本更新的方式修正自身的缺點,并且在現在的網際網路環境仍然存活,但是有些問題不可避免。

EasyUI閉源,商業版付費,這導緻如果核心出現bug難以調試。而且異步直接重寫了jQuery的錯誤處理方法,導緻全局ajaxSetup不可用。

論壇不活躍,有問題可能難以靠别人或者資料解決。

總結

EasyUI個人覺得快速開發小型應用以及企業内部軟體系統還是比較合适的。因為其閉源(可維護性、安全性差)、過程化的代碼結構,開發大型應用上估計不是很合适。

以後如果有新的心得會繼續在此補充。不過現在工作中其實已經用不到EasyUI了,也不知道其以後發展會如何,但是當初使用的時候真的用的很舒服,遇到bug的時候又十分蛋疼。在此我還是希望其越來越好。

EasyUI文檔學習心得