'Programming/Script' + 2

jQuery와 CSS3를 활용한 menu 네비게이션 소스들 




- 상단 네비게이션 일반 풀다운 메뉴 (멀티 서브메뉴 지원 )


- 상단 네비게이션 일반 풀다운 메뉴 (멀티 서브메뉴 지원 )


- 상단 네비게이션 일반 풀다운 메뉴 (멀티 서브메뉴 지원 , 애니메이션 )


- 멀티 서브메뉴 ( 이미지 사용가능 )


- 상단 네비게이션 일반 풀다운 메뉴


- 상단 네비게이션 일반 풀다운 메뉴 (롤오버 색깔 변경 )


- 상단 네비게이션 일반 풀다운 메뉴 (flat version)



- 상단 네비게이션 일반 풀다운 메뉴 (서브메뉴 1개)
- 상단 네비게이션 일반 풀다운 메뉴  (클릭 이벤트 / 이벤트 있고)



-left 풀다운 ( 우측으로 펼쳐짐 )



- left 풀다운 메뉴 ( 아래로 펼쳐짐 )




- left 모바일 메뉴



- 심플 스탠다드형 jquery left 메뉴 


- IE8이상


- DEMO3 접기가능 


- left 메뉴 펼침(상하)


- google nexus website menu 강력 추천하나.. IE8 미지원 



- 메뉴 항목에대한 설명 표시가능 (접기 불가)
- IE 8 표시 안됨 (표준)



- left menu 네비게이션 (멀티 서브메뉴 지원 ) ★강추



- left 드랍 메뉴 



- Vertical accordion menu (jQuery & CSS3) IE8 지원






















,

1. 원본 내용

tablesorter 소개에 대해선 http://tablesorter.com/docs/에서 확인 가능.


2. 다운로드 

http://tablesorter.com/docs/#Download에서 다운로드


3. 사용하기

1) 헤더에 플러그인 포함하기

header.php

    




    Security
    
 
 
 
<-- option -->





});


2) 테이블에 class 값 입력하기

class="tablesorter" 이 클래스명은 변경하면 안된다. ( 적용 안됨 )

index.php

   
ID Auth Date User Source IP Remote IP Level
ID Auth Date User Source Remote Level
});


3) 스크립트 실행하기

- 기본 실행 방법

main.js

$(function(){
    $("#logtable").tablesorter();
});



- 컬럼별 오름차순 내림차순 적용하기

sortList: [[0,1]] 의 경우 1번째 컬럼의 1: desc 내림차순 (5,4,3,2,1) 정렬한다는 의미

sortList: [[3,1],[5,0]] 의 경우 4번째 컬럼의 desc 내림차순 정렬 , 6번째 컬럼의 asc 오름차순 정렬한다는 의미

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("#logtable").tablesorter({ 
        // sort on the first column, order asc [coulum num,asc=0 or desc=1]
        sortList: [[0,1]] 
    }); 
}); 

});



4) 여러가지 데모 및 예제

데모 확인 하기  http://tablesorter.com/docs/#Demo  

예제 확인 하기 http://tablesorter.com/docs/#Examples 






'Programming > Script' 카테고리의 다른 글

[ CSS ] 네비게이션바 링크  (0) 2017.08.08
,