2024.03.07
イベントの感想募集でGoogleフォーム使ってみたら便利だった
2014.06.12
プログラミングJQuery UI ウィジェット継承方法
こんにちは、YJです。
JQuery UIで他のウィジェットから新しいウィジェットを作成する為に下記のコードを書きます。
|
1 2 3 4 5 6 7 8 9 |
$.widget('namespace.myWidget', $.ui.dialog, { options : {}, _create : function() { } _destroy : function() { } }); |
下記に ウィジェットの使い方です。
|
1 2 3 4 5 |
// ウィジェットを作成する。 $('#dlg').myWidget({autoOpen: false}); // ダイヤログを開く。 $('#dlg').myWidget('open'); |
でも下記のコマンドがNGになる。
|
1 |
$('#dlg').dialog('open'); |
なぜ？ウィジェットファクタリーでウィジェットを継承しませんが、ウィジェットベースをコピーします。
本当の継承する為に下記のコードを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.widget('namespace.myWidget', $.ui.dialog, { options : {}, _create : function() { this.element.data('ui-dialog', this); this._super(); }, _destroy : function() { this.element.removeData('ui-dialog'); this._super(); } }); |
大切事は「this.element.data(‘ui-dialog’, this);」です。
これから下記のコードが正しくなる。
|
1 2 |
$('#dlg').dialog('open'); $('#dlg').myWidget('close'); |
以上です。
【記事への感想募集中！】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！- こんな記事が読んでみたい、こんなことが知りたい、調べてほしい！という意見も募集中！
- いただいた感想は今後の記事に活かしたいと思います！
【テクノデジタルではエンジニア/デザイナーを積極採用中です！】
下記項目に1つでも当てはまる方は是非、詳細ページへ！- 自分でアプリを作ってみたい
- ITで世の中にワクワクを生み出したい
- 使いやすさ、デザインにこだわったWebサイトを開発したい
Qangaroo（カンガルー）
- 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
- テストの進捗が見える。開発がスマートに進む。
- クラウド型テスト管理ツール『Qangaroo（カンガルー）』
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
