最近jQueryが楽しくて結構凝っている。
反面、色々な機能を組み合わせるとすぐ予想外の動きをする。
(もっとガリガリJavaScript書ければ回避もできるんだろうけども

今回は、jQuery UIのdialogで何点かつまづいたトコロを書いてみる。

@dialogのshowオプションに注意!
dialogにはshowオプションがある。

これを’slide’とかに設定すると、エフェクトがカッチョイイ。
ただし、エフェクトのぶん実行が遅くなるので、問題が起こる場合がある。

例えば

$('#dialog').dialog({
    modal:true,
    width:'800',
    height:'auto',
    title:'たいとる',
    show:'slide'
}).load('http://なんちゃら');

てな感じにdialogを開いて内容をloadする場合。
で、loadで開く先のURLにWYSIWIGのcleditorを仕込んでいたとする。

具体的には、開く先のHTMLに

$(function() {
    $("#hoge").cleditor({width:750, height:380})[0].disable(false).refresh();
});

を仕込んで、ロード完了時にcleditorをリフレッシュするようにしていたとする。

そして、前提条件として、cleditorリフレッシュ後にdialog()するとcleditorがバグる。

なので、ここではあえてloadを後ろに回しているのだが、showオプションでアニメーションを入れると
dialogオープンshowエフェクト開始⇒cleditorアクティベート⇒showエフェクト終了
てな感じになるらしく、結果cleditorがバグる。

cleditor以外のスクリプトであっても、処理が前後してバグる場合があるので
怪しければshowオプションを外してみると予期せぬ動作の原因に近付けるかもしれない。

@dialogのhideオプションに注意!
showオプションと似たような感じだが、modalオプションと同時に使うとバグる場合がある。
具体的には、

$('<div />').dialog({
    modal: true,
    hide: 'destroy',
    title: title
});

とか書いてしまうと、処理が遅くなる影響なのか、ESCキーとクリック連打でモーダルダイアログが2個以上開く場合がある。
(そんなのモーダルじゃない!

@IEでのタイトルバーバグ
IE(~8)でdialogのwidthを’auto’にすると、dialogタイトルバーの横幅が伸び切らず短くなってしまう。
対応しようとすると、

$(this).html(loading).dialog({
    modal: true,
    width: 'auto',
    position: [10, 10],
    title: title
}).load(url, function(response, status, xhr) {
    // IEのdialogタイトルバーを幅に合わせる
    if ($.browser.msie) {
        $(this).dialog('option', 'width', $(this).parent().width());
    }
});

こんな七面倒臭いことをしなければいけないので注意。

@dialogを毎回生成する場合の注意

dialog用の要素(<div id=”dialog”></div>とか)をどっかに仕込んでおいて、開くたびにその要素を書き換える形ならば問題ないが、
dialog開くときに毎回新しい

を作りたい!とかいう場合に問題が起こる。

こんな感じにモーダルダイアログを開いた場合

$('<div />').dialog({
    modal: true,
    title: title
}).load('http://どっか');

ダイアログを閉じた場合でもload先のHTMLが残り、
DOMのID重複だの何だので妙な動きをする場合がある。

dialog用

を毎回生成する場合、dialogのcloseオプションにDOM要素を消す命令を入れてあげると
マトモに動くようになる。

$('<div />').dialog({
    modal: true,
    title: title
    close: function(){
        $(this).dialog("destroy");
        $(this).remove(); // ←コレ
    }
}).load('http://どっか');

—–
多分JavaScriptの使い方自体が悪いんだろうけども、しばしば壁にぶち当たるらしい。。
基本ルールってどこで学ぶんだ??

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Name *
Email *
Website

*