skillup

技術ブログ

Database JavaScript PHP UI

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

投稿日:2015年12月1日 更新日:

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は表示されなくなり、トリガーでモーダルウィンドウを起動した時のみ開くようになります。

参考リンク

Dialog

Dialogウィジェットでダイアログ・ボックスを生成するには?

重複時間について

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

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

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

[CakePHP]時間の重複がないかMySQLデータベースに問い合わせる

-Database, JavaScript, PHP, UI
-

執筆者:


comment

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

関連記事

no image

リレーションを含んだテーブルでの副問い合わせ

本日はSQLネタです。 下記のようなテーブル構成があったときとします。 注文ヘッダと注文詳細は(1:N)とします。 ここで、product_id=5を含んだ注文ヘッダーレコードを取り出したいとします。 …

no image

データベース設計のアンチパターン リトライ+バッチ分割+バッチの再利用不可

Contents1 リトライ1.1 デメリット1.2 対策2 バッチ分割2.1 デメリット2.2 対策3 バッチ再利用不可3.1 デメリット3.2 対策 リトライ ※OLTP=オンライントランザクショ …

no image

PHPのオートローディング

大規模開発では扱うファイルが増えるため、必要なクラスの読み込みが煩雑になるケースが多いです。 Contents1 従来のPHPのファイルのロード2 オートローディングとは3 サンプルソース4 メモ5 …

no image

データベースのインデックスについて

今回はデータベースのインデックスに関して。 検索条件を早くする場合、何よりも速度が速くなるのはインデックスを張ることでしょう。 インデックスを張ることは単語を索引順に並べることですので、劇的に速度が向 …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …