
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.07.13
jQuery UI を利用して、メッセージ等を表示するダイアログの位置を指定することができます。
今回は、jQuery UI で ダイアログの位置を指定するサンプルを紹介します。
ダイアログの作成方法については jQuery【 jQuery UI 】dialog で様々なダイアログを作成するサンプル もご参照下さい。
1.ダイアログの位置指定方法
2.position を使用してダイアログの位置を指定
3.dialog のオプション
ダイアログの位置を指定する場合は、dialog の position オプションを使用します。
position オプションは、次のような 3 つの引数( my、at、of )を持つ Object 型 で指定します。
my 要素自身の基準点を要素内のどの位置にするのかを、” 水平位置 垂直位置 ” の順で指定 水平位置の指定値
left
center
right垂直位置の指定値
top
center
bottom“left top”のように指定
“right”指定は “right center”、”top”指定は”center top”として扱われる“right+10 top-25%”のような相対的な位置指定も可能( 単位は px か % )
初期値:”center”
at 「 of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置 垂直位置 ” の順で指定 指定値については「 my 」と同じ
初期値:”center”
of “#top-info”のように 配置対照となる HTML 要素を指定 selector、element、jQuery、event で指定
(event で指定した場合は、pageX、pageYプロパティを使用)初期値: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 他の要素が無効化される モーダルダイアログとするかどうかを指定
初期値:falseposition 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
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.