https://www.pj-color.com/layerboard/js/jquery.layerBoard.js

1/*
2 * ===================================================================
3 *	jquery.layerBoard.js
4 *	@auther:kiyoty
5 *	@URI:http://www.idea-clippin.com
6 *	@create:2012/12/30
7 * 	@License:MIT License(X11 License、X License)
8 * ===================================================================
9 *	
10 * -------------------------------------------------------------------
11 *	opition
12 * -------------------------------------------------------------------
13 * delayTime		//表示までの待ち時間
14 * fadeTime			//表示のフェード時間
15 * alpha				//レイヤーの透明度
16 * limitMin			//何分経過後に再度表示するか
17 * easing				//イージング
18 * limitCookie	//cookie保存期間
19 *	
20 * -------------------------------------------------------------------
21 *	Example
22 *	$('#layer_board_area').layerBoard({alpha:0.5});
23 * -------------------------------------------------------------------
24*/
25
26(function($) {
27	
28  $.fn.layerBoard = function(option) {
29  	
30		var elements = this;
31		
32		elements.each(function(){
33			
34			option = $.extend({
35				delayTime: 50,						//表示までの待ち時間
36				fadeTime : 500,						//表示のフェード時間
37				alpha : 0.5,							//レイヤーの透明度
38				
39				limitMin : 0,							//何分経過後に再度表示するか(デフォルト：1)
40				
41				easing: 'linear',					//イージング
42				
43				limitCookie : 0	 					//cookie保存期間(デフォルト：1)
44			}, option);
45							
46				
47			var limitSec = option.limitMin * 60; //秒数に変換
48						
49						
50			if ($.cookie('layerBoardTime') == null) {
51				
52				/*----------------------------------------
53					cookieがない場合
54				 ----------------------------------------*/
55				LayerBoardFunc ();
56				
57				//cookieに現在の時間をセット
58				var start = new Date();
59				$.cookie('layerBoardTime', start.getTime(), { expires: option.limitCookie,path: '/' });
60				
61				
62			} else {
63				
64				/*----------------------------------------
65					cookieがある場合
66				 ----------------------------------------*/
67				
68				//現在のミリ秒を取得し、秒数に変換
69				var now = new Date();
70				secDiff = now.getTime() - $.cookie('layerBoardTime');
71				secTime = Math.floor( secDiff / 1000);
72				
73				
74				//指定時間を経過していた場合は、LayerBoardを表示
75				//cookieを削除後、再度cookieに現在のミリ秒をセット
76				if (secTime >= limitSec) {
77					
78					LayerBoardFunc ();
79					
80					$.cookie('layerBoardTime', null, { expires:-1,path: '/' });
81					
82					var start = new Date();
83					$.cookie('layerBoardTime', start.getTime(), { expires:option.limitCookie,path: '/' });
84					
85				}
86				
87			}
88			
89			
90			/*----------------------------------------
91				表示処理
92			 ----------------------------------------*/
93			function LayerBoardFunc () {
94				
95				
96				$('.layer_board_bg', elements).show().animate({opacity: 0},0).delay(option.delayTime).animate({opacity: option.alpha},option.fadeTime,function(){
97					$('.layer_board', elements).fadeIn(option.fadeTime);																																					
98				})
99					
100			}
101			
102			
103			/*----------------------------------------
104				非表示処理
105			 ----------------------------------------*/
106			$('.layer_board_bg', elements).click(function() {
107				
108				$('.layer_board', elements).fadeOut(option.fadeTime);
109				$(this).fadeOut(option.fadeTime);
110				
111				
112			});
113			
114			
115			//closeボタンの場合
116			$('.btn_close', elements).click(function() {
117				
118				$('.layer_board', elements).fadeOut(option.fadeTime);
119				$('.layer_board_bg', elements).fadeOut(option.fadeTime);
120				
121				
122			});
123
124			
125			
126			/*----------------------------------------
127				ボタンによる表示処理
128			 ----------------------------------------*/
129			$('.layer_board_btn').click(function() {
130				
131				$('.layer_board_bg', elements).show().animate({opacity: 0},0).delay(option.delayTime).animate({opacity: option.alpha},option.fadeTime,function(){
132					$('.layer_board', elements).fadeIn(option.fadeTime);																																					
133				});
134				
135			});
136	
137		});
138		
139		return this;		
140		
141	};
142	
143})( jQuery );
144
145