オーバーレイ管理機能試作 1

賃貸物件ページや、商品ページで使えそうなオーバーレイ(画面下部に固定されている、既存のコンテンツの上にかぶさっているような帯)の管理JSを試作しました。

HTMLの構造に依存するが、いつか作成したものよりも、管理がしやすくなったかも。

デモ

demo(表示する際は、画面の縦幅を小さくしてください。)

jQuery プラグイン

;(function($){ $.fn.overlayManagement01 = function(options) { if(this.length == 0) return this; if(this.length > 1){ this.each(function(){$(this).overlayManagement01(options)}); return this; } var el = this; var o; var status = {};//状態管理用変数 o = { //overlaysには、末尾にあるほど、最優先で表示するかどうかの判断がされます。 //必ず表示したいものを、最後に配置するようにしてください。 overlayClass : '',//el直下のそれぞれのoverlayのクラス名 overlays : [] }; o = $.extend({}, o, options); if(o.overlays.length == 0) return this;//管理対象のoverlayがない場合は、無視 status.isNeedInitialOverlay = (el.find('.' + o.overlayClass + '.is_open').length > 0);//初期表示するoverlayがあるかどうか /*--------------------- *監視タイミング ---------------------*/ $(window).on('scroll',function(){ checkCondition(); }); $('#form').find('input:checkbox.js_item_checkbox01').on('change',function(){ checkCondition(); }); //監視タイミングここまで function checkCondition(){ for (var i = o.overlays.length - 1; i >= 0; i--) { if(o.overlays[i].condition()) { el.find('.' + o.overlayClass).not('.'+o.overlays[i].elm).removeClass('is_open'); el.find('.'+o.overlays[i].elm).addClass('is_open'); break; } } setElHeight(); } function setElHeight(){ if (el.find('.' + o.overlayClass + '.is_open').length > 0) { el.css( 'height', el.find('.' + o.overlayClass + '.is_open').outerHeight()); } else { el.css( 'height', 0); } } function init(){ //初期に表示しているboxがあれば、高さを与える if (status.isNeedInitialOverlay) { setElHeight(); } checkCondition(); } // el.checkStatus = function(){ // return true; // }; init(); return this; }; })(jQuery);

発動

$(function(){ var listOverlay = $('#overlays_container').overlayManagement01({ overlayClass : 'overlay_box01', overlays : [ { elm : 'js_overlay_amount',//overlay名 condition : function(){//出現条件 //初期表示にしたいので、true return true //$(window).scrollTop() > 1 } },{ elm : 'js_overlay_search', condition : function (dom) { return $(window).scrollTop() > $('.box01_container').eq(0).find('.box01').offset().top - $(window).height()/2 } },{ //途中の何も出したくない場合は、適当なoverlayを使用する elm : 'js_overlay_between', condition : function (dom) { return $(window).scrollTop() > $('.box01_container').eq(1).find('.box01').offset().top - $(window).height()/2 && $(window).scrollTop() < $('.box01_container').eq(1).find('.box01').offset().top } },{ elm : 'js_overlay_cvn', condition : function(){ return $('#form').find('input:checkbox.js_item_checkbox01:checked').length > 0; } } ] }); });

CSS オーバーレイの部分抜粋

.js_bottom_fixed_container{ position: fixed; bottom: 0; left: 0; width: 100%; transform: translate(0,100%); transition: transform 0.3s linear; &.is_open{ transform: translate(0,0%); } } #overlays_container{ clear: both; position: relative; transition: height 0.3s linear; } .overlay_box01{ background-color: rgba(0, 0, 0, 0.6); padding: 10px; color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; transition: transform 0.3s linear; transform: translate(0, 100%); &.is_open{ transform: translate(0,0%); } &.overlay_between{ padding: 0; display: none; } }

HTML オーバーレイの部分抜粋

<div class="js_bottom_fixed_container is_open"> <!-- ▼overlyaの挙動 ・同時に出し入れは行わない ・入れ替える際は、しまってから見えない場所で入れ替え、再びだすイメージで ▼overlayタイプ ・初期表示している ・途中から出る ・途中から消える ・操作したら出る --> <div id="overlays_container"> <div class="js_overlay_amount overlay_box01 is_open"> <div> <div class="d_table w_100per"> <div class="d_table_cell w_30per v_middle t_center"> <dl> <dt>now</dt> <dd class="js_amount_output01"><span>8888</span></dd> </dl> </div> <div class="d_table_cell w_70per v_middle"> <button class="btn01 w_100per">button1</button> </div> </div> </div> </div> <div class="js_overlay_search overlay_box01"> <div> <p>text,text</p> <div class="d_table w_100per"> <div class="d_table_cell w_50per v_middle pr_5"> <button class="btn01 w_100per">button2</button> </div> <div class="d_table_cell w_50per v_middle pl_5"> <button class="btn01 w_100per">button3</button> </div> </div> </div> </div> <div class="js_overlay_between overlay_box01 overlay_between"> <!-- 何も出したくない場合のoverlay --> </div> <div class="js_overlay_cvn overlay_box01"> <div> <p>dummy,dummy</p> <div class="d_table w_100per"> <div class="d_table_cell w_50per v_middle pr_5"> <button class="btn01 w_100per">button4</button> </div> <div class="d_table_cell w_50per v_middle pl_5"> <button class="btn01 w_100per">button5</button> </div> </div> </div> </div> </div><!-- .js_overlay_container --> </div>

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

同じカテゴリの前後の記事


  1. KATOON.NET
  2. TRASH
  3. オーバーレイ管理機能試作 1