프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] array생성(push), 순차정렬 #3

2022.09.21
북마크 작성자 정보
array생성 (push), 순차정렬

DB를 이용할 수 없는경우 배열array를 이용해 리스트를 생성.
생성된 리스트를 카테고리별로 구분하고 구분한 카테고리별로 우선 순위를 조절하는.

테스트 
https://www.relation.co.kr/images_board/board_system_publishing/286/index.php
https://www.relation.co.kr/images_board/board_system_publishing/286/ls.php

1번째 배열 -> 데이터 저장
2번쨰 배열 -> 카테고리별 데이터 순서 조회 출력


inc_menu.php (메뉴는 PHP for문으로 생성)
<?PHP
	$LINK = "ls.php";
	$menu_ls = "";
	for($i=1; $i<11; $i++)
    {
		 	if($i == 1){ $MENU_TIT = "ALL_LS"; }
			else { $MENU_TIT = "MENU_"; }
			$menu_ls .= "<li><a href='".$LINK."?tab=".$i."' class='off'>".$MENU_TIT.$i."</a></li>";
	}
?>
 
<?PHP
	include "./inc_menu.php";
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR_5_275</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./css.css">
</head>
<body>
	
	<div class="wrap">
		<div class="menu_area">
				<div class="menu_box">
					<ul>
						<?PHP echo $menu_ls; ?>
					</ul>	
				</div>	
		</div>	
	</div>	
	
</body>
</html>


ls.php
 
<?PHP
	include "./inc_menu.php";
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR_5_275</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./css.css">
	
	<script>
			$(document).ready(function(){
				//alert('ready');
				let p_tab = urlParam('tab');
				menue_on(p_tab);
				//console.log("padameters",p_tab );
				//let menu_cell_w = $(".menu_box > ul > li").outerWidth();
				//console.log ("menu_cell_w", menu_cell_w);
				let menu_cell_w = 100;
				let lef_move = ( p_tab-1 )* menu_cell_w;
				console.log ("lef_move", lef_move);
				$(".menu_area").scrollLeft( lef_move );
				
				creat_array(p_tab);
			});
		
			//파라미터 함수 google 검색
			function urlParam(name)
			{
					const queryString = window.location.search;
					const urlParams = new URLSearchParams(queryString);
					if (!urlParams.has(name)) { return false; } 
					return urlParams.get(name);
			}
		
			function menue_on(num)
			{
					let index_num = num -1; 
					let class_val = $(".menu_area > .menu_box > ul > li").eq(index_num).find(".off").addClass('on');
					console.log("class_val", class_val);
			}
		
			function creat_array(cate_gbn)
			{
					var array_ls = [];
					array_ls.push({ h:"1. [나이키] 한정판 슈즈 8종", tit:"한정판 슈즈 8종", txt:"nike_1.jpg"  });  //index0
					array_ls.push({ h:"2. [가민] Forerunner 245 Music", tit:"lForerunner 245 Music", txt:"garmin_1.jpg"  });
					array_ls.push({ h:"3. [삼성전자] 갤럭시워치4 클래식 42mm", tit:"갤럭시워치4 클래식 42mm", txt:"watch_1.jpg"  });
					array_ls.push({ h:"4. [LG전자] 프라엘 에센셜 부스터", tit:"프라엘 에센셜 부스터", txt:"pral_1.jpg"  });
					array_ls.push({ h:"5. [LG전자] 룸앤 스마트 TV", tit:"룸앤 스마트 TV", txt:"room_1.jpg"  });
					array_ls.push({ h:"6. [LG전자] 퓨리케어 자연기화 가습기", tit:"퓨리케어 자연기화 가습기", txt:"puricare_1.jpg"  });
					array_ls.push({ h:"7. [벨레] 멜로우(Mellow) 스피커", tit:"멜로우(Mellow) 스피커", txt:"mellow_1.jpg"  });
					array_ls.push({ h:"8. [카카오프렌즈] 미니 냉장고(80L)", tit:"미니 냉장고(80L)", txt:"kakao_1.jpg"  });
					array_ls.push({ h:"9. [삼성전자] BESPOKE 큐커", tit:"BESPOKE 큐커", txt:"bespoke_1.jpg"  });
					array_ls.push({ h:"10. [일리] 커피머신 X7.1", tit:"커피머신 X7.1", txt:"illy_1.jpg"  });
					array_ls.push({ h:"11. [일리] 커피머신 X10.1", tit:"커피머신 X10.1", txt:"illy_1.jpg"  });
					//var cate_gbn = getParameterByName('gbn');
					//console.log( cate_gbn );
					if( cate_gbn == "1" )
					{
						 array_cate_ls = [0,1,2,3,4,5,6,7,8,9,10];
					}
					else if( cate_gbn == "2")
					{
							array_cate_ls = [1,2,0];
					}
					else if( cate_gbn == "3")
					{
							array_cate_ls = [2,0,1];
					}
					else if( cate_gbn == "4")
					{
							array_cate_ls = [3,2,1];
					}
					else if( cate_gbn == "5")
					{
							array_cate_ls = [4,2,3];
					}
					else if( cate_gbn == "6")
					{
							array_cate_ls = [5,4,3];
					}
					else if( cate_gbn == "7")
					{
							array_cate_ls = [6,4,3,10];
					}
					else if( cate_gbn == "8")
					{
							array_cate_ls = [7,4,3];
					}
					else if( cate_gbn == "9")
					{
							array_cate_ls = [8,4,3];
					}
					else if( cate_gbn == "10")
					{
							array_cate_ls = [9,4,3,10];
					}
					else
					{
							array_cate_ls = [0,1,2,3,4,5,6,7,8,9,10];
					}

					var total_array = array_cate_ls.length;
					console.log( total_array );
					
					var add_ls = "";
					for(var i=0; i<total_array; i++ )
					{
							add_ls += "<div class='ls_box'><div class='ls'>";
							add_ls += "<h2>"+array_ls[array_cate_ls[i]]['h']+"</h2>";
							add_ls += "<div class='ls_text'>"+array_ls[array_cate_ls[i]]['tit']+"</div>";
							add_ls += "<div class='ls_text'>"+array_ls[array_cate_ls[i]]['txt']+"</div>";
							add_ls += "</div></div>";
					}
				
					$("#content_area").html(add_ls);
			}
	</script>	
</head>
<body>
	
	<div class="wrap">
		<div class="path"><a href="./index.php">INDEX</a></div>
		<div class="menu_area">
				<div class="menu_box">
					<ul>
						<?PHP echo $menu_ls; ?>
					</ul>	
				</div>	
		</div>
		<div class="content_area" id="content_area"></div>
	</div>	
	
</body>
</html>

이 포스트 공유하기

전체목록