Category: jQuery

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でいけましたね。これを都道府県でやりたい。

tinymceのpタグ無効化

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でステップバーを作りたい。あああああああああああああああああ、先がなげーーーーーー

tinymceの日本語を使う

以下の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>

おお、これはすげーな。

datepickerのUI

デフォルトのデザイン

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>
<body>
<input type="text" id="datepicker">
<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
	$('#datepicker').datepicker();
</script>
</body>

date形式は yy/mm/ddがいいかな。

<script>
	$('#datepicker').datepicker({
    dateFormat: 'yy/mm/dd',
  });
</script>

remodalを実装

<div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
      </form>

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>登録しますか</h1>
        <p>
          入力した内容で宜しいでしょうか？
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
      <!-- /remodal -->

なるほどなるほど、フロント側の技術は大体OKかな。

remodalが上手く動かない。。。と思ったら

<head>
<link href="asset/css/remodal.css" rel="stylesheet">
<link href="asset/css/remodal-default-theme.css" rel="sytlesheet">
</head>
<body>
<div class="remodal-bg">
　 <a href="#modal">モーダル1</a>
</div>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="asset/js/remodal.js"></script>
<script>
	$('[data-remodal-id=modal]').remodal();
</script>
</body>

ん、上手くいってない！？　何故？

色々試した挙句
よくみたら、rel=”sytlesheet”ってなってる。
cssが効いてない。

<head>
	<link href="asset/css/remodal.css" rel="stylesheet">
	<link href="asset/css/remodal-default-theme.css" rel="stylesheet">
</head>

逆説的だが、エラーを出すと、プラグインの理解が深まるという。。。なんちゅーこっちゃ。

さて、これを実装していきます。

remodal

公式
http://vodkabears.github.io/remodal/

github
https://github.com/VodkaBears/Remodal/

remodal.css、remodal-default-theme.css、remodal.jsをダウンロードします。githubだとminifyされてないですね。まーいいか。