Category: jQuery

DatePickerでのstart〜endの制御

開始日を入力したら終了日は開始日以降にする
終了日を入力したら開始日は終了日以前しか入力できないようにする

<input type="text" name="start"> ~ <input type="text" name="end">
	<script>
			var format = 'yy/mm/dd';

			var start = $("[name=start]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				end.datepicker("option", "minDate", getDate(this));
			});

			var end = $("[name=end]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				start.datepicker("option", "maxDate", getDate(this));
			});

			function getDate(element){
				var date;
				try {
					date = $.datepicker.parseDate(format, element.value);
				} catch(error){
					date = null;
				}
				return date;
			}
	</script>

コントローラ(サーバ側)で制御するよりも、フロントで制御した方がユーザフレンドリーです。

TinyMCE5.xでtoolbarをbottomに変更する方法

<script>
        tinymce.init({
            //省略
            toolbar_location : "bottom",
        });
</script>

これこれ。結構探した。

https://github.com/tinymce/tinymce/issues/4618#issuecomment-586529196

TinyMCE 5.2.0 was released to the community earlier this week, which added a new toolbar_location setting that can be used to set where the toolbar should be rendered. The valid values are 'top' (default) or 'bottom'. Here's a fiddle to show how to use the new setting/feature: http://fiddle.tinymce.com/8bhaab/1.

There is one issue we're aware of with the new feature when opening an inline dialog (eg search and replace) when sticky toolbars is also enabled. We'll include a fix for that in a future release. Please let us know if you have any further issues.

TinyMCE5.2.1を使おう

1. self-hostedよりjsファイル群をdownloadする
https://www.tiny.cloud/get-tiny/self-hosted/
2. 日本語をダウンロード
https://www.tiny.cloud/get-tiny/language-packages/
-> ja.jsをtinymce/langs配下に配置する
3. Tool Control
https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols

– デフォルトでpタグが入るので、forced_root_blockをnullにする
– 必要最低限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TinyMCE</title>
    <script src="js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "#tiny",
            language: "ja",
            menubar: false,
            plugins: "emoticons",
            toolbar: "bold italic underline strikethrough emoticons",
            forced_root_block : '',
            statusbar: false,
        });
    </script>
</head>
<body>
    <h1>TinyMCEテスト</h1>
    <form method="post" action="confirm.php">
    <textarea id="tiny" name="input"></textarea>
    <input type="submit" value="送信">
    </form>
</body>
</html>

emoticonsが前より大量に増えていて感動した。

stopPropagation();

$(document).on('dragover dragenter dragend drag drop', function(e){
	e.stopPropagation();
	e.preventDefault();
});

> stopPropagation
> 親要素への伝播をキャンセルする。
ん？

Drag&Dropを使ってみよう

<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
	.dd {
		line-height:300px;
		text-align:center;
		font-size:12px;
		color:#ccc;
		width:300px;
		height:300px;
		border:1px dotted #ccc;
	}
</style>
</head>
<body>
	<div class="dd">ファイルをドラッグ&ドロップしてください</div>
	<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  	<script>
  		$(".dd").on("drop", function(e){
  			e.preventDefault();
  			console.log(e.originalEvent.dataTransfer.files);
  		});
  		$(".dd").on("dragover",function(e){
  			e.preventDefault();
  		});
  	</script>
</body>

うん。

＞ベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。

え？何を言ってるのかさっぱりわからない。
デフォルトの操作をさせないって意味？

drag系のイベントに以下があるが、dragとdrop, dragenterは解るが、、、
dragover dragenter dragend drag drop

あ、mozillaに書いてありますね。
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API
> dragenter
ドラッグ中に、マウスポインタが要素の上に乗った最初の時点で発行されます。
> dragover
このイベントは、ドラッグ中にマウスポインタが要素の上で動いた時に発行されます。
> drag
このイベントは、ドラッグ操作が行われている間、ドラッグ元の要素（※ dragstart イベントが発行された要素）において定期的に発行されます。
> drop
drop イベントは、ドラッグ操作の最後に、ドロップされた位置の要素において発行されます。
> dragend
ドラッグ元の要素は、ドロップに成功したかどうかに関わらず、ドラッグ操作が完了した時に dragend イベントを受け取ります。

なんだこれ、”drag”って、定期的に発行されるって、意味不明だな。

Datepickerの範囲指定

