jQuery UI を利用して、メッセージ等を表示するダイアログの位置を指定することができます。
今回は、jQuery UI で ダイアログの位置を指定するサンプルについて解説いたします。
ダイアログの作成方法については jQuery【 jQuery UI 】dialog で様々なダイアログを作成するサンプル もご参照下さい。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
ダイアログの位置を指定する場合は、dialog の position オプションを使用します。
position オプションは、次のような 3 つの引数( my、at、of )を持つ Object 型 で指定します。
my |
---|
要素自身の基準点を要素内のどの位置にするのかを、” 水平位置 垂直位置 ” の順で指定
水平位置の指定値 垂直位置の指定値 “left top”のように指定 “right+10 top-25%”のような相対的な位置指定も可能( 単位は px か % ) 初期値:”center” |
at |
「 of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置 垂直位置 ” の順で指定
指定値については「 my 」と同じ 初期値:”center” |
of |
“#top-info”のように 配置対照となる HTML 要素を指定
selector、element、jQuery、event で指定 初期値:null |
ダイアログの位置を指定する position オプションは、次のように記述します。
$("#wk_dialog").dialog({
position: {my: "left top", at: "left bottom", of: "#wk_div"}
});
jQuery UI を使用して、ダイアログの位置を指定します。
各ボタンをクリックして、デフォルトの表示位置と比較してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
<!--
$(function() {
$("#d_btn").click(function() {
$("#d_dl").dialog({
modal:true,
title:"default"
});
});
$("#lt_btn").click(function() {
$("#lt_dl").dialog({
modal:true,
title:"left top",
position: {my: "left top", at: "left top", of: window}
});
});
$("#rb_btn").click(function() {
$("#rb_dl").dialog({
modal:true,
title:"right bottom",
position: {my: "right bottom", at: "right bottom", of: window}
});
});
});
//-->
</script>
<div id="d_dl">
<p>デフォルト位置のダイアログです!</p>
</div>
<div id="lt_dl">
<p>左上指定のダイアログです!</p>
</div>
<div id="rb_dl">
<p>右下指定のダイアログです!</p>
</div>
<div style="background-color:#CCC; padding : 20px;">
<input type="button" id="d_btn" value="デフォルト">
<input type="button" id="lt_btn" value="左上指定">
<input type="button" id="rb_btn" value="右下指定">
</div>
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
dialog には、position の他にも 次のようなオプションがあります。
autoOpen |
---|
ロード時に自動的にダイアログを表示するかどうかを指定 (falseを指定すると open()メソッド呼び出し時にダイアログを表示) 初期値:true |
appendTo |
ダイアログを挿入する要素を指定
初期値:”body” |
buttons |
ダイアログに表示されるボタンを指定 複数のボタンを指定可能 ボタンが押下時の処理をコールバック関数として設定可能 初期値:{ } |
closeOnEscape |
ダイアログフォーカス時にEscキーの押下でダイアログを閉じるか否かを指定
初期値:true |
closeText |
閉じるボタンに表示されるテキストを指定 (デフォルトのテーマでは、閉じるボタン非表示) 初期値:”close” |
dialogClass |
ダイアログに指定した任意の class 名を追加 初期値:”” |
disabled |
ダイアログを無効にするかどうかを指定
初期値:false |
draggable |
タイトルバーをドラッグしてダイアログを移動可能とするかどうかを指定 (実際に移動可能にするためには Draggableウィジットを読み込む) 初期値:true |
height |
ダイアログの高さを数値(単位は px )又は”auto”で指定
初期値:”auto” |
hide |
hideアニメーションの指定 Number:指定した時間(ミリ秒)でフェードアウトアニメーションを行う String:hideアニメーションをjQuery UIのエフェクト名で指定 Object:effect, duration, easingのプロパティで指定(effectはhideアニメーションをjQuery UIのエフェクト名の文字列で指定し、durationとeasingは省略可) 初期値:null |
maxHeight |
ダイアログをリサイズ出来る高さの最大値(px)を指定
初期値:false |
maxWidth |
ダイアログをリサイズ出来る幅の最大値(px)を指定
初期値:false |
minHeight |
ダイアログをリサイズ出来る高さの最小値(px)を指定
初期値:150 |
minWidth |
ダイアログをリサイズ出来る幅の最小値(px)を指定
初期値:150 |
modal |
他の要素が無効化される モーダルダイアログとするかどうかを指定 初期値:false |
position |
1. ダイアログの位置指定方法を参照
初期値:{my: “center”, at: “center”, of: window} |
resizable |
ダイアログのリサイズを可能とするかどうかを指定 (実際のリサイズ処理は、jQuery UI Resizable ウィジット が読み込む) 初期値:true |
show |
showアニメーションの指定 Number:指定した時間(ミリ秒)でフェードインアニメーションを行う String:showアニメーションをjQuery UIのエフェクト名で指定 Object:effect, duration, easingのプロパティで指定(effectはshowアニメーションをjQuery UIのエフェクト名の文字列で指定し、durationとeasingは省略可) 初期値:null |
title |
ダイアログのタイトルを指定
初期値:null |
width |
ダイアログの横幅を指定(単位は px )
初期値:300 |
jQuery UI で ダイアログの位置を指定する方法について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.