https://clubchina.jp/common/js/ceremonial_hall.js

1$(document).ready(function(){
2	//--------------------
3	//Select
4	//--------------------
5	$("dl#category,dl#type,dl#style").find("dt a").click(function(){
6		var p = $(this).parents("dl").stop();
7		var open_flg = 'open';
8		if( p.hasClass("open") ){
9			p.find("dd").slideUp(function(){
10				p.removeClass("open");
11			});
12		}else{
13			$("dl#category.open,dl#type.open,dl#style.open").find("dd").slideUp(function(){
14				var _p = $(this).parents("dl");
15				_p.removeClass("open");
16			});
17			p.find("dd").slideDown(function(){
18				p.addClass("open");
19			});
20		}
21		if(open_flg == 'open'){
22			$("body").click(function(){
23				$("dl#category.open,dl#type.open,dl#style.open").find("dd").slideUp(function(){
24					var _p = $(this).parents("dl");
25					_p.removeClass("open");
26				});
27			});
28		}
29		return false;
30	});
31	//--------------------
32	//Grid
33	//--------------------
34	var timer = false;
35	var grid_first = true;
36	var opa_flg = false;
37	var base_count
38	var frame_base = 1024;
39	var base_width = 200;
40	$(window).on("resize load orientationchange",function() {
41		if (timer !== false) {
42			clearTimeout(timer);
43		}
44		timer = setTimeout(function() {
45			//width ajast
46			
47			var frame_width = $(".contents_inn").width();
48			var block_width = $(".contents_inn .block.search-vis:not(.big)").width();
49			
50			/*
51			//20150428 250pxcount
52			if( frame_width > 1500 ){
53				var per = 100 / (Math.floor(frame_width / 250 )) ;
54			}else{
55				var per = 100 / (Math.floor(frame_width / base_width )) ;
56				if( per > 50 ){
57					per = 50;
58				}
59				if( frame_width <= 768){
60					per = 48;
61				}
62			}*/
63
64			//20150428 2400px = 7count
65			if( frame_width <= frame_base ){
66				var per = 100 / (Math.floor(frame_width / base_width )) ;
67				if( per > 50 ){
68					per = 50;
69				}
70				if( frame_width <= 768){
71					per = 48;
72				}
73			}else{
74				var per = 100 / (Math.floor( 5 + (frame_width / frame_base) -0.3 )) ;
75			}
76
77
78			$(".contents_inn .block:not(.big)").css("width",function(){
79				return per + "%";
80			});
81			$(".contents_inn .block.big").css("width",function(){
82				return per * 2 + "%";
83			});
84			
85			// Grid layout
86			var grid_root = $(".contents_inn").math_grid( {
87				child:".block.search-vis"
88			} );
89			var px = "px";
90			grid_root.data( "gridchild" ).each( function(){
91				var chi = $( this );
92				if( grid_first ){
93					chi.css({
94						left: this.gridleft + px,
95						top: this.gridtop + px
96					});
97				}else{
98					chi.css("display","block");
99					chi.stop().animate({
100						left: this.gridleft + px,
101						top: this.gridtop + px,
102						opacity:1
103					});
104				}
105			} );
106			grid_root.each( function(){
107				$( this ).animate( {height:this.gridheight + "px",opacity:1});
108			} );
109			grid_first = false;
110		}, 100);
111	});
112	//-------------------------
113	//Search
114	//-------------------------
115	$(".contents_inn .block").addClass("search-vis");
116	var _search = function(){
117		var _c = $("#category dt a").attr("cat");
118		var _t = $("#type dt a").attr("type");
119		var _s = $("#style dt a").attr("stl");
120		
121		var _blocks = $(".contents_inn .block");
122		var _defs = $(".contents_inn .block");
123		if( _c != "0" ){
124			_blocks = _blocks.filter("[cat=" + _c + "]");
125		}
126		if( _t != "0" ){
127			_blocks = _blocks.filter("[type=" + _t + "]");
128		}
129		if( _s != "0" ){
130			_blocks = _blocks.filter("[stl=" + _s + "]");
131		}
132		
133		_blocks.addClass("search-vis");
134		_defs.not(_blocks).removeClass("search-vis").stop().animate({
135			opacity:0
136		},function(){
137			$(this).css("display","none");
138		});
139		
140		$(window).trigger("resize");
141	};
142	
143	$("#category").filter(function(){
144		var _t = $(this).find("dt a");
145		$(this).find("li a").on("click",function(){
146			var _v = $(this).attr("cat");
147			_t.text( $(this).text() );
148			_t.attr("cat", _v );
149			_search();
150			_t.click();
151			return false;
152		});
153	});
154
155	$("#type").filter(function(){
156		var _t = $(this).find("dt a");
157		$(this).find("li a").on("click",function(){
158			var _v = $(this).attr("type");
159			_t.text( $(this).text() );
160			_t.attr("type", _v );
161			_search();
162			_t.click();
163			return false;
164		});
165	});
166
167	$("#style").filter(function(){
168		var _t = $(this).find("dt a");
169		$(this).find("li a").on("click",function(){
170			var _v = $(this).attr("stl");
171			_t.text( $(this).text() );
172			_t.attr("stl", _v );
173			_search();
174			_t.click();
175			return false;

176		});
177	});
178});