'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 지원






















저작자표시

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

[jQuery] 테이블 정렬 플러그인 : tablesorter 사용하기  (0) 2017.02.24
,

1. 원본 내용

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


2. 다운로드 

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


3. 사용하기

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

header.php

?
1
2
3
4
5
6
7
8
9
10
11
12
    <title>Security</title>
    <meta charset="utf-8">
 <script language="JavaScript" src="js/_jquery.tablesorter/jquery-latest.js"></script>
 <script language="JavaScript" src="js/_jquery.tablesorter/jquery.tablesorter.min.js"></script>
 <script language="JavaScript" src="js/_jquery.tablesorter/jquery.tablesorter.js"></script><link rel="stylesheet" href="../jquery-tablesorter/themes/blue/style.css" type="text/css">
<-- option -->
<link rel="stylesheet" href="../jquery-tablesorter/themes/green/style.css" type="text/css">
 
 
 
 
});


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

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

index.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   <table id="logtable" class="tablesorter">
    <thead>
        <tr>
            <th>ID</th>
            <th>Auth</th>
            <th>Date</th>
            <th>User</th>
            <th>Source IP</th>
            <th>Remote IP</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
      <tr>
            <td>ID</td>
            <td>Auth</td>
            <td>Date</td>
            <td>User</td>
            <td>Source </td>
            <td>Remote </td>
            <td>Level</td>
        </tr>
    </tbody>
</table>
});


3) 스크립트 실행하기

- 기본 실행 방법

main.js

?
1
2
3
$(function(){
    $("#logtable").tablesorter();
});


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

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

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

?
1
2
3
4
5
6
7
8
9
$(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
,

티스토리툴바