$(document).on('dragover dragenter dragend drag drop', function(e){ e.stopPropagation(); e.preventDefault(); });
> stopPropagation
> 親要素への伝播をキャンセルする。
ん?
ソフトウェアエンジニアの技術ブログ:Software engineer tech blog
ABC: Always Be Coding
$(document).on('dragover dragenter dragend drag drop', function(e){ e.stopPropagation(); e.preventDefault(); });
> stopPropagation
> 親要素への伝播をキャンセルする。
ん?
<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
<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だと駄目みたい。
ちょっとあかんあー
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.
<!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は長いので、保守性を考慮して、別ファイルにしましょう。
これを実装
いい感じ♪
<!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でいけましたね。これを都道府県でやりたい。
tinymce.initを編集
force_br_newlines : true, force_p_newlines : false,forced_root_block : ”, とします。
tinymce.init({ mode : "specific_textareas", editor_selector : "mceEditor", language: 'ja', force_br_newlines : true, force_p_newlines : false, forced_root_block : '', branding: false, init_instance_callback: function (editor) { editor.on('change', function (e) { $('#preview_area').html(editor.getContent()); }); } });
おお、おもったよりいいっすね。
ではコードをはめ込んでいきます。
プレビューがイマイチだなー。。
border-radiusでごまかしますw
うん、こんな感じかな。
smtp周りだな。
CSSでステップバーを作りたい。あああああああああああああああああ、先がなげーーーーーー
以下のURLからJapaneseを選択
https://www.tiny.cloud/get-tiny/language-packages/
downloadすると、ja.jsが出てくる。
js/tinymce/langs 配下に配置する。
tinymce.initにlanguage: ‘ja’を追加
<script src="asset/js/tinymce/tinymce.min.js"></script> <script> tinymce.init({ selector: 'textarea', language: 'ja' }); </script>
おお、これはすげーな。
formではidを変えます。
javascript側
<script> $('#datepicker, #update').datepicker({ dateFormat: 'yy/mm/dd', }); </script>
idが同じだと動かないのでご注意を!