이번 시간에는 카테고리 별로 내용물을 분류해보도록 하겠습니다. (jQuery가 처음이신 분들은 강좌1부터 보시는걸 권장합니다. ) 우리가 무엇을 할것인지 보도록 하지요. 아래 예제를 참고해주세요.
위의 예제를 다운로드 하실수 있습니다.
위 예제처럼 카테고리를 클릭하면 리스트들이 각 분류에 맞게 정렬되는 것을 해볼것입니다. 어렵지 않아요.
filter.html
1. 마크업 구조 보기
<div id="wrap">
<div id="category">
<h3>카테고리</h3>
<ul>
<li><a href="#" title="all">전체기사</a></li>
<li><a href="#" title="eco">경제/금융</a></li>
<li><a href="#" title="soc">사회</a></li>
<li><a href="#" title="star">연예</a></li>
<li><a href="#" title="sports">스포츠</a></li>
</ul>
</div>
<div id="newslist">
<h3>뉴스 목록</h3>
<ul>
<li class="eco"><a href="#">경제뉴스 1 </a></li>
<li class="sports"><a href="#">스포츠뉴스 1</a></li>
<li class="soc"><a href="#">사회뉴스 1</a></li>
<li class="eco"><a href="#">경제뉴스 2 </a></li>
<li class="star"><a href="#">연예뉴스 </a></li>
<li class="sports"><a href="#">스포츠뉴스 2</a></li>
<li class="eco"><a href="#">경제뉴스 3 </a></li>
<li class="soc"><a href="#">사회뉴스 2</a></li>
<li class="eco"><a href="#">경제뉴스 4</a></li>
<li class="sports"><a href="#">스포츠 뉴스3</a></li>
<li class="star_sports"><a href="#">연예/스포츠 뉴스 </a></li>
<li class="eco"><a href="#">경제뉴스 6</a></li>
<li class="soc"><a href="#">사회뉴스 3</a></li>
<li class="soc_eco"><a href="#">사회/경제뉴스 </a></li>
</ul>
</div>
</div>
우선, 마크업은 보시는바와 같이 간단한 구조로 되어 있습니다. 적색으로 되어진 부분을 활용하여 분류기능을 사용할것입니다.
2. jQuery 코드 보기
$(document).ready(function(){
$("#category a").click(function(e){
e.preventDefault();
var category = $(this).attr("title");
$("#newslist li").fadeOut("slow");
if(category == "all"){$("#newslist li").fadeIn("slow");}
else{$("#newslist li[class*="+category+"]").fadeIn("slow");}
});
});
굉장히 간단하지요? 저렇게 짧은 코드 하나로 멋진 분류기능을 사용할수 있다니.. jQuery가 그만큼 강력하다는 예기겠지요.
순서대로 가보겠습니다.
1. 우선 카테고리의 분류가 클릭(이벤트 발생) 됩니다.
2. 이벤트가 발생되면 실행될 함수(Callback Function)가 있겠지요?
3. 어떠한 내용이 실행되어야 하냐면, 분류에 해당하지 않는 리스트들은 숨기고(fadeOut), 분류에 해당하는 리스트들은 나타나도록(fadeIn) 합니다.
1번에 해당하는 내용은 $("#category a").click(Callback Function) ; 이 되겠군요. 클릭이 되는 대상에 click 이벤트를 적용해 주었습니다. 즉, <div id="category"></div> 안에 있는 Anchor 태그가 대상이 되겠군요.
2번에 해당하는 콜백함수 부분을 보도록 하겠습니다.
function(e){
e.preventDefault();
var category = $(this).attr("title"); // 클릭된 대상의 title 속성 값을 category 변수에 반환합니다.
$("#newslist li").fadeOut("slow"); // 우선 list들을 모두 숨깁니다.
if(category == "all"){$("#newslist li").fadeIn("slow");}
else{
$("#newslist li[class*="+category+"]").fadeIn("slow"); // 분류에 해당하는 list를 나타냅니다.
}
}
3. Key Point
이번 예제에서의 Key Point 는 속성 선택자 입니다.
$("#newslist li[class*="+category+"]").fadeIn("slow"); 이 부분에서 선택자 부분을 잘 보세요. [class*="+category+"] 이 부분이 생소하실 거라고 생각합니다.
[class*="+category+"] 이것을 속성 선택자라고 합니다. 형태는 [Attribute=value] 가 됩니다. 즉, 속성(Attribute)의 값이 value가 되는 대상을 선택하는 것이죠.
그런데 예제에서는 [Attribute*=value] 가 사용되었습니다. *= 은 value 값을 이부분이라도 포함하고 있는 속성값을 선택하겠다는 의미가 됩니다.
속성 선택자에 대해서 자세히 다루는 포스팅을 한번 하도록 하지요.
난해하거나 기타 질문있으시면 댓글 남겨주세요.
'프로그래밍 > jquery' 카테고리의 다른 글
| jQuey 강좌 6 - Select 필드를 동적으로 변경하기 width PHP (8) | 2009/11/14 |
|---|---|
| jQuery 강좌5. 카테고리 분류하기(필터링) (9) | 2009/07/31 |
| jQuery 강좌4. 이미지 바꾸기 (7) | 2009/07/30 |
| jQuery 강좌3. 스크롤바 따라다니는 슬라이드 메뉴 (16) | 2009/07/29 |
TAG jQuery 강좌
imgchange.zip
slidemenu.htm
jquery.js
