EasyUIドキュメント学習の心得

7740 ワード

概要
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
ブラウザの互換性はどうですか?
すべての主流ブラウザをサポートし、H 5をサポートし、拡張をサポートします.1.3.5バージョンの後にjQuery 2.xを持参していますので、もし低いバージョンのIEブラウザをサポートする必要があれば、1.355以前のバージョンを使ってください.
重要なコンポーネント
EasyUIは自分のコンポーネントにすでに分類されています.Base、Layout、Menu and Button、Form、Windows(ウィンドウ)、DataGrid and Tree(テーブルとツリー)、Extension(拡張).
早く勉強すれば、具体的な分類から直接見ることができます.CSSを書きたくないなら、Layoutから見るべきです.特にLayoutの中のLayout部分(これは確かに分類されています).ベースにはプロンプトボックスやプログレスバーなどのよく使われるコンポーネントが含まれています.
個人で一番多く使われているのは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の各コンポーネントは、この3つのものがほとんどあり、APIもこの3つのものを通して展示されているからです.冒頭の紹介で覚えなければならないのは、使い方の文法です.

$('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は継承されています.各コンポーネントの開始において、まずその後継関係を紹介します.たとえばcoboコンポーネント:

   $.fn.validatebox.defaults。  $.fn.combo.defaults       。

この継承関係を知っていますが、何の効果がありますか?このコンポーネントのいくつかの属性、イベント、方法が必要な場合がありますが、ドキュメントでは確認できません.ここでは、その相続チェーンから上へ検索してみてもいいです.
例えばdatagridは、panelに引き継がれていますが、datagridにタイトル、高さ、幅を設定したいですが、datagrid文書にはこれらの属性が見つかりませんでした.この時には、panelコンポーネントのドキュメント上で探すことができます.継承の関係でこれらの属性も使えます.
欠点
EasyUIは、更新されたバージョンで自身の欠点を修正し、現在のインターネット環境では生存していますが、問題があります.
EasyUIはソースを閉じて、商業版は有料で、もしコアにバグが発生したら調整しにくいです.また、jQueryのエラー処理方法を非同期で直接書き直したため、グローバルajaxSetupが利用できなくなりました.
フォーラムは活発ではないので、問題があると他の人や資料で解決しにくいかもしれません.

締め括りをつける
EasyUIは個人的には、小型アプリケーションの開発や社内ソフトウェアシステムの開発には適していると思います.その閉じたソース(メンテナンス性、安全性の差)、プロセス化されたコード構造のため、大型アプリケーションの開発にはあまり適していないと思います.
これからも新しい心得があればここで補います.でも、今はもうEasyUIが使えなくなりました.今後どうなるか分かりませんが、使う時は本当に快適です.ここではもっと良くなりたいです.

高度なプログラミング:7章-関数式