정수빈
2024-07-19
2024/07/19 주소록관리 > 주소록 대량등록 select 추가
@725b1087089bd6ee58c7053e9187eb4f1ed0be31
--- src/main/webapp/publish/adrbook1.html
+++ src/main/webapp/publish/adrbook1.html
... | ... | @@ -99,61 +99,153 @@ |
| 99 | 99 |
<!-- table --> |
| 100 | 100 |
<div class="adr_excel"> |
| 101 | 101 |
<!-- thead --> |
| 102 |
+ <div class="adr_hd select_adr_hd"> |
|
| 103 |
+ <div></div> |
|
| 104 |
+ <div> |
|
| 105 |
+ <label for="" class="label"></label> |
|
| 106 |
+ <select name="" id=""> |
|
| 107 |
+ <option value="">선택하기</option> |
|
| 108 |
+ <option value="">이름</option> |
|
| 109 |
+ <option value="">휴대폰</option> |
|
| 110 |
+ <option value="">[*1*]</option> |
|
| 111 |
+ <option value="">[*2*]</option> |
|
| 112 |
+ <option value="">[*3*]</option> |
|
| 113 |
+ <option value="">[*4*]</option> |
|
| 114 |
+ <option value="">메모</option> |
|
| 115 |
+ </select> |
|
| 116 |
+ </div> |
|
| 117 |
+ <div> |
|
| 118 |
+ <label for="" class="label"></label> |
|
| 119 |
+ <select name="" id=""> |
|
| 120 |
+ <option value="">선택하기</option> |
|
| 121 |
+ <option value="">이름</option> |
|
| 122 |
+ <option value="">휴대폰</option> |
|
| 123 |
+ <option value="">[*1*]</option> |
|
| 124 |
+ <option value="">[*2*]</option> |
|
| 125 |
+ <option value="">[*3*]</option> |
|
| 126 |
+ <option value="">[*4*]</option> |
|
| 127 |
+ <option value="">메모</option> |
|
| 128 |
+ </select> |
|
| 129 |
+ </div> |
|
| 130 |
+ <div> |
|
| 131 |
+ <label for="" class="label"></label> |
|
| 132 |
+ <select name="" id=""> |
|
| 133 |
+ <option value="">이름</option> |
|
| 134 |
+ <option value="">휴대폰</option> |
|
| 135 |
+ <option value="">[*1*]</option> |
|
| 136 |
+ <option value="">[*2*]</option> |
|
| 137 |
+ <option value="">[*3*]</option> |
|
| 138 |
+ <option value="">[*4*]</option> |
|
| 139 |
+ <option value="">메모</option> |
|
| 140 |
+ </select> |
|
| 141 |
+ </div> |
|
| 142 |
+ <div> |
|
| 143 |
+ <label for="" class="label"></label> |
|
| 144 |
+ <select name="" id=""> |
|
| 145 |
+ <option value="">선택하기</option> |
|
| 146 |
+ <option value="">이름</option> |
|
| 147 |
+ <option value="">휴대폰</option> |
|
| 148 |
+ <option value="">[*1*]</option> |
|
| 149 |
+ <option value="">[*2*]</option> |
|
| 150 |
+ <option value="">[*3*]</option> |
|
| 151 |
+ <option value="">[*4*]</option> |
|
| 152 |
+ <option value="">메모</option> |
|
| 153 |
+ </select> |
|
| 154 |
+ </div> |
|
| 155 |
+ <div> |
|
| 156 |
+ <label for="" class="label"></label> |
|
| 157 |
+ <select name="" id=""> |
|
| 158 |
+ <option value="">선택하기</option> |
|
| 159 |
+ <option value="">이름</option> |
|
| 160 |
+ <option value="">휴대폰</option> |
|
| 161 |
+ <option value="">[*1*]</option> |
|
| 162 |
+ <option value="">[*2*]</option> |
|
| 163 |
+ <option value="">[*3*]</option> |
|
| 164 |
+ <option value="">[*4*]</option> |
|
| 165 |
+ <option value="">메모</option> |
|
| 166 |
+ </select> |
|
| 167 |
+ </div> |
|
| 168 |
+ <div> |
|
| 169 |
+ <label for="" class="label"></label> |
|
| 170 |
+ <select name="" id=""> |
|
| 171 |
+ <option value="">선택하기</option> |
|
| 172 |
+ <option value="">이름</option> |
|
| 173 |
+ <option value="">휴대폰</option> |
|
| 174 |
+ <option value="">[*1*]</option> |
|
| 175 |
+ <option value="">[*2*]</option> |
|
| 176 |
+ <option value="">[*3*]</option> |
|
| 177 |
+ <option value="">[*4*]</option> |
|
| 178 |
+ <option value="">메모</option> |
|
| 179 |
+ </select> |
|
| 180 |
+ </div> |
|
| 181 |
+ <div> |
|
| 182 |
+ <label for="" class="label"></label> |
|
| 183 |
+ <select name="" id=""> |
|
| 184 |
+ <option value="">선택하기</option> |
|
| 185 |
+ <option value="">이름</option> |
|
| 186 |
+ <option value="">휴대폰</option> |
|
| 187 |
+ <option value="">[*1*]</option> |
|
| 188 |
+ <option value="">[*2*]</option> |
|
| 189 |
+ <option value="">[*3*]</option> |
|
| 190 |
+ <option value="">[*4*]</option> |
|
| 191 |
+ <option value="">메모</option> |
|
| 192 |
+ </select> |
|
| 193 |
+ </div> |
|
| 194 |
+ </div> |
|
| 102 | 195 |
<div class="adr_hd"> |
| 103 | 196 |
<div> |
| 104 | 197 |
<label for="" class="label">전체 선택</label> |
| 105 | 198 |
<input type="checkbox"> |
| 106 | 199 |
</div> |
| 107 | 200 |
<div> |
| 108 |
- 구분 |
|
| 201 |
+ A |
|
| 109 | 202 |
<div class="sort_wrap"> |
| 110 | 203 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 111 | 204 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 112 | 205 |
</div> |
| 113 | 206 |
</div> |
| 114 | 207 |
<div> |
| 115 |
- 이름 |
|
| 208 |
+ B |
|
| 116 | 209 |
<div class="sort_wrap"> |
| 117 | 210 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 118 | 211 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 119 | 212 |
</div> |
| 120 | 213 |
</div> |
| 121 | 214 |
<div> |
| 122 |
- 휴대폰 |
|
| 215 |
+ C |
|
| 123 | 216 |
<div class="sort_wrap"> |
| 124 | 217 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 125 | 218 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 126 | 219 |
</div> |
| 127 | 220 |
</div> |
| 128 | 221 |
<div> |
| 129 |
- [*1*] |
|
| 222 |
+ D |
|
| 130 | 223 |
<div class="sort_wrap"> |
| 131 | 224 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 132 | 225 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 133 | 226 |
</div> |
| 134 | 227 |
</div> |
| 135 | 228 |
<div> |
| 136 |
- [*2*] |
|
| 229 |
+ E |
|
| 137 | 230 |
<div class="sort_wrap"> |
| 138 | 231 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 139 | 232 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 140 | 233 |
</div> |
| 141 | 234 |
</div> |
| 142 | 235 |
<div> |
| 143 |
- [*3*] |
|
| 236 |
+ F |
|
| 144 | 237 |
<div class="sort_wrap"> |
| 145 | 238 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 146 | 239 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 147 | 240 |
</div> |
| 148 | 241 |
</div> |
| 149 | 242 |
<div> |
| 150 |
- [*4*] |
|
| 243 |
+ G |
|
| 151 | 244 |
<div class="sort_wrap"> |
| 152 | 245 |
<button type="button"><img src="/publish/images/sortUp.png"alt="오름차순으로 분류"></button> |
| 153 | 246 |
<button type="button"><img src="/publish/images/sortDown.png"alt="내림차순으로 분류"></button> |
| 154 | 247 |
</div> |
| 155 | 248 |
</div> |
| 156 |
- <div>메모</div> |
|
| 157 | 249 |
</div> |
| 158 | 250 |
<!-- tbody --> |
| 159 | 251 |
<div class="adr_bd_wrap"> |
... | ... | @@ -169,7 +261,6 @@ |
| 169 | 261 |
<div>변수2</div> |
| 170 | 262 |
<div>변수3</div> |
| 171 | 263 |
<div>변수4</div> |
| 172 |
- <div>메모1</div> |
|
| 173 | 264 |
</div> |
| 174 | 265 |
<div class="adr_bd error"> |
| 175 | 266 |
<div> |
... | ... | @@ -183,7 +274,7 @@ |
| 183 | 274 |
<div>변수2</div> |
| 184 | 275 |
<div>변수3</div> |
| 185 | 276 |
<div>변수4</div> |
| 186 |
- <div>메모1</div> |
|
| 277 |
+ |
|
| 187 | 278 |
</div> |
| 188 | 279 |
<div class="adr_bd"> |
| 189 | 280 |
<div> |
... | ... | @@ -197,7 +288,7 @@ |
| 197 | 288 |
<div>변수2</div> |
| 198 | 289 |
<div>변수3</div> |
| 199 | 290 |
<div>변수4</div> |
| 200 |
- <div>메모1</div> |
|
| 291 |
+ |
|
| 201 | 292 |
</div> |
| 202 | 293 |
<div class="adr_bd"> |
| 203 | 294 |
<div> |
... | ... | @@ -211,7 +302,7 @@ |
| 211 | 302 |
<div>변수2</div> |
| 212 | 303 |
<div>변수3</div> |
| 213 | 304 |
<div>변수4</div> |
| 214 |
- <div>메모1</div> |
|
| 305 |
+ |
|
| 215 | 306 |
</div> |
| 216 | 307 |
<div class="adr_bd"> |
| 217 | 308 |
<div> |
... | ... | @@ -225,7 +316,7 @@ |
| 225 | 316 |
<div>변수2</div> |
| 226 | 317 |
<div>변수3</div> |
| 227 | 318 |
<div>변수4</div> |
| 228 |
- <div>메모1</div> |
|
| 319 |
+ |
|
| 229 | 320 |
</div> |
| 230 | 321 |
<div class="adr_bd"> |
| 231 | 322 |
<div> |
... | ... | @@ -239,7 +330,7 @@ |
| 239 | 330 |
<div>변수2</div> |
| 240 | 331 |
<div>변수3</div> |
| 241 | 332 |
<div>변수4</div> |
| 242 |
- <div>메모1</div> |
|
| 333 |
+ |
|
| 243 | 334 |
</div> |
| 244 | 335 |
<div class="adr_bd"> |
| 245 | 336 |
<div> |
... | ... | @@ -253,7 +344,7 @@ |
| 253 | 344 |
<div>변수2</div> |
| 254 | 345 |
<div>변수3</div> |
| 255 | 346 |
<div>변수4</div> |
| 256 |
- <div>메모1</div> |
|
| 347 |
+ |
|
| 257 | 348 |
</div> |
| 258 | 349 |
<div class="adr_bd"> |
| 259 | 350 |
<div> |
... | ... | @@ -267,7 +358,7 @@ |
| 267 | 358 |
<div>변수2</div> |
| 268 | 359 |
<div>변수3</div> |
| 269 | 360 |
<div>변수4</div> |
| 270 |
- <div>메모1</div> |
|
| 361 |
+ |
|
| 271 | 362 |
</div> |
| 272 | 363 |
<div class="adr_bd"> |
| 273 | 364 |
<div> |
... | ... | @@ -281,7 +372,6 @@ |
| 281 | 372 |
<div>변수2</div> |
| 282 | 373 |
<div>변수3</div> |
| 283 | 374 |
<div>변수4</div> |
| 284 |
- <div>메모1</div> |
|
| 285 | 375 |
</div> |
| 286 | 376 |
<div class="adr_bd"> |
| 287 | 377 |
<div> |
... | ... | @@ -295,7 +385,7 @@ |
| 295 | 385 |
<div>변수2</div> |
| 296 | 386 |
<div>변수3</div> |
| 297 | 387 |
<div>변수4</div> |
| 298 |
- <div>메모1</div> |
|
| 388 |
+ |
|
| 299 | 389 |
</div> |
| 300 | 390 |
<div class="adr_bd"> |
| 301 | 391 |
<div> |
... | ... | @@ -309,7 +399,7 @@ |
| 309 | 399 |
<div>변수2</div> |
| 310 | 400 |
<div>변수3</div> |
| 311 | 401 |
<div>변수4</div> |
| 312 |
- <div>메모1</div> |
|
| 402 |
+ |
|
| 313 | 403 |
</div> |
| 314 | 404 |
</div> |
| 315 | 405 |
</div> |
... | ... | @@ -590,10 +680,10 @@ |
| 590 | 680 |
<li class="page_last"><button><img src="/publish/images/content/page_last.png"alt=""></button></li> |
| 591 | 681 |
</ul><!-- pagination --> |
| 592 | 682 |
</div><!--// 붙여넣기 --> |
| 593 |
- </div> |
|
| 594 |
- <div class="popup_btn_wrap2" style="margin: 0 auto 30px auto;"> |
|
| 595 |
- <button type="button">등록</button> |
|
| 596 |
- <button type="button" class="tooltip-close" data-focus="adr_popup01-close" data-focus-next="popup02">닫기</button> |
|
| 683 |
+ <div class="popup_btn_wrap2" style="margin:30px auto 30px auto;padding:0 0 30px 0;"> |
|
| 684 |
+ <button type="button">등록</button> |
|
| 685 |
+ <button type="button" class="tooltip-close" data-focus="adr_popup01-close" data-focus-next="popup02">닫기</button> |
|
| 686 |
+ </div> |
|
| 597 | 687 |
</div> |
| 598 | 688 |
</div> |
| 599 | 689 |
</div><!--// 주소록 대량등록 팝업 --> |
--- src/main/webapp/publish/css/popupLayer.css
+++ src/main/webapp/publish/css/popupLayer.css
... | ... | @@ -83,7 +83,7 @@ |
| 83 | 83 |
.adr_excel .sort_wrap button:nth-child(2) img {margin-left: -3px;}
|
| 84 | 84 |
|
| 85 | 85 |
/* 주소록 대량등록 colgruop */ |
| 86 |
-.adr_excel .adr_hd>div:nth-child(1), .adr_excel .adr_bd>div:nth-child(1) {width: 40px;}
|
|
| 86 |
+/* .adr_excel .adr_hd>div:nth-child(1), .adr_excel .adr_bd>div:nth-child(1) {width: 40px;}
|
|
| 87 | 87 |
.adr_excel .adr_hd>div:nth-child(2), .adr_excel .adr_bd>div:nth-child(2) {width: 9%;}
|
| 88 | 88 |
.adr_excel .adr_hd>div:nth-child(3), .adr_excel .adr_bd>div:nth-child(3) {width: 10%;}
|
| 89 | 89 |
.adr_excel .adr_hd>div:nth-child(4), .adr_excel .adr_bd>div:nth-child(4) {width: 19%;}
|
... | ... | @@ -91,7 +91,12 @@ |
| 91 | 91 |
.adr_excel .adr_hd>div:nth-child(6), .adr_excel .adr_bd>div:nth-child(6) {width: 12%;}
|
| 92 | 92 |
.adr_excel .adr_hd>div:nth-child(7), .adr_excel .adr_bd>div:nth-child(7) {width: 12%;}
|
| 93 | 93 |
.adr_excel .adr_hd>div:nth-child(8), .adr_excel .adr_bd>div:nth-child(8) {width: 12%;}
|
| 94 |
-.adr_excel .adr_hd>div:nth-child(9), .adr_excel .adr_bd>div:nth-child(9) {width: 10%;}
|
|
| 94 |
+.adr_excel .adr_hd>div:nth-child(9), .adr_excel .adr_bd>div:nth-child(9) {width: 10%;} */
|
|
| 95 |
+.adr_excel .adr_hd>div,.adr_excel .adr_bd>div{width:calc((100% - 40px)/7);}
|
|
| 96 |
+.adr_excel .adr_hd>div:nth-child(1),.adr_excel .adr_bd>div:nth-child(1){width:40px;}
|
|
| 97 |
+.adr_excel .adr_hd.select_adr_hd{background:#e0e0e0;}
|
|
| 98 |
+.adr_excel .adr_hd>div select{width:calc(100% - 8px);height:36px;background:transparent url(/publish/images/select_search.png) no-repeat 90% 15px;background-size:9%;margin:-8px 0 0 0;border:0;text-align:center;line-height:1.3;}
|
|
| 99 |
+.adr_excel .adr_hd>div:last-child::after{display:none;}
|
|
| 95 | 100 |
|
| 96 | 101 |
/* 붙여넣기 colgroup */ |
| 97 | 102 |
.excel_paste .adr_hd>div:nth-child(1), .excel_paste .adr_bd>div:nth-child(1) {width: 40px;}
|
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?