- 문제 7 :
1. 처음에는 상위메뉴만 보이게
2. 클릭시 하위메뉴 슬라이드다운 / 다른 메뉴는 슬라이드업
3. 하위메뉴 호버했을 때 상위메뉴 배경 유지 (.on css스타일 활용)
|
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<body>
<div id="wrapper">
<div id="middle">
<div id="left">
<div id="leftMenu">
<div id="leftTitle">회원사담당자</div>
<div id="subMenu">
<ul>
<li>
<a href="#none" id="left0" class="lnb">공지사항</a>
<ul class="depth2">
<li><a href="#none">- 업무관련 공지</a></li>
</ul>
</li>
<li>
<a href="#none" id="left1" class="lnb">심사신청</a>
<ul class="depth2">
<li><a href="#none">- 신규광고 신청</a></li>
</ul>
</li>
<li>
<a href="#none" id="left2" class="lnb">광고물 제출</a>
<ul class="depth2">
<li><a href="#none">- 수정안 제출</a></li>
<li><a href="#none">- 영상물 제출</a></li>
</ul>
</li>
<li>
<a href="#none" id="left3" class="lnb">조회</a>
<ul class="depth2">
<li><a href="#none">- 광고심사조회</a></li>
</ul>
</li>
<li>
<a href="#none" id="left4" class="lnb">준법감시광고</a>
<ul class="depth2">
<li><a href="#none">- 사전승인보고</a></li>
<li><a href="#none">- 광고물 제출</a></li>
<li><a href="#none">- 사전승인내역조회</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$('.depth2').hide();
$('#subMenu .lnb').click(function(){
$('.depth2').slideUp('fast');
$(this).next().slideDown('fast');
$('.lnb').removeClass('on');
$(this).addClass('on');
});
</script>
</body>
|
cs |
- 문제 8 :
1. 클릭시 색깔 카드 내려감
2. 재클릭시 올라감 (기존 높이 유지)
|
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
26
27
28
29
30
31
|
<script>
$(document).ready(function () {
var tops=[22,4,30];
var i;
var on=[false,false,false]; $('.col').click(function(){
i=$(this).index();
on[i]=!on[i]; //각 스위치마다 별도의 on/off if(on[i]){
$(this).animate({top:95},'fast');
}else{
$(this).animate({top:tops[i]},'fast');
}
});
});
</script>
</head>
<body>
<div id="wrap">
<img src="images/abcmask.png" class="mask">
<div id="blocks">
<div class="col col1" ></div>
<div class="col col2"></div>
<div class="col col3"></div>
</div>
</div>
</body>
|
cs |
=> 배열 객체 활용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
$(document).ready(function () {
var card=[
{위치:'up',높이:22},
{위치:'up',높이:4},
{위치:'up',높이:30}
];
var i;
$('.col').click(function(){
i=$(this).index();
if(card[i].위치=='up'){
$(this).animate({top:95},'fast');
card[i].위치='down';
}else{
$(this).animate({top:card[i].높이},'fast');
card[i].위치='up';
}
});
});
</script>
|
cs |
=> ui 플러그인 (일반 제이쿼리도 가능하지만 속도 조정은 불가)
|
1
2
3
4
5
6
7
|
<script>
$(document).ready(function () {
$('.col').click(function(){
$(this).toggleClass('col_ani',200); //addClass-removeClass 번갈아 수행
});
});
</script>
|
cs |
제이쿼리 ui 플러그인
- tooltip 구현 변화
<script>
$(function(){
$('h1').tooltip(); //툴팁 메시지 확대, 그림자 추가됨
});
</script>
</head>
<body>
<h1 title="라이브러리">제이쿼리</h1>
</body>
- hide/show 효과 추가
<script>
$(function(){
$('h1').tooltip();
$('button').click(function(){
$('img').hide('explode',2000); //explode, blind 등 //show도 적용
});
});
</script>
</head>
<body>
<h1 title="라이브러리">제이쿼리</h1>
<button>이미지 사라지기</button>
<img src="../images/car_red.jpg" alt="">
</body>
- dialog : 문서 위 팝업창처럼 띄움
<script>
$(function(){
$('#dialog').dialog();
});
</script>
</head>
<body>
<h1>메인 페이지 제목</h1>
<div id="dialog" title="공지사항">
<p>코로나 재유행에 모두 조심하길 바랍니다</p>
</div>
</body>
- 문서 안 div에 뜨는 팝업 광고
|
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<style>
#popup{
display: none;
position: absolute;
width: 300px;
height: 300px;
border: 1px solid #ccc;
background-color: #fff;
z-index: 1000;
}
#popup>.title{
padding: 5px;
border: 1px solid #999;
font-size: 1.2em;
font-weight: bold;
cursor: move;
background-color: #ccc;
}
#popup > .popup_close{
position: absolute;
right: 5px;
top: 5px;
width: 25px;
height: 25px;
border: 1px solid black;
text-align: center;
text-decoration: none;
color: black;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
setTimeout(function(){
popupOpen();
},2000); //2초 후에 팝업창 보임
});
//★중요 => body에서 onclick 함수 호출되기에 onload 전에 미리 함수 선언해야 함
function popupOpen(){
$('#popup').css({
left:100, //위치 조정
top:100
}).show(500);
}
function popupClose(){
$('#popup').hide();
}
</script>
</head>
<body>
<h1>여기는 메인화면</h1>
<p>여기는 메인 페이지 내용</p>
<img src="../images/Koala.jpg" alt="">
<div id="popup">
<div class="title">공지사항</div> <!--팝업창 제목-->
<a href="#" class="popup_close" onclick="popupClose();">X</a>
<div class="content">
<p>제이쿼리 실무 공부</p>
<p>8월 1일 UI 구현</p>
<p>nodejs와 react 수업 시작</p>
</div>
</div>
</body>
|
cs |
-> 플러그인 사용해 드래그 기능 추가, show 효과 적용
|
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<style>
#popup{
display: none;
position: absolute;
width: 300px;
height: 300px;
border: 1px solid #ccc;
background-color: #fff;
z-index: 1000;
}
#popup>.title{
padding: 5px;
border: 1px solid #999;
font-size: 1.2em;
font-weight: bold;
cursor: move;
background-color: #ccc;
}
#popup > .popup_close{
position: absolute;
right: 5px;
top: 5px;
width: 25px;
height: 25px;
border: 1px solid black;
text-align: center;
text-decoration: none;
color: black;
}
</style>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script> <!--라이브러리-->
<script>
$(function(){
setTimeout(function(){
popupOpen();
},2000);
$('#popup').draggable();
});
//★중요 => body onclick에서 호출되는 함수는 onload 전에 미리 호출해놔야 함
function popupOpen(){
$('#popup').css({
left:100,
top:100
}).show('blind',500);
}
function popupClose(){
$('#popup').hide('explode');
}
</script>
</head>
<body>
<h1>여기는 메인화면</h1>
<p>여기는 메인 페이지 내용</p>
<img src="../images/Koala.jpg" alt="">
<div id="popup">
<div class="title">공지사항</div> <!--팝업창 제목-->
<a href="#" class="popup_close" onclick="popupClose();">X</a>
<div class="content">
<p>제이쿼리 실무 공부</p>
<p>8월 1일 UI 구현</p>
<p>nodejs와 react 수업 시작</p>
</div>
</div>
</body>
|
cs |
////
플러그인을 사용하면서 css를 밑에 두거나 js파일 내용이 손상돼 실행이 안되는 등 가끔 오류가 발생했다. 더욱 주의하고 이용해야겠다.
'Programming > 국비학원' 카테고리의 다른 글
| 220722 - 제이쿼리 - ui 플러그인 (0) | 2022.07.23 |
|---|---|
| 220721 - 제이쿼리 - 이미지 슬라이드 구현 (0) | 2022.07.22 |
| 220719 - 제이쿼리 - 실습 예제 (0) | 2022.07.21 |
| 220718 - 제이쿼리 - 애니메이션 큐(queue), jquery-ui 플러그인 (0) | 2022.07.19 |
| 220715 - 제이쿼리 - 애니메이션 (기본 시각 효과, 사용자 정의 효과) (0) | 2022.07.17 |
