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

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

アンチパターン 参照渡しと値渡し+キー情報の設定+同一値を複数テーブルに配置+正規化が不十分+集計表+不適切なステータス値

本日は自分がデータベースの設計をしていて気を付かないといけないなーと思った点などを。 注意点としては設計のミスは実装で取り返しにくいことが多いので極力気を付けましょう。あといろいろなテーブルのパターン …

no image

PostgreSQLについて

本日はポスグレ(PostgreSQL)について。 自分はほとんどMySQLだったので、主にMySQLとの比較について書いていきます。 Contents1 アーキテクチャの違い1.1 MySQL1.2 …

no image

EXISTSと集合

前回に引き続きEXISTSの問題です。 下記のようなテーブル(projects)があり、 project_id | step_nbr | status ———&#8 …

no image

DBの構造について メモリとHDD

データベースについてまたまた学習中。 覚えておきたいポイントなど。 データを収めておくべき媒体では「記憶コスト(単位金額当たりの容量)」と「アクセス速度」の2つが重要なパラメータ メモリとHDDでは前 …

アーカイブ