skillup

技術ブログ

Database JavaScript PHP UI

jQuery modalダイアログについて&重複時間処理

投稿日:

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”としておきましょうか。

Javascript側

上記のように記述するだけでdialogで指定した部分のhtmlは表示されなくなり、トリガーでモーダルウィンドウを起動した時のみ開くようになります。

参考リンク

http://stacktrace.jp/jquery/ui/widgets/dialog.html

http://www.buildinsider.net/web/jqueryuiref/0011

http://webmage.pro/blog/archives/384

重複時間について

病院の予約システムなんかである時間帯とある時間帯がダブってないかをチェックしたいときですが、こちら普通に考えるとロジックが少々複雑です。(場合分けが面倒くさい・・・)

が、下記リンクで非常にスマートな検索条件を扱っていたんでリスペクトの意味も込めてリンクを貼ります。

なんかこう言った場合分けとかって学生のときにやった数学を思い出すなー。

http://bashalog.c-brains.jp/11/12/19-230703.php

-Database, JavaScript, PHP, UI
-

執筆者:


comment

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

関連記事

no image

CakePHP2系でのテスト処理

cakePHP2系でのテストの処理について。 PHPでのテストといえばphpunitが有名かと思います。cakePHPでも標準でphpunitがはいっており、ユニットテストを行うことができます。 Co …

no image

phpenv5.3+php-fpm

レガシーなプロジェクトではいまだにPHP5.3なんかを使うケースがあったりします。 これがCentOS6だったらyumでphp5.3とかだったらいいんですが、サーバーはCentOS7だったりするとなか …

no image

checkboxでの値の管理

formにてcheckboxの値を一つのカラムにいれて管理する機会があったのですが、これ入力更新出会っても検索であっても処理がなかなか厄介です。特に検索の時ですね・・・ 要するに値の候補が1,2,3, …

no image

sql_modeに関して

開発では動いていたのに本番ではint型のカラムで空白が入らない!みたいなエラーが出て、データベースにデータが入らないことが発覚し、調査をすることに・・・ sql_modeが原因でした・・・ sql_m …

no image

アプリケーションアーキテクチャについて 〜ドメインモデルに関して〜

前回のトランザクションスクリプトパターンの反省から 今回はいわゆるドメインモデルの具体例に関して。 ドメイン駆動型設計には以下のような特徴があります。 大きく、アプリケーションの構成を以下のように分け …