JQuery EasyUI_jqueryの使用

jQuery EasyUI は、さまざまなユーザー インターフェイス プラグインを統合する jQuery ベースのフレームワークです。

EasyUI の紹介

easyui は、jQuery に基づいたユーザー インターフェイス プラグインのコレクションです。

easyui は、最新のインタラクティブな JavaScript アプリケーションを作成するために必要な機能を提供します。

easyui を使用すると、多くのコードを記述する必要はありません。簡単な HTML タグを記述するだけでユーザー インターフェイスを定義できます。

easyui は、HTML5 Web ページを完全にサポートする完全なフレームワークです。

easyui は、Web 開発の時間と規模を節約します。

easyui は非常にシンプルですが強力です。

この記事では、さまざまな読み込みと easyload インテリジェント オンデマンド読み込みを含む、EasyUI を使用する 2 つの方法に焦点を当てています。最後に、Parser パーサーの使用方法を学びます。

注: すべてのコードは記事の最後のページで紹介されます

1. 必要なファイルをインポート

jQuery EasyUI1.4.4 が更新されたばかりであるため、この小規模バージョンの更新は主に内部の最適化と UI の微調整であり、学習には影響しません。以前は、中国語マニュアルのバージョン 1.2.4 を使用して 1.3.5 を学習していましたが、バージョンの問題を心配する必要はありません。

記事全体にわたる JQuery EasyUI のディレクトリ構造は次のとおりです

easyui フォルダーは、JQuery EasyUI で使用されるすべてのファイルが保存される場所です

JS フォルダーには独自の JS ファイルが保存されます

index.html は自分で書いた HTML コードを保存するためのものです

//引入 jQuery 核心库，这里采用的是 .
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入 jQuery EasyUI 核心库，这里采用的是 ..
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入 EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//引入自己开发的 JS 文件
<script type="text/javascript" src="js/index.js"></script>
//引入 EasyUI 核心 UI 文件 CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入 EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

追記: 導入が完了したら、jQuery EasyUI コードを書くことができます。

2. UI コンポーネントの読み込み方法

UI コンポーネントをロードするには 2 つの方法があります: 1. クラス メソッドを使用してロードする。 2. JS 呼び出しを使用してロードする。

//使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:px;height:px;">
内容部分
</div>

追記: UI コンポーネントは指定された形式で生成できます。これは、jQuery EasyUI のパーサー (Parser) の役割によるものです。解析後、Firebug から UI コンポーネントの変更された HTML を確認できます。

//使用 JS 调用加载
$('#box').dialog();

PS: UI コンポーネントには多くのプロパティとメソッドがあり、クラスを使用すると非常に不便になるため、一般に 2 番目の JS 呼び出しを使用してロードすることをお勧めします。 2 番目の方法は、JS と HTML の分離の原則に基づいて、コードの可読性を向上させます。

3. easyload.js を使用して

をインテリジェントにロードする

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () {
$('#box').dialog();
});

追記: easyloader を使用してインテリジェントにロードします。これは、使用する UI コンポーネントに応じてオンデマンドでロードされます。 Firebug を通じて HTML を表示すると、多数の js ファイルが読み込まれていることがわかります。これらの js はすべてダイアログ コンポーネントに必要な条件です。したがって、easyloader を使用してロードすると、不必要なコンテンツのロードが減ります。しかし問題は、スマートロードではコーディングの難易度とコストが増加し、効率が低下することです。さらに、インテリジェントにロードされる js ファイルの数が依然として非常に多いため、速度はあまり向上しません。逆に、js ファイルが多いため、検索エンジンはマージ最適化を必要とします。

4. パーサー

Parser パーサーは、さまざまな UI コンポーネントの解析とレンダリングに特化しています。一般的に、UI コンポーネントの解析を自動的に完了するためにこれを使用する必要はありません。もちろん、特定の状況下では手動による解析が必要になる場合があります。
通常、手動解析は、class="easyui-dialog" を設定するなど、クラスを使用する場合に効果的です。

パーサー属性

属性名 デフォルト値 説明

$.parser.auto true 定义是否自动解析 EasyUI 组件
//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;

パーサーメソッド

属性名 パラメータの説明

$.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
$.parser.onComplete 回调函数 解析完毕后执行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

追記: 指定した UI を解析に使用するには、それを解析するように親クラス コンテナを設定する必要があります。例:

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};

上記のコンテンツは JQuery EasyUI の使用法を紹介しています。お役に立てば幸いです。