Programming/국비학원
220722 - 제이쿼리 - ui 플러그인
지고르
2022. 7. 23. 12:09
- dialog (알림창)
|
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
|
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery-ui.min.js"></script>
<style>
input,label{
width: 95%;
mask-border: 12px;
padding: 0.4em;
}
.dialogTitle{
font-size: 1.3em;
text-align-last: center;
color: blue;
}
</style>
<script>
$(function(){
$('#dialog').dialog({ //팝업창 설정
autoOpen:false, //자동 창 열림 막음
buttons:{ //버튼 생성
저장:function(){
var eName=$('#eventName').val();
var eDate=$('#eventDate').val();
$('<h2></h2>').html(eName+"▶"+eDate).appendTo('#output');
$('#eventName').val('');
$('#eventDate').val('');
},
초기화:function(){
$('#eventName').val('');
$('#eventDate').val('');
},
취소:function(){
$('#eventName').val('');
$('#eventDate').val('');
$('#dialog').dialog('close');
}
},
modal:true //팝업창 뒷화면 선택 불가
});
$('.dialogOpen').click(function(){
$('#dialog').dialog('open');
});
$('#eventDate').datepicker({
dateFormat:'yy년 mm월 dd일',
numberOfMonths:3 //한번에 3개월 표시
});
});
</script>
</head>
<body>
<!-- 메인페이지 -->
<h1>일정 관리하기</h1>
<button class="dialogOpen">일정 생성</button>
<hr>
<!-- 저장 장소 -->
<div id="output"></div>
<!-- 일정관리 창 -->
<div id="dialog" title="일정관리">
<h2 class="dialogTitle">일정 입력하기</h2>
<label for="eventName">일정 이름</label>
<input type="text" name="" id="eventName">
<label for="eventDate">날짜</label>
<input type="text" name="" id="eventDate">
</div>
</body>
|
cs |
- 팝업창 드래그하기
|
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<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(){
var on =false;
setTimeout(function(){
popupOpen();
},2000);
$('.title').on({
mousedown:function(){
$('#popup').draggable({ //제목 누르고 드래그
cursor:'move',
helper:'origin' //객체 본인이 움직임
});
},
mouseup:function(){
$('#popup').draggable({ //제목 외 부분 누르고 드래그
cursor:'not-allowed',
helper:'clone' //객체의 클론(css 적용X)이 움직임
});
}
});
});
function popupOpen(){
$('#popup').css({
left:200,
top:300
}).show('explode',500);
}
function popupClose(){
$('#popup').hide('explode',500);
}
</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 |
- accordion (아코디언형 목록)
|
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
|
<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(){
$('#news').accordion({
heightStyle:'content' //내용만큼 높이 설정
});
});
</script>
</head>
<body>
<div id="news">
<h3>코로나 진화 패턴이 달라졌다</h3>
<p>전세계에서 신종 코로나바이러스 감염증(COVID-19·코로나19)이 재확산하고 있다. 오미크론 변이가 주도했던 글로벌 대유행은
오미크론과는 완전히 다른 새로운 변이가 아닌 BA.5 변이 등 오미크론의 하위 변이로 무게중심이 옮겨가고 있다. </p>
<h3>UI 플러그인 공부</h3>
<p>Qui aute non amet reprehenderit do officia sint sunt esse in fugiat amet incididunt. Velit incididunt esse mollit
aute amet eiusmod aliqua labore sint cupidatat minim non non laborum. Exercitation proident aliqua irure deserunt exercitation eu esse duis. Id incididunt minim commodo aute in dolore Lorem. Magna ipsum cillum commodo eiusmod laboris sint eu. Consequat ut qui pariatur velit deserunt sint do duis fugiat. Dolore eiusmod et sunt labore adipisicing enim est ipsum tempor.
Aute non pariatur eu officia minim officia nostrud elit dolore proident. Officia deserunt magna ipsum irure nostrud voluptate
dolor. Excepteur qui officia laboris Lorem aliquip veniam anim cupidatat adipisicing Lorem. Do nulla Lorem laboris quis nulla commodo eu aliquip voluptate enim quis voluptate commodo. Commodo quis ex proident ullamco dolor magna dolor esse velit ex dolor.
Proident ut qui cupidatat incididunt enim nisi deserunt enim est magna velit. Laboris tempor aliquip laborum ea eu mollit repr
ehenderit ex culpa nulla ullamco nostrud Lorem tempor. Ea eiusmod incididunt adipisicing laborum cupidatat mollit sunt proident esse sunt.</p>
<h3>뭐가 터질지 모른다! 다양한 장르 시도하는 블록체인 게임 업계</h3>
<p>위메이드를 필두로, 컴투스, 넷마블, 카카오게임즈, 네오위즈 등 많은 대형 게임사들이 블록체인 게임을 새로운 주력 사업으로
밀고 있으며, BPMG, 게임체인, 하바, 페루자 코퍼레이션 등 신흥 세력들의 기세도 만만치 않다.</p>
</div>
</body>
|
cs |
※ ui 테마 변경 (ex. 아코디언 배경 색상)
https://jqueryui.com/themeroller/
- ui 클래스명 부여 -> 스타일 변경
https://runebook.dev/ko/docs/jqueryui/theming/css-framework
CSS Framework - 다음은 jQuery UI에서 사용하는 클래스 이름 목록입니다.
다음은 jQuery UI에서 사용하는 클래스 이름 목록입니다. 이 클래스는 애플리케이션 전체에서 시각적 일관성을 만들고 jQuery UI ThemeRoller에서 구성 요소를 테마로 지정할 수 있도록 설계되었습니다
runebook.dev
|
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
|
<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(){
$('#btnRadio').hover(function(){
$(this).addClass('ui-state-hover'); //회색 배경
},function(){
$(this).removeClass('ui-state-hover');
});
$('#btnRadio').click(function(){
$(this).toggleClass('ui-state-active'); //파란 배경
});
$('#radiobox').buttonset(); //버튼 그룹 설정
$('#radiobox>input').change(function(){
reset();
$('#output').addClass('ui-state-'+$(this).val()); //body에 작성한 value값
});
$('button').click(function(){
reset();
});
});
//내부 사용자 정의 함수
function reset(){
$('#output').attr('class','ui-widget-content ui-corner-all');
}
</script>
</head>
<body>
<div id="btnRadio" class="box ui-state-default ui-corner-all">
<p>코로나 이겨내자</p>
</div>
<div id="radiobox">
<input type="radio" name="theme" value="highlight" id="highlight">
<label for="highlight">highlight</label>
<input type="radio" name="theme" value="error" id="error">
<label for="error">error</label>
<input type="radio" name="theme" value="error-text" id="error-text">
<label for="error-text">error-text</label>
<input type="radio" name="theme" value="disabled" id="disabled">
<label for="disabled">disabled</label>
<button>RESET</button>
</div>
<div id="output" class="ui-widget-content ui-corner-all">
<p>토요일인 오는 23일엔 낮 동안 남부 일부 권역에서 소나기가 내리는 지역이 있을 전망이다. 오후 늦게 장맛비가
서해안부터 시작돼 전국으로 확대될 예정이다. 예상 누적 강수량은 최대 50㎜ 정도로 예보됐다.</p>
<p>기상청은 소나기는 전북 동부와 경상 서부 산간·내륙지방에 이날 낮 12시~오후 3시 5~20㎜ 소나기가 내릴 것으로 예상했다.</p>
</div>
</body>
|
cs |
- 라디오 관련 (버튼 삭제, 레이블만 남기기)
|
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
|
<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>
<style>
.choose input[type='radio']{
display: none;
}
.choose input[type='radio']+span{/*인접한 span*/
display: inline-block;
width: 100px;
height: 70px;
cursor: pointer;
font-size: 1.3em;
text-align: center;
line-height: 70px;
padding: 0 10px;
border: 1px solid #ccc;
background-color: none;
}
.choose input[type='radio']:checked+span{ /*체크된 라디오*/
background-color: aquamarine;
color: #fff;
}
</style>
<script>
$(function(){
});
</script>
</head>
<body>
<label for="chooseM" class="choose">
<input type="radio" id="chooseM" name="sex">
<span>남</span>
</label>
<label for="chooseF" class="choose">
<input type="radio" id="chooseF" name="sex">
<span>여</span>
</label>
</body>
|
cs |
- droppable
|
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
70
71
|
<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>
<style>
.item{
margin: 3px;
padding: 5px;
}
.item>img{
width: 100px;
height: 100px;
}
#wrap{
overflow: hidden;
border: 1px solid red;
}
#wrap>div{
float: left;
}
#dock{
position: fixed;
min-height: 120px;
width: 100%;
bottom: 0;
z-index: 1;
}
#dock>div{
float: right;
}
</style>
<script>
$(function(){
for(var i=0;i<21;i++){
var icon='<div class="ui-widget-content ui-corner-all item">';
icon+='<img src="../images/' + i + '.png">';
icon+='</div>';
$('#wrap').append(icon);
}
$('#wrap>div').draggable({
helper:'clone', //클론이 드래그됨
scroll:false,
zIndex:100
});
$('#dock').droppable({ //드롭 가능한 장소
accept:'#wrap>div', //드롭 가능 요소
drop: function(event,ui){ //드롭 시 이벤트,선택요소
$(ui.draggable).fadeOut('fast',function(){//드래그된 wrap구역 ui fadeout //callback
$(this).appendTo('#dock').fadeIn('fast'); //해당 ui dock구역에 fadein
});
}
});
$('#wrap').droppable({ //드롭 가능한 장소
accept:'#dock>div', //드롭 가능 요소
drop: function(event,ui){ //이벤트,선택요소 이름부여
$(ui.draggable).fadeOut('fast',function(){ //드롭하면 원이미지 fadeout //callback
$(this).appendTo('#wrap').fadeIn('fast'); //드롭된 클론이미지 fadein
});
}
});
});
</script>
</head>
<body>
<div id="wrap">
</div>
<div id="dock" class="ui-state-error">
</div>
</body>
|
cs |