jQuery EasyUI 入門の基本 - プラグイン - フロントエンドのトレーニング

EasyUI は、jQuery ベースの UI (ユーザーインターフェイス) プラグインのコレクションです。この記事では、コンポーネントの作成方法を紹介し、スタイルを通じて各属性の機能を紹介し、EasyUI のすべてのプラグインをリストして、学習者がコンポーネントをより速く理解できるようにします。

jQuery EasyUI は、強力な datagrid (データグリッド)、treegrid (ツリーフォーム)、panel (パネル)、combo (ドロップダウンの組み合わせ) などを含む、クロスブラウザー Web ページを作成するためのコンポーネントの完全なセットを提供します。ユーザーは、これらのコンポーネントを組み合わせて使用することも、いずれかを単独で使用することもできます。

コンポーネントの作成: EasyUI は、HTML または JavaScript を介してコンポーネントを作成できます。

1. HTML がコンポーネントを作成する方法

スタイル: <label class="easyui-component name" style="style" title="panel" iconCls="icon-ok" collapsible="true"></label>

class="easyui-component name" 関数: div を easyui コンポーネントに変換するように EasyUI に指示します。

スタイル機能: コンポーネントの幅と高さ、およびその他のスタイルを設定します。

タイトル、iconCls、折りたたみ可能なコンポーネント関数: EasyUI にこのコンポーネントの作成方法を伝えます。

HTML を使用して EasyUI コンポーネントを作成するのは比較的簡単です。

2. JS コードでコンポーネントを作成する方法

スタイル：

<script type="text/javascript">
    $(function(){
      
      
    //获取p标签，把他编程EasyUI面板组件。
        $("#p").panel({
      
      
            //面板属性
            title:"面板",
            iconCls:"icon-no"
        });
    })
</script>
<div>
    <h1>是你的面板</h1>
</div>

同じ名前の属性は、HTML がコンポーネントを作成するのと同じように機能します。

以下は、jQuery EasyUI のプラグインのリストです。

ベース

パーサーパーサー
イージーローダーローダー
ドラッグ可能ドラッグ可能
ドロップ可能に配置可能
リサイズ可能な調整可能なサイズ
ページネーション
検索ボックス検索ボックス
プログレスバープログレスバー
ツールチッププロンプトボックス

レイアウト

パネルパネル
タブタブ/タブ
アコーディオンアコーディオン
レイアウトレイアウト

メニュー（メニュー）とボタン（ボタン）

メニューメニュー
リンクボタンリンクボタン
メニューボタンメニューボタン
Splitbutton 分割ボタン

形状

フォームフォーム
Validatebox 検証ボックス
コンボの組み合わせ
コンボボックスコンボボックス
コンボツリーの組み合わせツリー
コンビグリッドコンビネーショングリッド
ナンバーボックスナンバーボックス
日付ボックス日付ボックス
日時ボックス日時ボックス
カレンダーカレンダー
スピナースピナー
Numberspinner 数値スピナー
タイムスピナータイムスピナー
スライダースライダー

窓

窓の窓
ダイアログダイアログボックス
メサジェメッセージボックス

DataGrid (データグリッド) と Tree (ツリー)

データグリッドデータグリッド
Propertygrid プロパティグリッド
木の木
Treegrid ツリーグリッド

jQuery EasyUI 入門の基本 - プラグイン - フロントエンドのトレーニング

おすすめ