2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2014.06.12
プログラミングJQuery UI ウィジェット継承方法
こんにちは、YJです。
JQuery UIで他のウィジェットから新しいウィジェットを作成する為に下記のコードを書きます。
$.widget('namespace.myWidget', $.ui.dialog, { options : {}, _create : function() { } _destroy : function() { } });
下記に ウィジェットの使い方です。
// ウィジェットを作成する。 $('#dlg').myWidget({autoOpen: false}); // ダイヤログを開く。 $('#dlg').myWidget('open');
でも下記のコマンドがNGになる。
$('#dlg').dialog('open');
なぜ?ウィジェットファクタリーでウィジェットを継承しませんが、ウィジェットベースをコピーします。
本当の継承する為に下記のコードを書きます。
$.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);」です。
これから下記のコードが正しくなる。
$('#dlg').dialog('open'); $('#dlg').myWidget('close');
以上です。
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索