ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery プラグイン easyUI 属性 summary_jquery
此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里。
属性分为CSS片段和JS片段。
CSS クラス定義:
1. div easyui-window ウィンドウ ウィンドウ スタイルを生成します。
属性は次のとおりです。
1) modal: モーダルウィンドウを生成するかどうか。 true[はい] false[いいえ]
shadow: ウィンドウの影を表示するかどうか。 true[表示] false[非表示]
2. div easyui-panel パネルを生成します。
属性は次のとおりです。
1)title: タイトルのテキストがパネルの先頭に表示されます。
2)iconCls: CSS クラスを通じてパネルに 16x16 のアイコンを表示します。
3)幅: パネルの幅を設定します。デフォルトは自動です。
4)高さ: パネルの高さを設定します。デフォルトは自動です。
5)left: パネルの左マージンを設定します。
6)top: パネルの上部の位置を設定します。
7)cls: Class クラスをパネルに追加します。
8) headerCls: Class クラスをパネルヘッダーに追加します。
9)bodyCls: パネルのコンテンツに Class クラスを追加します。
10)style: 指定したスタイルをパネルに追加します。
11)fit: True の場合、親コンテナーに合わせてパネル サイズを設定します。デフォルトは false です。
12)border: 定義されている場合、パネルの境界線を表示します。デフォルトは true。
13)doSize: True に設定すると、パネルのサイズが変更され、レイアウトが再構築されます。デフォルトは true。
14) 折りたたみ可能: 定義時に折りたたみ可能なパネルを表示するボタン。デフォルトは false です。
15)minimizable: 定義すると、パネルを最小化するボタンが表示されます。デフォルトは false です。
16)maximizable: 定義すると、パネルを最大化するボタンが表示されます。デフォルトは false です。
17)closeable: 定義すると、パネルを閉じるボタンが表示されます。デフォルトは false です。
18) tools: カスタム ツールバー。各ツールには 2 つの属性が含まれます: iconCls、handler。
19)collapsed: 定義すると、パネルは初期化時に折りたたまれた状態になります。デフォルトは false です。
20)最小化: 定義すると、パネルは初期化時に最小化された状態になります。デフォルトは false です。
21)maximized: 定義すると、パネルは初期化時に最大化された状態になります。デフォルトは false です。
22)closed: 定義すると、初期化時にパネルが閉じられます。デフォルトは false です。
23)href: リモートデータをロードしてパネルに表示する URL。
24)loadingMessage: リモートデータをロードするときに、パネルにメッセージを表示します。デフォルトの Loading...
イベントは次のとおりです:
1)onLoad: リモート データがロードされるときにアクティブ化されます。
2) onBeforeOpen: パネルが開かれる前にアクティブ化されます。
3)onOpen: パネルが開いたときにアクティブになります。
4) onBeforeClose: パネルが閉じる前にアクティブ化されます。
5)onClose: パネルが閉じているときにアクティブになります。
6) onBeforeDestroy: パネルが破壊される前にアクティブになります。
7)onDestroy: パネルが破壊されたときにアクティブになります。
8) onBeforeCollpase: パネルが縮小する前にアクティブ化されます。
.パネルが縮むとき。
10)onBeforeExpand: パネルが展開される前にアクティブ化されます。
11)onExpand: パネルが展開されるとアクティブになります。
12)onResize: パネルが再描画されるときにアクティブになります。
幅: 新しく構築された外部の幅
高さ: 新しく構築された外部の高さ
13) Onmove: パネルが移動した後にアクティブ化します。
左: 左側の新しい位置。
トップ: 上部の新しい位置。
14)onMaximize: ウィンドウが最大化されたときにアクティブになります。
15)onRestore: ウィンドウが元のサイズに復元されたときにアクティブになります。
16)onMinimize: ウィンドウが最小化されるときにアクティブになります。
メソッドは次のとおりです:
1) options: options 属性を返します。
2) パネル: パネルオブジェクトを返します。
3)header: パネルヘッダーオブジェクトを返します。
4)body: パネル本体オブジェクトを返します。
5)setTitle: ヘッダーのタイトルテキストを設定します。
open:forceOpen パラメーターが true に設定されている場合、パネルが開かれるときに onBeforeOpen コールバック関数がバイパスされます。
7) close:forceClose パラメーターが true に設定されている場合、パネルを閉じるときに onBeforeClose コールバック関数がバイパスされます。
8)destroy:forceDestroy パラメーターが true に設定されている場合、パネルが破棄されるときに onBeforeDestroy コールバック関数がバイパスされます。
9)refresh: href 属性が設定された後、パネルを更新してリモート データをロードします。
10)サイズ変更: パネルのサイズとレイアウトを設定します。オプション オブジェクトには次のプロパティが含まれます:
width: 新しいパネルの幅。
高さ: 新しいパネルの高さ。
left: パネルの新しい左位置。
top: パネルの新しい上部の位置。
11)移動: パネルを新しい場所に移動します。该options对象包含以下属性:
left:新的面板左侧位置。
top:新的面板顶部位置。
3、a easyui-linkbutton 生成链接类型的按钮。
属性如下:
1)disabled:当True时禁用该按钮。默认false。
2)plain:当True时显示一个普通效果。默认false。
4. input/textarea easyui-validatebox フィールド検証を生成します。
属性は次のとおりです。
1)required:true[必須] false[不要] デフォルト false
2)validType:
a, length[a,b] フィールド長は制御されますaとbの間で。
b. 電子メールを確認します。
C、ネットワークアドレスを確認するための URL。
3) missingMessage: このツール ヒントは、テキストが空の場合にポップアップ表示されます。システムにはデフォルトの [英語] があり、カスタマイズによりそれを上書きできます。
4)invalidMessage: このツール ヒントは、テキストの内容が無効な場合にポップアップ表示されます。システムのデフォルトは [英語] ですが、カスタマイズによって上書きできます。
5. ul easyui-tree ツリー構造を生成します。
属性は次のとおりです。
1)url: リモートデータを取得するためのアドレス。
2)animate: ノードを展開または折りたたむときにアニメーション効果を定義するかどうか。 True [はい] False [いいえ] デフォルト FALSE
ノードの属性は次のとおりです:
1) テキスト: TEXT: ノードの表示テキスト。
2)id: ノード ID。リモート データをロードするために非常に重要です。
3)状態: ノードのステータス、「オープン」または「クローズ」、デフォルトは「オープン」です。 「オフ」に設定すると、ノードには子ノードが含まれ、リモート サイトはそれらをロードします (リロードはトリガーされません)。
4)属性: ノードにカスタム属性を追加します。
5) 子: 配列ノードの形式でいくつかのバイト ポイントを定義します。
イベントは次のとおりです。
1)onClick:
ユーザーがノードをクリックするとアクティブ化されます。ノードパラメーターには次の属性が含まれます:
id:node id
テキスト:ノードテキストノードカスタムプロパティ。
ターゲット: ターゲットによってクリックされた DOM オブジェクト。
2) OnLoadsuccess:
データが正常にロードされたときにデータがアクティブ化される場合、このパラメーターは jQuery.ajax の 'Success' 関数の効果と同じです。
3)onLoadError:
データのロードが失敗したときにアクティブ化され、このパラメーターは jQuery.ajax の 'error' 関数と同じ効果があります。
方法は以下のとおりです。
1) Reload: ツリーデータを再読み込みします。
2)getSelected: 選択されたノードを取得して返します。ノードが選択されていない場合は、null が返されます。
3)collapse: ノードを折りたたみます。ターゲットパラメータはノードの DOM オブジェクトです。
4)expand: ノードを展開します。ターゲットパラメータはノードの DOM オブジェクトです。
5)append: いくつかの子ノードを親ノードに追加します。
param には 2 つの属性があります:
親: DOM オブジェクト。親ノード (それら) として追加します。
データ: 配列、またはノード データ。
6) 削除: それとその下のサブノードを削除します。ターゲットパラメータはノードの DOM オブジェクトです。
6. table easyui-datagrid テーブルを生成します。
属性は次のとおりです。
1)title: DataGrid パネルのタイトル テキスト。
2)iconCls: タイトルアイコンとして背景画像を提供する CSS クラス。
3) border: true の場合、データグリッド パネルの境界線を表示します。
4) 幅: パネルの幅、自動列の幅。
5) 高さ: パネルの高さ、自動列の高さ。
6) 列: DataGrid 列構成オブジェクト。列プロパティを確認して詳細を取得します。
冷凍列: 列と同じプロパティですが、これらの列は左側に固定されます。
8)ストライプ: true の場合、セルにストライプが表示されます。デフォルトは false です。
9) メソッド: このメソッド タイプを通じてリモート データをリクエストします。デフォルトの投稿。
10) nowrap: true の場合、データは同じ行に表示されます。デフォルトは true。
11)idField: どのフィールドが識別フィールドであるかを示します。
12)url: リモートサイトからデータを取得するための URL。
13)loadMsg: リモートサイトからデータをロードするときに、プロンプトメッセージを表示します。デフォルトは「処理中です。しばらくお待ちください...」です。カスタムカバレッジ。
14)pagination: true の場合、ページング ツールバーが DataGrid の下部に表示されます。デフォルトは false です。
15)rownumbers: true の場合、行番号を表示します。デフォルトは false です。
16)singleSelect: true の場合、現在 1 行のみが選択されています。デフォルトは false です。
17)fit: true の場合、親コンテナーに合わせてサイズを設定します。デフォルトは false です。
18)pageNumber: ページング属性を設定するときに初期化されるページ番号。デフォルトは 1
から始まります。 19) pageSize: ページング属性を設定する場合、初期ページ サイズ。デフォルトは 10 行
20) pageList: ページング属性を設定するときに、ページ サイズ選択リストを初期化します。デフォルト [10,20,30,40,50]
21)queryParams: リモート データを要求する場合、追加のパラメーターも送信できます。
22)sortName: ソートできる列を定義します。
23)sortOrder: 列のソート順序を定義します。「asc」または「desc」のみを指定できます。デフォルトの昇順。
列のプロパティは次のとおりです:
1) タイトル: この列のタイトル テキスト。
フィールド: この列に対応するフィールド名。
3)width: 列の幅。
rowspan セルに必要な行数を示します。
colspan: セルに必要な列の数を示します。
6) Align: COLUMN データの整列方法を説明します。 「左」、「右」、「中央」はすべて使用できます。
7)sortable: true の場合、列のソートが許可されます。
チェックボックス: true の場合、チェックボックスが許可されます。このコラムに登場するために。
イベントは次のとおりです。
1)onLoadSuccess: リモート データが正常にロードされたときにアクティブになります。
onLoadError: リモート データの読み込み中にエラーが見つかった場合にアクティブ化されます。
3) OnclickRow: ユーザーがクリックしてアクティブ化すると、パラメーターには次のものが含まれます:
Rowindex: 0 から始まる行インデックス。
rowData: 行をクリックした際の対応するレコード。
4) ONDBLCLICKROW: ユーザーがダブルクリックしてアクティブ化すると、次のパラメータが含まれます:
Rowindex: 0 から始まる行インデックスをクリックします。
rowData: 行をクリックした際の対応するレコード。
5) onsortcolumn: 列をソートするときにユーザーがアクティブ化されると、パラメータには次のものが含まれます:
sort: ソートフィールド名。
順序: フィールドの種類を並べ替えます。
6) onSelect: ユーザーがアクティブ化する行を選択すると、パラメータには以下が含まれます:
Rowindex: 0 から始まる行インデックス。
rowData: 行をクリックした際の対応するレコード。
7) Onneselect: ユーザーが行の選択をキャンセルすると、パラメータには次のものが含まれます:
Rowindex: 0 から始まる行インデックス。
rowData: 行をクリックした際の対応するレコード。
メソッドは次のとおりです。
1) オプション: 選択されたオブジェクトを返します。
2)resize: サイズを変更してレイアウトを生成します。
3)reload: データを再読み込みします。
4)fixColumnSize: 列サイズを固定します。
5)loadData: ローカルデータをロードします。過去の行は削除されます。
6) getSelected: 最初に選択された行のレコードを返します。選択されていない場合は null を返します。
7)getSelections: 選択されたすべての行を返します。レコードが選択されていない場合は、空の配列が返されます。
8) clearSelections: すべてのオプションの選択ステータスをクリアします。
9)selectRow: 行を選択します。行インデックスは 0 から始まります。
10)selectRecord: ID 値パラメータを渡して行を選択します。
11) unselectRow: 行の選択を解除します。
7. div easyui-tabs タブコンテナを生成します。
属性は次のとおりです:
1)幅: コンテナの幅、自動列の幅。
2) 高さ: コンテナの高さ、自動カラムの高さ。
3)idSeed: ルート ID はラベル パネルの DOM ID 属性に導出されます。デフォルト 0
4)plain: true の場合、タブのレンダリングではコンテナーの背景画像が使用されません。デフォルト false
5)fit: true の場合、親コンテナーに合わせてタブのサイズを設定します。デフォルト false
6) border: true の場合、タブの境界線が表示されます。
7)scrollIncrement:
8)scrollDuration:
イベントは次のとおりです:
1)onLoad: ajax タブ パネルがリモート データをロードする必要があるとき アクティブ化します。このパラメータは、jQuery.ajax の「success」関数と同じ効果があります。
onSelect: ユーザーがタブ パネルを選択するとアクティブ化されます。
3)onClose: ユーザーがタブ パネルを閉じるとアクティブになります。
方法は以下のとおりです。
1)resize: タブコンテナのレイアウトを再描画します。
2) add: 新しいタブ パネルを追加します。このオプション パラメータは、タブ パネルのプロパティを確認することで詳細を取得できます。
3)close: タブパネルを閉じます。 title パラメータには、閉じたいオブジェクトが表示されます。
4) 選択: タブ パネルを選択します。
5)exists: タブパネルが存在する場合に表示されます。
タブ パネルのプロパティは次のとおりです:
1) id: タブ パネルの DOM id 属性。
2)text: タブパネルのタイトルテキスト。
3)content: タブパネルのコンテンツ。
4)href: リモート コンテンツをロードしてタブ パネルに表示する URL。
真実でキャッシュすることができます。デフォルトは true
6)icon: タブ パネルのタイトルの横に表示する CSS クラス アイコンを追加します。
7)closeable: true の場合、タブ パネルに閉じるボタンが表示され、クリックして閉じることができます。默认false
8)selected:当true时,该Tab面板将被选中。默认false
9)width:面板宽度,自动列宽。
10)height:面板高度,自动列高。
8、div menu-sep 生成一个菜单分隔线。
9、a easyui-splitbutton 生成一个菜单列。
10、div easyui-accordion 生成手风琴式下拉框。继承自panel
11. easyui-combobox を選択して、コンボ ドロップダウン ボックスを生成します。
属性は次のとおりです:
1)幅: コンテナの幅、自動列の幅。
2)listWidth: コンボ ドロップダウン ボックスの幅。
3)listHeight: コンボ ドロップダウン ボックスの高さ。
4) valueField: 基本データの値名をコンボ ドロップダウン ボックス [値] にバインドします。
5) textField: 基本データのフィールド名をコンボ ドロップダウン ボックス [テキスト] にバインドします。
6) editable: True の場合、テキスト フィールドにテキストを直接入力できます。デフォルトは true。
7)url: リモートからリストデータをロードするための URL。
イベントは次のとおりです。
1)onLoadSuccess: リモート データが正常にロードされたときにアクティブになります。
onLoadError: リモート データの読み込み中にエラーが見つかった場合にアクティブ化されます。
onSelect: ユーザーがリスト オプションを選択するとアクティブになります。
3)onChange: このフィールドの値が変化するとアクティブになります。
方法は次のとおりです。
1) 選択: ドロップダウン リストで値を選択します。
2)setValue: 指定された値をこのフィールドに設定します。 「param」パラメータには文字列または JS オブジェクトを指定できます。注: JS オブジェクトに含まれるプロパティは、valueField と TextField の 2 つのプロパティに対応します。
3)getValue: このフィールドの値を取得します。
4)リロード: リモートリストデータをリクエストします。
12. easyui-combotree を選択 組み合わせツリー ボックスを生成します。
属性は次のとおりです:
1)幅: コンテナの幅、自動列の幅。
2)treeWidth: ツリーのドロップダウン ボックスの幅。
3)treeHeight: ツリーのドロップダウン ボックスの高さ。
4)url: リモートからツリーデータをロードするための URL。
イベントは次のとおりです:
1)onSelect: ユーザーがツリー ノードを選択するとアクティブになります。
2)onChange: このフィールドの値が変化するとアクティブになります。
メソッドは次のとおりです。
1)setValue: このフィールドに指定された値を設定します。 「param」パラメータには、ツリー ノード ID 値または JS オブジェクトを指定できます。注: JS オブジェクトに含まれる属性は、id と text の 2 つの属性に対応します。
2)getValue: このフィールドの値を取得します。
3)リロード: リモートリストデータをリクエストします。
13. body[div] easyui-layout レイアウトを生成します。
属性は次のとおりです:
1)title: パネルのタイトル テキスト。
2)region:定义布局面板的位置,包含下列值:north,south, east, west, center。
3)border:当True时显示布局面板的边框。默认为True。
4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。
5)icon:一个图标CSS类,在面板头部显示一个图标。
6)href:一个URL,以从远程站点加载数据。
14、div easyui-menu 生成一个菜单。
属性如下:
1)zIndex: Menu z-index样式。注释:z-index 属性设置元素的堆叠顺序。
2)left:菜单左起位置。默认0。
3)top: 菜单顶部位置。默认0。
4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。
事件如下:
1)onShow:激活后显示菜单。
2)onHide:激活后隐藏菜单。
方法如下:
1)show:在指定的位置显示一个菜单。该位置上包含两个参数:
left:新的左起位置。
top:新的顶部位置。
2)hide:隐藏一个菜单。
15、a easyui-menubutton 生成一个菜单按钮。
属性如下:
1)disabled:当True时禁用该按钮。默认false。
2)plain:当True时显示一个普通效果。默认false。
3)menu:一个选择器名称,用来创建相应的菜单。
4)duration: 当悬停该按钮时,定义菜单的持续显示时间,单位为毫秒。默认100。
16、input easyui-numberbox 生成一个数字输入框。
选项如下:
1)min:允许的最小值。当输入值小于最小值时,显示最小值。
2)max:允许的最大值。当输入值大于最大值时,显示最大值。
3)precision:分隔符后能精确的小数点位数。整数默认会追加小数点位数。
JS定义:
1、 .window 生成一个window窗口。
2、 .tree 生成一个树形结构。
3、 .datagrid 生成一个表格。
4、 .combobox 生成一个组合下拉框。
5、 .combotree 生成一个组合树形框。
6、 .dialog 生成一个对话框。它继承自window
私有属性如下:
1)title:该对话框标题文本。默认"New Dialog"。
2)collapsible:当True时可显示折叠按钮。默认false。
3)minimizable:当True时可显示最小化按钮。默认false。
4)maximizable:当True时可显示最大化按钮。默认false。
5)resizable:当True时能重绘对话框大小。默认false。
6)toolbar:该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性。
7)buttons:这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性。
7、 .draggable 生成一个可自由拖动的块。
属性如下:
1)handle:选择"#id"进行拖动。
2)disabled:当True时停止自由拖动。默认false。
3)edge:开始拖动拖动块时的宽度。默认0。
4)axis:当拖动块移动时定义轴,可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。
事件如下:
1)onStartDrag:当目标对象开始拖动时激活。
2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。
3)onStopDrag:当目标对象停止拖动时激活。
8、 .linkbutton 生成一个链式按钮。
9. .messager メッセージボックスを生成します。
オプションは次のとおりです:
1)ok: [OK] ボタンのテキストを表示します。
2)キャンセル: キャンセルボタンのテキストを表示します。
方法は次のとおりです。
1)show: 画面の右下隅にメッセージ ボックスが表示されます。このオプション パラメータは、以下を含む構成オブジェクトです。
showType: メッセージ ボックスの表示モードを定義します。オプションの値には、null、slide、fade、show が含まれます。
showSpeed: メッセージ ボックスを定義します。表示モード。デフォルトは 600 ミリ秒です。
width: メッセージボックスの幅を定義します。デフォルトは 250 です。
高さ: メッセージ ボックスの高さを定義します。デフォルトは 100 です。
Msg: メッセージ ボックスに表示されるテキストを定義します。
タイトル: メッセージ ボックス パネルの上部にタイトル テキストを表示します。
タイムアウト: 0 として定義されている場合、ユーザーが手動で閉じない限り、メッセージ ボックスは自動的に閉じません。ゼロ以外の値が定義されている場合、メッセージ ボックスはタイムアウトの終了時に自動的に閉じます。単位はミリ秒です。
2)アラート: 印刷ウィンドウを表示します。そのパラメータは次のとおりです:
title: ヘッダーにタイトル テキストを表示します。
msg: テキストコンテンツを表示します。
アイコン: アイコンを表示します。オプションの値: エラー、質問、情報、警告。
Fn: ウィンドウが閉じられると、コールバック関数がトリガーされます。
3)confirm: [OK] ボタンと [キャンセル] ボタンを含む確認メッセージ ボックスを表示します。パラメーターは次のとおりです:
タイトル: ヘッダーにタイトル テキストを表示します。
msg: テキストコンテンツを表示します。
Fn (B): コールバック関数。ユーザーが [OK] ボタンをクリックして true を返すと、他のボタンは false を返し、処理されません。
4) プロンプト: [OK] ボタンと [キャンセル] ボタンを含むメッセージ ボックスを表示し、ユーザーにテキストの入力を求めます。パラメーターは次のとおりです:
title: ヘッダーにタイトル テキストを表示します。
msg: テキストコンテンツを表示します。
Fn (Val): バックツー調整機能は、ユーザー入力のパラメーター値を処理します。
10. .pagination ページ番号ツールバーを生成します。
属性は次のとおりです。
1) 合計: ページング バーの作成時に設定されたレコードの数。デフォルトは 1。
2)pageSize: ページサイズ。デフォルトは 10 です。
3)pageNumber: ページングの作成時に表示されるページ番号。デフォルトは 1。
4)pageList: ユーザーはページのサイズを変更できます。このプロパティで定義されたデフォルトのサイズを変更することもできます。デフォルトは[10、20、30、50]です。
5) ロード中: ロード中かどうかを定義します。デフォルトは false です。
6) ボタン: カスタム ボタンを定義します。各ボタンには 2 つの属性が含まれます:
iconCls: この CSS クラスは背景アイコンを表示します。
ハンドラー: ボタンをクリックしたときに処理関数をトリガーします。
7)beforePageText: 入力コンポーネントの前にラベルテキストを表示します。
8)afterPageText: 入力コンポーネントの後にラベルテキストを表示します。
9)displayMsg: ページ情報を表示します。
メソッドは次のとおりです。
1) onSelectPage: ユーザーが新しいページを選択したときにアクティブになります。コールバック関数には 2 つのパラメーターが含まれます:
pageNumber: 新しいページのページ番号。
pageSize: 新しいページのサイズ。