Javascript (カレンダー005_機能検討jQuery)
■jQueryのモーダルウインドウをみてみる。
というものの、jQuery自体どんなものかよくわからないので、まずそこから。
jQueryはjavascriptのライブラリとのことなので、必要なパッケージなどをインポートして使うものだと思う。
jQueryは公式ページからダウンロードし(2020年7月でjquery-3.5.1.min.jsのバージョン)、作成しているjavascriptファイルと同じフォルダに置き、ファイル内の<head>部分に1文を追加した。
<script type="text/javascript" src="jquery-3.5.1.min.js">
Webから持ってきたjQueryのサンプルがこの1文を追加したら動作したので、これでjQueryのインポートができているよう。（追加する前は、$(function()の部分でエラーが出ていた）
サンプルは、下のsample2のテキスト部分をクリックすると、画面に青色がオーバーレイされ、別のテキスト(sample_display2)がポップアップして表示されるというもの。
jQueryのfunctionを使ってコードが組まれているものなので、これを参考にカレンダーへカスタマイズしてみよう。
カレンダー中の日付をクリックしたときに、上のサンプルのようにポップアップしてタイトル（あああああ）と内容（ｙｙｙｙｙ）が表示されるようにしてみた。修正中なのでまだボタン（下のsave）を残しているけど、これでボタンを削除してもよさそう。
追加しているjQuery部分が下のもの。
(1)の部分は、ポップアップで表示した後、青い部分のレイヤーをクリックしたときにポップアップを消すためのコード。(2)の部分は、カレンダーの日付部分をクリックすると、ポップアップでタイトル（title）と内容（body）を表示するコード。クリック後に、localStorageからタイトルと内容を変数に入れて、titleが入っているもののみポップアップ(glayLayer, overLayer)を出す。
$は関数を表すらしい。$("").show()のようにピリオドで文法をつなげたり、html(title...)のように引数としてデータを持たせたり、どこがどう影響しているのか複雑だけど、これで何とか動いた。
$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>")
//===(1) ポップアップの削除=====================================
$("#glayLayer").click(function(){
$(this).hide()
$("#overLayer").hide()
})
//===(2) 日付をクリックしたときのポップアップ表示================
$("td").click(function(){
var diary_date=document.getElementById("diary_date");
console.log(diary_date.innerHTML+"_title");
var title=localStorage[diary_date.innerHTML+"_title"];
var body=localStorage[diary_date.innerHTML+"_body"];
if(title){
$("#glayLayer").show()
$("#overLayer").show().html(title+"\n"+body).css({
marginTop:"-"+$("#overLayer").height()/2+"px" ,
marginLeft:"-"+$("#overLayer").width()/2+"px"
})
return false;
}
})
});ダブルクリックをした場合の関数も別途用意されているようなので、クリック時とダブルクリック時で挙動を変えるといったこともできそう。
