FrontEnd/JQuery
JQuery Widget( Accordion Pannel, Image Slider, Dropdown Menu, Smooth Scrolling, Hamburger slide Accordion Menu )
H_Develop
2022. 7. 14. 19:11
제이쿼리 위젯(Widget)
롤오버 버튼, 달력, 이미지 슬라이더, 드롭다운 메뉴, 아코디언 패널, 다이얼로그 박스 등의 기능을 제공하는 도구 모음
아코디언 패널 (Accordion Pannel)
아코디언 악기와 같이 패널의 내용이 아래로 펼쳐지는 위젯
<style>
a {text-decoration:none;}
.accordion {margin:30px;}
.accordion dt, .accordion dd {padding:10px; border:solid 1px #cccccc;}
.accordion dt:last-of-type, .accordion dd:last-of-type {border-bottom : solid 1px #cccccc;}
.accordion dt a, .accordion dd a {display:block; color:black; font-weight:bold;}
.accordion dd {border-top:0; font-size:14px; line-height:150%;}
</style>
<script>
$(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>
Image Slider
그림 slide 사용 옆으로 넘기기
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></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-color:white; color:black;
text-decoration:none; opacity:0.6; cursor:pointer;}
/* z-index 우선순위 정하기, opacity 투명도 조절, cursor 마우스 커서 모양 변경 */
</style>
<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 u;");
$("#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>
</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>
Dropdown Menu
홈페이지 헤더 메뉴 클릭으로 나타내기
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<style>
* {padding:0; margin:0;}
ul {list-style-type:none;}
.navigation {height:60px; background-color:#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-color:#333333; color:#ffffff; text-decoration:none;}
nav ul li a:hover, nav ul li a:visited:hover {background-color:#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>
$(function() {
// 드롭다운 메뉴를 클릭하면, 서브 메뉴를 토글시킨다.
$("nav ul li a:not(:only-child)").click(function(e){
// only-child 자식이 하나인 애들, not 붙어서 자식이 하나가 아닌 애들을 지칭
$(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>
Smooth Scrolling
메뉴 클릭 시, 원하는 내용으로 자동 스크롤하여 위치 이동
<script src="C:\UI\JQuery/jquery-3.6.0.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-color:#404c5f; position:fixed; pdding: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>
$(function() {
$(".nav a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("html,body").stop().animate({
scrollTop:$($(this).attr("href")).offset().top - 120}, 300);
// offset() 선택된 요소의 상대적 위치를 나타내는 좌표 값을 구하는데 사용
});
});
</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>