まず、普通のdatepicker

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<input type="text" name="date" value="">
<script>
$("[name=date]").datepicker({
    // YYYY-MM-DD形式で入力されるように設定
    dateFormat: 'yy-mm-dd'
});
</script>

特に問題ありません。

で、これを今日からにするには、minDateを0dに指定します。

<script>
$("[name=date]").datepicker({
    // YYYY-MM-DD形式で入力されるように設定
    dateFormat: 'yy-mm-dd',
    minDate: '0d'
});
</script>

年末を指定するにはどうするかだな。
+1y -1dだと駄目みたい。
ちょっとあかんあー

let disable new line by jQuery

prevent a line break

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- 
<textarea name="sample" cols="50" rows="10" wrap="soft"></textarea> -->
<form>
<textarea name="sample" cols="50" rows="10" class="cancel"></textarea>
<input type="submit">
</form>

<script>
$('.cancel').bind('keydown', function(e){
	if(e.which == 13){
		return false;
	}
}).bind('blur', function(){
	var $textarea = $(this),
	text = $textarea.val(),
	new_text = text.replace(/\n/g, "");
	if(new_text!= text){
		$textarea.val(new_text);
	}
});
</script>

I can no longer break line when I press enter key within the textarea.

jQueryを使ったアコーディオン

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>
#acMenu dt {
	display:block;
	width:250px;
	height:50px;
	line-height: 50px;
	text-align:center;
	border:#666  1px solid;
	cursor:pointer;
}
#acMenu dd{
	background:#f2f2f2;
	width:250px;
	height:50px;
	line-height:50px;
	margin-left:0px;
	text-align:center;
	border:#666 1px solid;
	display:none;
}
</style>
</head>
<body>
<h1>よくある質問</h1>
 <dl id="acMenu">
 	<dt>Q1. アコーディオンメニュー</dt>
 	<dd>A1. アコーディオンメニュー</dd>
 	<dt>Q2. アコーディオンメニュー</dt>
 	<dd>A2. アコーディオンメニュー</dd>
 	<dt>Q3. アコーディオンメニュー</dt>
 	<dd>A3. アコーディオンメニュー</dd>
</dl>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
	$(function(){
		$("#acMenu dt").on("click", function(){
			$(this).next().slideToggle();
		});
	});
</script>    
</body>
</html>

OK!
これをフロントに当てはめていきます。

さて～～～～～～～～～～～、front側の画面は全部できたので、いよいよlaravel構築をしていきます。
長かった、2週間位？

次は、laravelなんだが、まずはDBのtableを作って、中にデータを入れて、表示するところからかな。
あ、思い出した、40X系のページ、50X系のページ、メンテナンス中画面のページを作成しないと駄目ですね。

複数チェックボックスを操作

