JqueryEasyUIチュートリアル入門編
12280 ワード
jQueryEasyUIとは?
JqueryUIはjQueryベースのUIプラグインのセットです
jQueryEasyUIを学ぶ条件は?
Jqueryの基本的な文法知識を身につけなければならない.
jQueryEasyUIの特徴は?
1、HTML 5をサポートする
2、拡張をサポートし、自分のニーズに応じてコントロールを拡張できる
3、ソースコード暗号化、商業版有料
他の同型製品は?
1、国産のDWZカード
2、独立したExtJsプラグイン
簡単なデモ?
シンプルなデモでEasyUIに慣れる
上記の例から、EasyUIを使用するにはいくつかのファイルを導入する必要があることがわかります.
//jqueryコアライブラリの導入
//jquery UIコアライブラリの導入
//EasyUI中国語プロンプトの導入
//EasyUIコアUIファイルCSSの導入
//EasyUIアイコンファイルの導入
自分のJSファイルがあれば、自分で定義したJSファイルを導入します
JqueryEasyUI中国語APIドキュメントダウンロードアドレス
UIコンポーネントのロード方法
1、class方式でロード
名前付きメソッドはeasyui-メソッド名
2、JSコールでロード
まず、Demoという名前のJSファイルを作成します.js
HTMLファイルの作成
easyloadを使用します.jsファイルインテリジェントロード
ネットの速度が遅い場合は使えますが、使うことをお勧めしません.文法が少し違うので、難易度が高くなります.
Parser解析器
Parser解析器は各種UIコンポーネントの解析レンダリングに特化している
Parserプロパティ
$.parser.Auto=true説明:EasyUIコンポーネントを自動的に解析するかどうかを定義します.
$.parser.Auto=false自動解析機能をオフにする
この方法は$(function(){})には存在しない
Parserメソッド
$.parser.parseパラメータ:空またはJQセレクタの説明:指定されたUIコンポーネントの解析
例:
$.parser.parse()/すべてのUIコンポーネントの解析
$.parser.onCompleteパラメータ:コールバック関数説明:解析完了後実行
onCompleteの使用
PS:指定されたUI解析を使用して、親コンテナを設定する必要があります.つまり、子クラスが存在する必要があります.
上の弾窓効果はこのように設定すべきです
その他の基本的な説明は、jQuery Easy UIヘルプマニュアルを参照してください.
JqueryUIはjQueryベースのUIプラグインのセットです
jQueryEasyUIを学ぶ条件は?
Jqueryの基本的な文法知識を身につけなければならない.
jQueryEasyUIの特徴は?
1、HTML 5をサポートする
2、拡張をサポートし、自分のニーズに応じてコントロールを拡張できる
3、ソースコード暗号化、商業版有料
他の同型製品は?
1、国産のDWZカード
2、独立したExtJsプラグイン
簡単なデモ?
シンプルなデモでEasyUIに慣れる
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<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>
<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>
<h2>Basic Calendar</h2>
<p>Click to select date.</p>
<div style="margin:20px 0"></div>
<div class="easyui-calendar" style="width:250px;height:250px;"></div>
</body>
</html>上記の例から、EasyUIを使用するにはいくつかのファイルを導入する必要があることがわかります.
//jqueryコアライブラリの導入
//jquery UIコアライブラリの導入
//EasyUI中国語プロンプトの導入
//EasyUIコアUIファイルCSSの導入
//EasyUIアイコンファイルの導入
自分のJSファイルがあれば、自分で定義したJSファイルを導入します
JqueryEasyUI中国語APIドキュメントダウンロードアドレス
UIコンポーネントのロード方法
1、class方式でロード
名前付きメソッドはeasyui-メソッド名
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<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>
<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 id="box" class="easyui-dialog" style="width:400px;height:200px"> </div>
</body>
</html>2、JSコールでロード
まず、Demoという名前のJSファイルを作成します.js
$(function(){
$("#box").dialog();
})HTMLファイルの作成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<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>
<script type="text/javascript" src="Demo.js"></script>
<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 id="box" title="leslieDemo" style="width:400px;height:200px"> </div>
</body>
</html>easyloadを使用します.jsファイルインテリジェントロード
ネットの速度が遅い場合は使えますが、使うことをお勧めしません.文法が少し違うので、難易度が高くなります.
Parser解析器
Parser解析器は各種UIコンポーネントの解析レンダリングに特化している
Parserプロパティ
$.parser.Auto=true説明:EasyUIコンポーネントを自動的に解析するかどうかを定義します.
$.parser.Auto=false自動解析機能をオフにする
この方法は$(function(){})には存在しない
Parserメソッド
$.parser.parseパラメータ:空またはJQセレクタの説明:指定されたUIコンポーネントの解析
例:
$.parser.parse()/すべてのUIコンポーネントの解析
$.parser.onCompleteパラメータ:コールバック関数説明:解析完了後実行
onCompleteの使用
$.parser.onComplete=function(){
alert('UI ');
};PS:指定されたUI解析を使用して、親コンテナを設定する必要があります.つまり、子クラスが存在する必要があります.
上の弾窓効果はこのように設定すべきです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<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>
<script type="text/javascript" src="Demo.js"></script>
<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 id="box" >
<div title="leslieDemo" style="width:400px;height:200px"> </div>
</div>
</body>
</html>その他の基本的な説明は、jQuery Easy UIヘルプマニュアルを参照してください.