2009/07/31 15:06
jQuery 강좌5. 카테고리 분류하기(필터링) 프로그래밍/jquery2009/07/31 15:06
위 예제처럼 카테고리를 클릭하면 리스트들이 각 분류에 맞게 정렬되는 것을 해볼것입니다. 어렵지 않아요.
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 (3) | 2009/11/14 |
|---|---|
| jQuery 강좌5. 카테고리 분류하기(필터링) (7) | 2009/07/31 |
| jQuery 강좌4. 이미지 바꾸기 (1) | 2009/07/30 |
| jQuery 강좌3. 스크롤바 따라다니는 슬라이드 메뉴 (6) | 2009/07/29 |
TAG jQuery 강좌
댓글을 달아 주세요
강좌가 더 안 올라 오는 것인가요~?
요즘 프로젝트 진행 기간이라 바쁜관계로 업데이트를 하지 못했네요. 미흡한 강좌임에도 찾아주셔서 감사드립니다 .여유가 생기면 곧 업데이트를 할게요 ^^
좋은강좌 감사드립니다...
자세하게 쉽게 해놓으셔서 많은 도움 받았습니다..
한가지 아쉬운점은 업데이트가 안되는것이...;;^^
여유가 생기시면 언능 업데이트 부탁드릴께요~~~
찾아주셔서 감사합니다. 혹시 다루었으면 하는 예제가 있으시면 말씀해주세요.
감사히 잘보고 있습니다.
class*= 여기서 * 표시는 class 전체라는 표현인거죠???
value 값을 이부분 => 일부분인가요? ㅡㅡ;;;
일부분이 맞습니다. ^^;;;
그리고 *= 연산자는 속성값에서 해당 문자열 값을 일부라도 포함하는 대상을 선택하게 됩니다.
예를들어서..
$("li[class*='webnoon'] ") 이런식으로 셀렉터를 사용하면 li 엘리먼트의 class 속성값 중에 "webnoon" 문자열이 포함되어 있으면 선택되어 집니다.
ex)
<li class="webnoon_ge">선택됨</li>
<li class="webnon_ge"></li>
<li class="schoolwebnoon">선택됨</li>
<li class="webnoom_ge"></li>