ブログ
Redmineの最新ニュースと役に立つ情報をお伝えします。
マイページのブロック（ボックス）を閉じたり展開する機能をJavaScriptで作ってみた
記事作成の背景
ANKOSOFTの山崎です。
「Redmine Advent Calendar 2022」の12/3の記事が12/3 23:00現在、まだ未登録のため、途切れないでバトンをつなぎたく、昨日に引き続き、「Redmine Advent Calendar 2022」の12/3の記事として作成しています。
１．開発の背景
マイページはブロック（ボックス）で自分が見たい情報を自由にレイアウトして表示させることができ、色々なプロジェクトに散在しているチケットをワンストップで色々な切り口で閲覧できるメリットがあります。その反面、下図のようにかなり大量の情報が表示される傾向にあり、マイページで上下に移動（スクロール）させる必要があり、面倒に感じていました。
マイページのブロック（ボックス）毎に必要に応じて閉じたり展開できれば必要な情報により簡単にアクセスすることができ、開発をしました。
２．完成イメージ
下図のようにマイページのブロック（ボックス）毎に「閉じる」/「展開」ボタンが追加され、該当のブロック（ボックス）を閉じたり展開できます。
これにより、レイアウト変更を伴わずに必要のない情報を最小化して、必要がある情報だけ閲覧できます。
３．解決方法
view_customizeで作成したJavaScriptを適用させました。
パスのパターン： /my/page
挿入位置：全ページのヘッダ
種別：JavaScript
|
$(function () {
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ //閉じるを追加 //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ $(".mypage-box > .contextual:nth-child(1)").prepend("<span class='close'>閉じる</span>");
//閉じるをクリックすると展開になる $(document).on("click", ".close", function(){ $(this).text("展開").removeClass('close').addClass('open') $(this).parent().parent().find('div:hidden').addClass('hidden') $(this).parent().parent().find("h3").nextAll().hide() });
//展開をクリックすると閉じるになる $(document).on("click", ".open", function(){ $(this).text("閉じる").removeClass('open').addClass('close') $(this).parent().parent().find("h3").nextAll().show() $(this).parent().parent().find(".hidden").hide() }); }); |