Contents
jqueryモーダルダイアログ
今のWEBアプリだとほぼ必須となっているモーダルウィンドウ。
※モーダルウィンドウとは画面中央に小さい画面みたいなものが出現して、操作がおわるまで受け付けない処理のことです。
下の画面を見てもらうのが一番わかりやすいかも・・・
http://drublic.github.io/css-modal/#modal-text
今だいたいどのアプリもダイアログやフォームはこれを使っているものが多いですね。
んで、これjQueryで簡単に実装できるのでそのメモなんかを。
あらかじめ読み込むライブラリ
下記が必要になってくるソースです。
- jquery-ui.min.css
- jquery本体
- jquery-ui.min.js
ソース本体
Html側
非常に簡単で普通のhtmlを書いてあげればOKです。
ここではid=”sample_hoge_id”としておきましょうか。
|
1 2 3 |
<div id="sample_hoge_id"> ここにダイアログ上に表示させたいhtmlを書く </div> |
Javascript側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//何らかのトリガーとなるイベント(例えばtrigger_button_idというidがふられたボタンを押す)が発生したときに //下記の命令を書いてあげればOKです。このときダイアログが開きます。 $("#trigger_button_id").click(function(){ $("#sample_hoge_id").dialog('open'); }); //モーダルウィンドウ $('#sample_hoge_id').dialog({ autoOpen: false,//これをいれておくとhtmlは通常時はみえません。 title: 'サンプルモーダルウィンドウ',//モーダルウィンドウのタイトル modal: true, buttons: {//超大切です。ボタンに表示する文字列とその後のイベントです。 "予約する": function(){ //何らかの処理 } } }); |
上記のように記述するだけでdialogで指定した部分のhtmlは表示されなくなり、トリガーでモーダルウィンドウを起動した時のみ開くようになります。
参考リンク
Dialogウィジェットでダイアログ・ボックスを生成するには？
重複時間について
病院の予約システムなんかである時間帯とある時間帯がダブってないかをチェックしたいときですが、こちら普通に考えるとロジックが少々複雑です。(場合分けが面倒くさい・・・)
が、下記リンクで非常にスマートな検索条件を扱っていたんでリスペクトの意味も込めてリンクを貼ります。
なんかこう言った場合分けとかって学生のときにやった数学を思い出すなー。
