Jquery_jqueryのdialog属性に関する注意事項

コードをコピー コードは次のとおりです:

$('#dialogDiv').dialog(
{
hide:true, //クリックして非表示にします。これを追加しないと、ポップアップウィンドウを閉じた後に再度クリックするとエラーが発生します。
autoOpen:false,
height:380,
width:800,
modal:true, //マスクレイヤー (ポップアップはページサイズに影響します)
title:'Bid Opener',
overlay: {opacity : 0.5, 背景: "黒" ,overflow:'auto'} ,
buttons:{
'OK':function(){
// 処理メソッド addUser();
'Cancel':function(){
// 現在のダイアログを閉じる
$(this).dialog("close");
}
}
}
) ;
$('#addItems').click(function( ){
loadPage('buildOpenGroupAddOpering.htm','#dialogDiv'); //ダイアログ メモリ ページ
//$(window.parent .document).find("#projectSpaceContent .show").height( 600)//現在の Iframe の高さを調整します
$('#dialogDiv').data('title.dialog', '入札者を追加')。 Dialog('open'); //タイトルを変更します
return false;
})

function loadPage(path,id) {
$.get(path, function(data) {
// data = data.replace(//ig,""); //スクリプトタグを削除
data = data.replace(/<) ;/?link.*>/ig,""); //リンクタグを削除
data = data.replace(/?html.*>/ig,""); tag
data = data.replace(/< /?body.*>/ig,""); //ボディタグを削除
data = data.replace(/data = data.replace(//ig,""); //doctype タグを削除
data = data.replace(/.*/ig,""); //タイトルタグを削除
$(id).empty().html(data);// contentMain コンテンツをクリアして HTML を読み込みます
});
}
//ポップアップ レイヤーに閉じるボタンを追加します
$('.ui-dialog-buttonpane').show().empty( );
$('').click(function(){
$("#dialogDiv").dialog('close');
return false;
}).appendTo('.ui-dialog-buttonpane');

まず例を見てみましょう。さらに、ダイアログのサイズをドラッグして変更したい場合は、ui.draggble.js と ui.resizable.js を追加する必要があります

コードをコピー コードは次のとおりです。

text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />




<script> <br>$("#dialog").dialog({autoOpen:false,buttons:{"OK":function(){$(this ).dialog("閉じる") ;}},closeOnEscape:true,hide:"slide",modal:true,title:"ダイアログ"}).dialog("open"); <br></script> 🎜>
< div id="dialog" title="ダイアログ タイトル">あなたは豚です!

1 属性
1.11 autoOpen、この属性が true の場合、ダイアログが呼び出されたときにダイアログ ウィンドウが自動的に開きます。属性が false の場合、ウィンドウは最初は非表示になり、.dialog("open") に達するまでダイアログ ウィンドウは表示されません。デフォルト: true。
1.12 初期化例: $('.selector') はダイアログのクラス名です。この例では、.selector=#dialoag については説明しません。
$('.selector').dialog({ autoOpen: false });
1.13 初期化後、次のプロパティを取得して設定します。例:
//Get
var autoOpen = $('. selector').dialog('option', 'autoOpen');
//Setup
$('.selector').dialog('option', 'autoOpen', false); >1.21 bgiframe のデフォルトは false です。 true の場合、zIndex Requires に関係なく、IE6 で選択ボックスが他の要素の上に表示される問題を修正するために、bgiframe プラグインが使用されます。
IE6 では、背面の灰色の画面が選択範囲を覆います。
1.22 初期化の例:
$('.selector').dialog({ bgiframe: true });
1.23 初期化後、取得および設定:
//Get
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//設定
$('.selector').dialog('option', 'bgiframe', true); 🎜>
1.31 ボタン ボタンの表示、ボタンのテキストの記述、ボタンのクリック機能の設定を行います。デフォルトは {} で、ボタンはありません。
ボタン属性は上の例ですでに使用されています。注意してください。
1.32 初期化例:
$('.selector').dialog({ button: { "Ok": function() { $(this).dialog("close"); } } ); 🎜>1.33 初期化後、取得と設定:
//Get
var button = $('.selector').dialog('option', 'buttons');
//Set
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape が true の場合、キーボードの ESC キーをクリックしてダイアログを閉じます。
1.42 初期化の例:
$('.selector').dialog({ closeOnEscape: false }); 🎜>1.43 初期化後、取得と設定:
//Get
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//Set
$('.selector ').dialog('option', 'closeOnEscape', false);

1.51 DialogClass タイプがダイアログに追加されます、デフォルトは空です
1.52 初期化例:
$ ('.selector' ).dialog({ DialogClass: 'alert' });
1.53 初期化後、取得および設定:
//Get
var DialogClass = $('.selector').dialog ('option', 'dialogClass');
//Set
$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 、サイズ変更可能: ドラッグ可能かどうか タイトル ヘッダーをドラッグに使用できます。デフォルトは true で、ドラッグできます。サイズ変更可能がダイアログのサイズを変更できるかどうか、デフォルトは true で、サイズを変更できます。
1.62 初期化の例:
$('.selector').dialog({raggable: false,resizable:false });
1.63 初期化後、取得および設定:
//Get
varraggable = $('.selector').dialog('option', 'draggable');
//Setup
$('.selector').dialog('option', 'draggable', false);

1.71 幅、高さ、ダイアログの幅と高さ、デフォルトは自動です。
1.72 初期化例:
$('.selector').dialog({ height: 530,width:200 });
1.73 初期化後の取得と設定: 1.63 を参照してください

1.81 maxWidth、maxHeight、minWidth、minHeight、ダイアログで変更できる最大幅、最大高さ、最小幅、最小高さ。 maxWidth と maxHeight のデフォルト値は false で、無制限です。 minWidth と minHeight のデフォルト値は 150 です。これらのプロパティを使用するには、ui.resizable.js のサポートが必要です。
1.82 初期化の例:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初期化後、以下を取得および設定します。 1.63

1.91 非表示、表示、ダイアログを閉じたときと開いたときの効果を参照してください。デフォルトは null であり、効果はありません。
1.92 初期化例: 上記の例で使用されています。ご自身で確認してください。
1.93 初期化後、取得と設定: 1.63

1.101 モーダル、モーダル ウィンドウを使用するかどうかを参照してください。モーダル ウィンドウが開かれると、モーダル ウィンドウが開くまでページの他の要素をクリックできなくなります。は閉まっています。ウィンドウをモーダルにしない場合、デフォルトは false です。
1.102 初期化例: $('.selector').dialog({ modal: true });
1.103 初期化後の取得と設定: 1.63

1.111 title、タイトルを参照してください。ダイアログのテキスト。デフォルトでは空です。
1.112 初期化の例: 上部の例を参照してください。 1.113 初期化後、取得と設定: 1.63

1.121 を参照してください。位置、ダイアログの表示位置: 'center'、'left'、'right'、'top'、'bottom'、のいずれかです。または、上と左のオフセットは、['right', 'top'] などの文字列配列にすることもできます。
1.122 初期化例: $('.selector').dialog({position: ['top','right'] }); 1.123 初期化後の取得と設定: 1.63 を参照してください。 1.131 zIndex、ダイアログの zindex 値、デフォルト値は 1000 です。
1.132 初期化例: $('.selector').dialog({ zIndex: 3999 }); 1.133 初期化後の取得と設定: を参照してください。 1.63

1.141 stack のデフォルト値は true で、ダイアログがフォーカスを取得すると、ダイアログが一番上に表示されます。
1.142 初期化例: $('.selector').dialog({ stack: false }); 1.143 初期化後の取得と設定: 1.63

2 イベント
2.11 beforeclose type を参照してください。 Dialogbeforeclose の場合、ダイアログが閉じようとしたときにこのイベントがトリガーされます。 false が返された場合、閉じることはブロックされます。
2.12 初期化の例: $('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 type を使用してこのイベントをバインドする例: $('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

2.21 close type:dialogclose、ダイアログの終了時このイベントは、終了後にトリガーされます。
2.22 初期化の例: $('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 type を使用してこのイベントをバインドします例: $('.selector').bind('dialogclose', function(event, ui) {
...
});

2.3 タイプを開く:dialogopen、ダイアログの場合が開かれるとトリガーされます。 (スペースに限りがあるため、省略すべきものは省略します。初期化の例とタイプ バインディング イベントの使用方法を参照してください。)
2.4 フォーカス タイプ:dialogfocus、ダイアログがフォーカスを取得したときにトリガーされます。
2.5ragStart タイプ:ragStart、ダイアログのドラッグが開始されるときにトリガーされます。
2.6 ドラッグ タイプ: ドラッグ。ダイアログがドラッグされるとトリガーされます。
2.7 ドラッグストップ タイプ: ドラッグストップ、ダイアログのドラッグが完了するとトリガーされます。
2.8 SimplyStart タイプ: ResizeStart。ダイアログがフォームのサイズの変更を開始するとトリガーされます。
2.9 サイズ変更タイプ: サイズ変更、ダイアログのサイズが変更されるときにトリガーされます。
2.10 SimplyStop タイプ: サイズが変更されたときにトリガーされる、resizeStop。

3 つの方法
3.1 破壊する、これが好き、地球を破壊する。 。 。 例: .dialog( 'destroy' )
3.2 無効、ダイアログは使用不可、例: .dialog('disable');
3.3 有効、ダイアログは使用可能、例: 3.2
3.4 close、 open、Close してダイアログを開きます。
3.5 オプション。ダイアログのプロパティを設定および取得します。例: .dialog('option', optionName, [value])。値がない場合は取得されます。
3.6 isOpen、ダイアログが開いている場合に true を返します。例: .dialog('isOpen')
3.7 moveToTop、ダイアログを上部に移動します。例: .dialog( 'moveToTop' )