<input type="checkbox" name="category_01" id="category_01" value="01" class="hokkaido">
      <label for="category_all"><b>北海道</b></label><br><br>

    <input type="checkbox" id="area_tohoku" name="category_all">
    <label for="category_all"><b>東北</b></label>
    <div id="pref_tohoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="tohoku">
      <label for="category_01">青森</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="tohoku">
      <label for="category_02">岩手</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="tohoku">
      <label for="category_03">宮城</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="tohoku">
      <label for="category_04">山形</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="tohoku">
      <label for="category_05">福島</label>
    </div>
    <br>
    <input type="checkbox" id="area_kanto" name="category_all">
    <label for="category_all"><b>関東</b></label>
    <div id="pref_kanto">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kanto">
      <label for="category_01">茨城</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kanto">
      <label for="category_02">栃木</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kanto">
      <label for="category_03">群馬</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kanto">
      <label for="category_04">埼玉</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_05">千葉</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_06">東京</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kanto">
      <label for="category_07">神奈川</label>
    </div>
    <br>

    <input type="checkbox" id="area_chubu" name="category_all">
    <label for="category_all"><b>中部</b></label>
    <div id="pref_chubu">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="chubu">
      <label for="category_01">新潟</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="chubu">
      <label for="category_02">富山</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="chubu">
      <label for="category_03">石川</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="chubu">
      <label for="category_04">福井</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">山梨</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">長野</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">岐阜</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">静岡</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chubu">
      <label for="category_05">愛知</label>
    </div>
    <br>

    <input type="checkbox" id="area_kinki" name="category_all">
    <label for="category_all"><b>近畿</b></label>
    <div id="pref_kinki">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kinki">
      <label for="category_01">三重</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kinki">
      <label for="category_02">滋賀</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kinki">
      <label for="category_03">京都</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kinki">
      <label for="category_04">大阪</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">兵庫</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">奈良</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kinki">
      <label for="category_05">和歌山</label>
    </div>
    <br>

    <input type="checkbox" id="area_chugoku" name="category_all">
    <label for="category_all"><b>中国</b></label>
    <div id="pref_chugoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="chugoku">
      <label for="category_01">鳥取</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="chugoku">
      <label for="category_02">島根</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="chugoku">
      <label for="category_03">岡山</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="chugoku">
      <label for="category_04">広島</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="chugoku">
      <label for="category_05">山口</label>
    </div>
    <br>

    <input type="checkbox" id="area_shikoku" name="category_all">
    <label for="category_all"><b>四国</b></label>
    <div id="pref_shikoku">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="shikoku">
      <label for="category_01">徳島</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="shikoku">
      <label for="category_02">香川</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="shikoku">
      <label for="category_03">愛媛</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="shikoku">
      <label for="category_04">高知</label>
    </div>
    <br>

    <input type="checkbox" id="area_kyushu" name="category_all">
    <label for="category_all"><b>九州・沖縄地方</b></label>
    <div id="pref_kyushu">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="kyushu">
      <label for="category_01">福岡</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="kyushu">
      <label for="category_02">佐賀</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="kyushu">
      <label for="category_03">長崎</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="kyushu">
      <label for="category_04">熊本</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">大分</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">宮崎</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">鹿児島</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="kyushu">
      <label for="category_05">沖縄</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#area_tohoku').on('click', function(){
    $('.tohoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_tohoku :checked').length == $('#pref_tohoku: input').length){
      $('#area_tohoku').prop('checked', 'checked');
    } else {
        $('#area_tohoku').prop('checked', false);
    }
  });
  $('#area_kanto').on('click', function(){
    $('.kanto').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kanto :checked').length == $('#pref_kanto: input').length){
      $('#area_kanto').prop('checked', 'checked');
    } else {
        $('#area_kanto').prop('checked', false);
    }
  });
  $('#area_chubu').on('click', function(){
    $('.chubu').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_chubu :checked').length == $('#pref_chubu: input').length){
      $('#area_chubu').prop('checked', 'checked');
    } else {
        $('#area_chubu').prop('checked', false);
    }
  });
  $('#area_kinki').on('click', function(){
    $('.kinki').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kinki :checked').length == $('#pref_kinki: input').length){
      $('#area_kinki').prop('checked', 'checked');
    } else {
        $('#area_kinki').prop('checked', false);
    }
  });
  $('#area_chugoku').on('click', function(){
    $('.chugoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_chugoku :checked').length == $('#pref_chugoku: input').length){
      $('#area_chugoku').prop('checked', 'checked');
    } else {
        $('#area_chugoku').prop('checked', false);
    }
  });
  $('#area_shikoku').on('click', function(){
    $('.shikoku').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_shikoku :checked').length == $('#pref_shikoku: input').length){
      $('#area_shikoku').prop('checked', 'checked');
    } else {
        $('#area_shikoku').prop('checked', false);
    }
  });
  $('#area_kyushu').on('click', function(){
    $('.kyushu').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#pref_kyushu :checked').length == $('#pref_kyushu: input').length){
      $('#area_kyushu').prop('checked', 'checked');
    } else {
        $('#area_kyushu').prop('checked', false);
    }
  });
});
</script>

関東にチェックを入れると、関東の都道府県すべてにチェックが入ります。

jsは長いので、保守性を考慮して、別ファイルにしましょう。

これを実装

いい感じ♪

checkbox全てにチェックを入れる

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>

</style>

</head>
<body>
    <input type="checkbox" id="category_all" name="category_all">
    <label for="category_all">全て</label>
    <div id="categories">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="category">
      <label for="category_01">とんこつ</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="category">
      <label for="category_02">味噌</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="category">
      <label for="category_03">醤油</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="category">
      <label for="category_04">塩</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="category">
      <label for="category_05">その他</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#category_all').on('click', function(){
    $('.category').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#categories :checked').length == $('#categories: input').length){
      $('#cateogry_all').prop('checked', 'checked');
    } else {
        $('#category_all').prop('checked', false);
    }
  });
});
</script>
</body>
</html>

vue.jsではなく、jqueryでいけましたね。これを都道府県でやりたい。