728x90
제이쿼리 위젯(Widget)
1. 아코디언 패널(Accodion Pannel)
더보기
-html version-
<p>Cryptids of Cronwall:</p>
<dl>
<dt>Brast of Bodmin</dt>
<dd>A largef feline inhabiting Bodmin Moor</dd>
<dt>Morgawr</dt>
<dd>A sea serpent</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature</dd>
</dl>
-css version-
.output { font:lrem 'Fira Sans', sans-serif; }
p,
dt { font-weight:bold; }
dl,
dd { font-size:Grem; }
dd { margin-bottom:lem; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>a { text-decoration: none; font-family: 'Nanum Myeongjo', serif;
font-family: 'Noto Sans KR', sans-serif;}
.accordion {margin: 30px;}
.accordion dt,
.accordion dd {padding: 10px; border: 1px solid #cccccc;}
.accordion dt:last-of-type
.accordion dd:last-of-type{border-bottom:1px solid #cccccc;}
.accordion dt a,
.accordion dt a {display: block; color: black; font-weight: bold;}
.accordion dd {border-top: 0; font-size: 14px; line-height: 150%;}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100;300&display=swap" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
var allPanels=$(".accordion > dd");
allPanels.hide();
$(".accordion > dt > a").click(function(){
allPanels.slideUp();
$(this).parent().next().slideDown();
// 제이쿼리의 next 메써드는 선택된 요소의 다음 형제 요소를 반환한다.
//에를 들어 $("start").next()는 start 클래스의 다음 형제 요소를 반환한다.
});
});
</script>
</head>
<body>
<dl class="accordion">
<dt><a href="#">웹이란?</a></dt>
<dd>웹은 'World Wide Web'의 약어로서 간단하게 WWW로
표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해 전
세계 사람들이 정보를 제공하고 공유할 수 있는 사이버
공간을 의미한다.</dd>
<dt><a href="#">웹 브라우저</a></dt>
<dd>웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼
수 있는 응용 프로그램을 의미한다.인터넷 익스플로러,
크롬, 사파리, 파이어폭스 등의 프로그램이 여기에 속한다.</dd>
<dt><a href="#">웹 호스팅</a></dt>
<dd>인터넷 전문 업체에서 자신이 보유한 웹 서버와
네트워크를 이용하여 개인 또는 기관에게 홈페이지를
구축할 수 있도록 서버 상에 사용자 계정과 디스크
공간을 임대해주는 서비스를 의미한다.</dd>
</dl>
</body>
</html>
2. 드롭다운 메뉴(Dropdown Menu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
* { padding: 0; margin: 0; }
ul { list-style-type: none; }
.navigation { height: 60px; background: #333333; }
.logo { float: left; margin-top: 20px; }
.logo a, .logo a:visited { color: #ffffff; text-decoration: none; }
.nav_container { width: 900px; margin: 0 auto; }
nav { float: right; }
nav ul li { float: left; position: relative; }
nav ul li a, nav ul li a:visited { display: block; padding: 0 20px;
line-height: 60px; background: #333333;
color: #ffffff; text-decoration: none; }
nav ul li a:hover, nav ul li a:visited:hover { background:#27cbef; color: #ffffff; }
nav ul li ul li { width: 190px; }
nav ul li ul li a { padding: 15px; line-height: 20px; }
.nav_dropdown { position: absolute; display: none; }
</style>
<script>
$(document).ready(function () {
// 드롭다운 메뉴를 클릭하면, 서브 메뉴를 토글시킨다.
$("nav ul li a:not(:only-child)").click(function(e) {
$(this).siblings(".nav_dropdown").toggle();
// 드롭다운 메뉴 선택 시 다른 드롭다운 메뉴는 숨기기
$(".nav_dropdown").not($(this).siblings()).hide();
e.stopPropagation();
// 이 메써드는 부모 요소들에게 이벤트가 전파되는 것을 막아서 부모 요소에 이벤트 핸들러가 실행되지 않게 한다.
});
// 드롭다운 메뉴 외 다른 곳 클릭 시 .nav_dropdown 클래스 숨기기
$("html").click(function() {
$(".nav_dropdown").hide();
});
});
</script>
</head>
<body>
<section class="navigation">
<div class="nav_container">
<div class="logo">
<a href="#">로고</a>
</div>
<nav>
<ul>
<li> <a href="#">웹 강좌 ▼</a>
<ul class="nav_dropdown">
<li> <a href="#">HTML/CSS</a> </li>
<li> <a href="#">자바스크립트</a> </li>
<li> <a href="#">제이쿼리</a> </li>
</ul>
</li>
<li> <a href="#">커뮤니티 ▼</a>
<ul class="nav_dropdown">
<li> <a href="#">공지 게시판</a> </li>
<li> <a href="#">자유 게시판</a> </li>
<li> <a href="#">QNA 게시판</a> </li>
</ul>
</li>
<li> <a href="#">이용 안내</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
3. 스무스 스크롤링(Smooth scrolling)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>body { margin: 0; padding: 110px 30px 30px; }
p { line-height: 180%; }
section { margin-bottom: 300px; }
nav { width: 100%; top: 0; left: 0; background: #404c5f; position: fixed;
padding: 30px; }
nav a { padding: 20px 30px; color: #fff; text-decoration: none; }
nav a:hover, nav a:focus { color: white; }
nav a.active { color: orange; }
</style>
<script>
$(document).ready(function () {
$(".nav a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("html, body").stop().animate({
scrollTop: $($(this).attr("href")).offset().top - 120}, 300);
});
});
</script>
</head>
<body>
<nav class="nav">
<a id="menu1" href="#link1" class="active">웹이란?</a>
<a id="menu2" href="#link2">웹 브라우저</a>
<a id="menu3" href="#link3">웹 호스팅</a>
<a id="menu3" href="#link4">웹 프로그래밍</a>
</nav>
<section id="link1">
<h1>웹이란?</h1>
<p>웹은 "World Wide Web"의 약어로서 간단하게 WWW로
표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해 전
세계 사람들이 정보를 제공하고 공유할 수 있는 사이버
공간을 의미한다.</p>
</section>
<section id="link2">
<h2>웹 브라우저</h2>
<p>웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼
수 있는 응용 프로그램을 의미한다.인터넷 익스플로러,
크롬, 사파리, 파이어폭스 등의 프로그램이 여기에 속한다.</p>
</section>
<section id="link3">
<h2>웹 호스팅</h2>
<p>웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼
수 있는 응용 프로그램을 의미한다.인터넷 익스플로러,
크롬, 사파리, 파이어폭스 등의 프로그램이 여기에 속한다.</p>
</section>
<section id="link4">
<h2>웹 프로그래밍</h2>
<p>웹 사이트의 기능을 구현하기 위하여 HTML/CSS와
웹 프로그래밍 언어(자바스크립트, PHP, JSP 등)를 이용하여
프로그램을 작성하는 것을 의미한다.</p>
</section>
</body>
4. 이미지 슬라이더(Image Slider)
더보기
** prependTo()와 appendTo() 메서드
▪ prependTo() 메써드는 선택된 요소의 제일 앞에 요소를 삽입한다. 예를 들어
$(“<span>안녕하세요.</span>”).prependTo(“p)는 <p> 요소의 제일 앞 부분에 ‘<span>안녕하세요.</span>’을 삽입한다. 그리고
▪ appendTo() 메써드는 선택된 요소의 제일 뒤에 요소를 추가한다. 예를 들어 $(”<span>안녕하세요.</span>“).appendTo(”p“)는 <p> 요소의 제일 뒤에 ‘<span>안녕하세요.</span>’를 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
var slideCount = $("#slider ul li").length;
var slideWidth = $("#slider ul li").width();
var slideHeight = $("#slider ul li").height();
var slideTotalWidth = slideCount * slideWidth;
$("#slider").css({width:slideWidth, height:slideHeight});
$("#slider ul").css({width:slideTotalWidth, marginLeft: -slideWidth});
$("#slider ul li:last-child").prependTo("#slider ul");
function moveLeft(){
$("#slider ul").animate({
left: + slideWidth},300, function(){$("#slider ul li:last-child").prependTo("#slider ul");
$("#slider ul").css("left","0");
});
};
function moveRight(){
$("#slider ul").animate({
left: - slideWidth},300, function(){$("#slider ul li:last-child").prependTo("#slider ul");
$("#slider ul").css("left","0");
});
};
$("a.prev").click(function(){
moveLeft();
});
$("a.next").click(function(){
moveRight();
});
});
</script>
<style>
*{ margin: 0; padding: 0; }
li { list-style-type: none; }
#slider { position: relative; overflow: hidden; margin: 50px auto 0 auto; }
#slider ul { position: relative; }
#slider ul li { position: relative; float: left; width: 800px; height: 533px; }
a.prev, a.next { position: absolute; top:40%; z-index: 999; display: block;
padding: 4% 3%; background: #333333; color: #fff; text-decoration: none;
opacity: 0.6; cursor: pointer; }
a.next { right: 0; }
</style>
</head>
<body>
<div id="slider">
<a href="#" class="next">>></a>
<a href="#" class="prev"><<</a>
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
</ul>
</div>
</body>
</html>
5. 햄버거 슬라이드 아코디언 메뉴 (Hamburger slide Accodion Menu)
더보기
** offset() 메써드
이 offset() 메써드는 선택된 요소의 상대적 위치를 나타내는 좌표 값을 구하는데 사용된다.
** hasClass() 메써드
hasClass() 메써드는 선택된 요소가 특정 클래스를 가졌으면 true, 아니면 false 값을 반환한다. 예를 들어 $(“p”).hasClass(“intro”)는 <p> 요소가 intro 클래스를 가졌으면 true, 그렇지 않으면 false 값을 반환한다.
** toggleClass() 메써드
toggleClass() 메써드는 선택된 요소에 특정 클래스를 더하고 빼는 것을 반복한다. 예를 들어 $(“p”).toggleClass(“main”)은 <p> 요소에 ‘main’ 클래스를 더하고 빼는 것을 반복한다.
offset().top은 수직방향의 좌표이고, offset().left는 수평방향의 좌표이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body { background: #0eb1d5; }
ul { list-style-type: none; }
a { text-decoration: none; color: black; }
#wrapper { cursor: pointer; }
#wrapper #hambuger_menu { position: relative; width: 25px; height: 20px;
margin: 15px; }
#wrapper #hambuger_menu span { opacity: 1; left: 0; display: block;
/* 투명도 1 */
width: 100%; height: 2px; border-radius: 10px;
color: black; background-color: white;
position: absolute; transform: rotate(0deg);
/* 각도 그대로 */
transition: .4s ease-in-out; }
#wrapper #hambuger_menu span:nth-child(1) { top: 0; }
#wrapper #hambuger_menu span:nth-child(2) { top: 9px; }
#wrapper #hambuger_menu span:nth-child(3) { top: 18px; }
#wrapper #hambuger_menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg); }
/* 축 */
#wrapper #hambuger_menu.open span:nth-child(2) { opacity: 0;transform: translateX(-60px); }
#wrapper #hambuger_menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg); }
#container .menu_list .submenu { padding-top: 20px; padding-bottom: 20px; }
#container .menu_list { padding-left: 0; display: block; position: absolute;
width: 400px; background: white;
box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
z-index: 999; overflow-y: auto; overflow-x: hidden;
left: -100%; }
#container .menu_list li.toggle { font-size: 16px; padding: 20px;
border-top: 1px solid #dbdcd2; }
#container .menu_list li:first-of-type { border-top: 0; }
.toggle, .submenu_content { cursor: pointer; font-size: 16px;
position: relative; letter-spacing: 1px; }
.submenu_content { display: none; }
.toggle a:before, .toggle a:after {content: ""; display: block; position: absolute;
top: 50%; right: 30px; width: 15px;
height: 2px; margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out; }
.toggle a:before { transform: rotate(-90deg); opacity: 1; z-index: 2; }
.toggle.active_menu { background: orange; transition: all 0.3s ease; }
.toggle a.active:before { transform: rotate(0deg); background: #fff; }
.toggle a.active:after { transform: rotate(180deg); background: #fff; opacity: 0; }
</style>
<script>
$(document).ready(function () {
function slideMenu() {
var activeState = $("#container .menu_list").hasClass("active");
$("#container .menu_list").animate({left: activeState ? "0%" : "-100%"}, 400);
} // 3항 연산자 activeState가 참이면 0%, 아니면 -100%, 애니메이션 진행시간 400
$("#wrapper").click(function(event) {
event.stopPropagation();
$("#hambuger_menu").toggleClass("open");
$("#container .menu_list").toggleClass("active");
slideMenu();
});
$(".menu_list").find(".toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active_menu").find(".menu_link").toggleClass("active");
$(".menu_list.submenu_content").not($(this).next()).slideUp("fast").removeClass ("open");
$(".menu_list .toggle").not($(this)).removeClass("active_menu").find(".menu_link"). removeClass("active");
});
});
</script>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="hambuger_menu"><span></span><span></span><span></span> </div>
</div>
<ul class="menu_list">
<li id="nav1" class="toggle">
<a class="menu_link" href="#">메뉴 1</a>
</li>
<ul class="submenu submenu_content">
<li><a href="#">서브메뉴 1</a></li>
<li><a href="#">서브메뉴 2</a></li>
<li><a href="#">서브메뉴 3</a></li>
</ul>
<li id="nav2" class="toggle">
<a class="menu_link" href="#">메뉴 2</a>
</li>
<ul class="submenu submenu_content">
<li><a href="#">서브메뉴 1</a></li>
<li><a href="#">서브메뉴 2</a></li>
</ul>
<li id="nav3" class="toggle">
<a class="menu_link" href="#">메뉴 3</a>
</li>
<ul class="submenu submenu_content">
<li><a href="#">서브메뉴 1</a></li>
<li><a href="#">서브메뉴 2</a></li>
<li><a href="#">서브메뉴 3</a></li>
</ul>
</ul>
</div>
</body>
</html>
** 외부에서 css 파일 불러오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(function(){
$("#tab_button").tabs();
});
</script>
</head>
<body>
<div id="tab_button">
<ul>
<li><a href="#tabs-1">웹이란?</a></li>
<li><a href="#tabs-2">웹브라우저</a></li>
<li><a href="#tabs-3">웹 호스팅</a></li>
</ul>
<div id="tabs-1">
<p>웹은 'World Wide Web'의 약어로써 간단하게 WWW로 표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해서 전세꼐 사람들이 정보를 제공하고 공유할 수 있는 사이버 공간을 의미한다.</p>
</div>
<div id="tabs-2">
<p>웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼 수 있는 응용 프로그램을 의미한다. 인터넷 익스플러, 크롬 사파리, 파이어 폿그 등이 여기에 속한다.</p>
</div>
<div id="tabs-3">
<p>인터넷 연결 전문업체에서 자신이 보유한 웹 서버와 네트워크를 이용해서 개인이나 기관에 홈페이지를 구축할 수 있도록 서버 상에 사용자 계정과 디스크 공간을 임대해주는 사업자이다.</p>
</div>
</div>
</body>
</html>'일단 해보는 코딩 > jQuery' 카테고리의 다른 글
| [jQuery] jQuery효과, 애니메이션 효과 (0) | 2022.07.14 |
|---|---|
| [jQuery] 이벤트 효과/ 등록 (0) | 2022.07.13 |
| [jQuery] 요소 탐색 (0) | 2022.07.12 |
| [jQuery] 선택자 (0) | 2022.07.12 |
| [jQuery] jQuery의 기초 (0) | 2022.07.11 |