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

インデックスについて(SQLServer)

DBのインデックスについて、今までぼんやりと検索条件の効率化についてはしっていたのですが、もう少し掘り下げて理解する必要があるなと思い、メモります。 SQLServerのインデックスについてすごくまと …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

SQL基礎 条件式はunionよりもcaseで

複雑な条件式があったときにcase式を使うことでパフォーマンスを向上させることができます。 ※一般にunionを使うよりも高速なことが多い。 例1 ある条件により別の列を使いたいとき、 [crayon …

no image

SQL基礎 複雑なSQLの組み方

SQLの本を見ますとかなり複雑なSQLが書かれていることが多いです。 これは頑張っても無理では・・・と思っていましたが、ポイントしては 原則として必ず図に書く まずは問題を細かく分割する 細部から切り …

no image

CASE式のすすめ

SQL実践入門を7割がたぐらい終えたところで同著者の方の「達人に学ぶSQL徹底指南書」を学習しようと思っています。 この方の著書は気づいたら結構読んでましたね。 Contents1 CASE式での注意 …

アーカイブ