bootstrap

collapse（いわゆるアコーディオン）は、一般的に閉じるボタンなど使わずに閉じますが、敢えて、閉じるボタンで閉じる場合の覚書。

bootstrap4のCollapse
https://getbootstrap.com/docs/4.3/components/collapse/

HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    <p class="text-center mb-0"><a class="btn btn-link collapse-close" href="#">閉じる</a></p>
  </div>
</div>

Javascript/jQuery

$(function(){
  $('.collapse-close').click( function () {
    $(".collapse").collapse('hide');
  });
});

ブレークポイントで処理を振り分ける方法は色々ありますが
今回は matchMedia()とquerySelector() を使っての覚書。
※ querySelector() は、最初のひとつの要素しか返しません。よって、一カ所でしか使えません。

matchMedia()

// 768px以上ならtrue
matchMedia('(min-width: 768px)').matches;
// 767.98px以下ならtrue
matchMedia('(max-width: 767.98px)').matches;
// 768px以上、1199.98px以下ならtrue
matchMedia('(min-width: 768px) and (max-width: 1199.98px)').matches;
// orientation: portrait は縦横比 landscape/portrait
matchMedia('(orientation: portrait)').matches;

上記を踏まえて、具体的な書き方例①

Javascript

const mediaQueryList = matchMedia('(min-width: 768px)');
// addListener() メディアクエリに一致時に処理実行
mediaQueryList.addListener(() => {
  // ここに実行したい処理を書きます
  console.log('mediaQueryList');
});

上記を踏まえて、具体的な書き方例②

boopstrap4の”Cards”を使用して、テキスト部分はPCでは4行表示、スマホでは3行表示。
trunk8.js にて文字列の後ろに「…」を付ける。
デフォルトで4行用classを入れておいて、3行表示用のclassを追加/削除する という手も （その逆も） ありますが、ここでは敢えて、3行用と4行用のclassを同時に追加（add）/削除（remove） しています。

HTML

// trunk8 読み込み
<script src="js/trunk8.js"></script>
// bootstrap4 Cards
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">お知らせタイトルですよ</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text d-inline-block trunk34">お知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストです</p>
  </div>
</div>

Javascript

const trunk34 = document.querySelector('.trunk34');
const mediaQueryList = matchMedia('(min-width: 768px)');
mediaQueryList.addListener(onMediaQueryChange);
  
function onMediaQueryChange (mediaQueryList) {
  if (mediaQueryList.matches === true) {
    trunk34.classList.add('lines4');
    trunk34.classList.remove('lines3');
  } else {
    trunk34.classList.add('lines3');
    trunk34.classList.remove('lines4');
  }
}
onMediaQueryChange(mediaQueryList);
// trunk8の行設定
$(function () {
  $('.lines3').trunk8({ lines: 3 });
  $('.lines4').trunk8({ lines: 4 });
});

jQuery UI datepickerを特定の場所（テキストボックスの下）に表示させたい、
かつ、下に余白が少なくても上付きにはしない。
※常に、テキストボックスの下にdatepickerを出したい

デフォルトのdatepickerは、body直下に position: absolute で配置されるので
これをインラインにし、divで囲む。

久々に仕事で使う機会があったので覚書。

Javascript/jQuery

$(function () {
  $("#dpTextbox").datepicker({
    dateFormat: 'dd/mm/yy',
    showOn: 'both',
    beforeShow: function (textbox, instance) {
      $('.appendDatepicker').append($('#ui-datepicker-div'));
    }
  });
});

HTML

<form>
  <div class="form-group">
    <label for="dpTextbox">日付</label>
    <input type="text" class="form-control" id="dpTextbox" name="dpTextbox" value="" placeholder="">
    <div class="appendDatepicker"></div>
  </div>
</form>

CSS

.appendDatepicker {
  position: relative;
}
.ui-datepicker {
  top: 0 !important;
  left: 0 !important;
}