[jQuery] Slide Up, Slide Down, Slide Toggle
[jQuery] Slide Up, Slide Down, Slide Toggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Test</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/myJS.js"></script>
</head>
<body>
<button class="close-btn">Slide Up</button>
<button class="open-btn">Slide Down</button>
<button class="toggle-btn">Slide Toggle</button>
<p class="slider">Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper <br>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Ut wisi enim ad minim veniam, <br>quis nostrud exerci tation ullamcorper suscipit lobortis<br> nisl ut aliquip ex ea commodo consequat. <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br>sed diam nonummy nibh euismod tincidunt ut <br>laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
myJS.js 소스코드
$(function() {
$(".close-btn").click(function() {
$(".slider").slideUp();
});
$(".open-btn").click(function() {
$(".slider").slideDown();
});
$(".toggle-btn").click(function() {
$(".slider").slideToggle();
});
});
[jQuery] jQuery 사용
jQuery 설치
☞ jQuery란?
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
[출처] 위키백과, 우리 모두의 백과사전.
Site : https://jquery.com/
jQuery CDN Site : https://code.jquery.com/
01. jQuery CDN 링크사용
A) code.jquery.com 에 접속 후 minified를 클릭합니다.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> </body> </html>
02. jQuery 저장 후 사용
A) https://jquery.com/ 에 접속 후 오른쪽 상단의 Download Jquery 버튼을 클릭합니다.
Download the compressed, production jQuery 3.3.1 에 대고 오르쪽 마우스를 클릭해 폴더에 저장합니다. ( ex: js/jquery-3.3.1.min.js )
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> </body> </html>
테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )
☞ 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )
http://datatables.net
01. 두 개의 파일을 html 페이지 <head></head> 부분에 삽입
CSS : //cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
JS : //cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
ex) CDN
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css ">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
Server 설치시
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
다운로드 :
02. 아래의 function을 호출 - body에 삽입
$(document).ready( function () { $('#myTable').DataTable();} );ex) <script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable(); } );</script>
#myTable - 꾸밀 테이블 id
Styling - table
'Web Design > web design general' 카테고리의 다른 글
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (2) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
