'제이쿼리 toggle()이용해서 게시물 목록 정렬 버튼 토글하기

게시물 목록을 제목, 혹은 조회수, 게시일 순서를 내림차순 혹은 오름 차순으로 정렬하는 것을 토글해야할 때가 있죠.

물론 게시물의 순서는 개발팀에서 소팅을 해주어야겠지만, 일단은 UI상에서 버튼의 화살표로 직관적으로 오름차순 또는 내림차순을 클릭 횟수에 따라 토글해주어야 할 필요가 있습니다.

아 물론 데이터의 소팅까지 하는 소스는 아닙니다.

이 글에서의 목적은 단지 토글 버튼을 간단하게 구현하는 제이쿼리 소스 소개입니다.

이럴 때 제이쿼리(jquery)를 쓰면 간단하게 처리가 되겠죠.

Demo Page보기

CSS

 

.bd00Bbs th a { background:url(../image/common/ico/arrow_0.gif) 100% 50% no-repeat; padding-right:16px; display:inline-block}
.bd00Bbs th a.reverse {background:url(../image/common/ico/arrow_1.gif) 100% 50% no-repeat; }

HTML

 

	

	


		


			


			게시물 목록

			

			


				


					
no

					
제목

					
분석기간

					
발행일

					
가격

					
조회수

				

			

			


				


					
10

					
제목제목제제목제목제목제목제목제목제목제목제목제목제목

					
~ 2014년 1분기

					
2013-11-02

					
Free

					
1221

				

			

		

	

jquery

<script language="javascript" type="text/javascript">

 $(document).ready(function() {

 $('.btnToggle').toggle(function(){

	 $(this).parent().children('ul').hide();

	 },function(){

	 $(this).parent().children('ul').show();});

 });

 </script>

테이블의 th 헤더에 a태그를 부여하고, CSS에서 backround설정.

a태그에 .reverse 클래스를 부여하고 (이름은 아무거나)

반전상태의 background 이미지 설정.

제이쿼리에서 토글(toggle) 함수를 이용해서, reverse 클래스를 addClass해주고 removeClass로 클래스 박탈을 이용해서 토글.

끝!

자세한 설명은 생략!

짤방은~ 안구정화용 각선미 사진

0hp