2023/12/07 선거문자 table → ul로 변경

This commit is contained in:
subsub 2023-12-07 12:41:45 +09:00
parent b0f34774ec
commit c6cfaba194
2 changed files with 111 additions and 88 deletions

View File

@ -596,7 +596,8 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.sub .heading i.election_btn3 {background-image: url(/publish/images/content/print_icon2.png); width: 20px; height: 19px; margin: 0 3px 2px 0;} .sub .heading i.election_btn3 {background-image: url(/publish/images/content/print_icon2.png); width: 20px; height: 19px; margin: 0 3px 2px 0;}
/* 2023/12/01 선거문자 - 20건문자(수동문자)전송 추가 */ /* 2023/12/01 선거문자 - 20건문자(수동문자)전송 추가 */
.sub .election .receipt_number_table_wrap .listType{height:346px;} /* .sub .election .receipt_number_table_wrap .listType{height:346px;} */
.sub .election .receipt_number_table_wrap .listType{height:351px;}
.sub .election .receipt_number_table_wrap .receipt_number_table tbody{height:calc(100% - 38px);} .sub .election .receipt_number_table_wrap .receipt_number_table tbody{height:calc(100% - 38px);}
.sub .election .receipt_number_table_wrap .receipt_number_table thead tr,.sub .election .receipt_number_table_wrap .receipt_number_table tbody tr{border-top:0;} .sub .election .receipt_number_table_wrap .receipt_number_table thead tr,.sub .election .receipt_number_table_wrap .receipt_number_table tbody tr{border-top:0;}
.sub .election .receipt_number_table_wrap .receipt_number_table th,.sub .election .receipt_number_table_wrap .receipt_number_table td{position:relative;} .sub .election .receipt_number_table_wrap .receipt_number_table th,.sub .election .receipt_number_table_wrap .receipt_number_table td{position:relative;}
@ -622,6 +623,25 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.sub .election .list_bottom .list_bottom_right .btn_yellow{display:inline-flex;align-items:center;padding:0 10px;} .sub .election .list_bottom .list_bottom_right .btn_yellow{display:inline-flex;align-items:center;padding:0 10px;}
.sub .election .list_bottom .list_bottom_right .btn_yellow i.qmMark{background:url(/publish/images/content/qmIcon_black.png) no-repeat center;margin:0 0 0 2px;} .sub .election .list_bottom .list_bottom_right .btn_yellow i.qmMark{background:url(/publish/images/content/qmIcon_black.png) no-repeat center;margin:0 0 0 2px;}
/* 2023/12/07 선거문자 - 20건문자(수동문자) 전송 추가 table에서 ul로 변경 */
.sub .election .receipt_number_table_wrap .table_ul{display:flex;flex-wrap:wrap;text-align:center;align-content:flex-start;}
.sub .election .receipt_number_table_wrap .table_ul li{position:relative;display:flex;border:0;background:transparent;justify-content:center;align-items:center;}
.sub .election .receipt_number_table_wrap .table_ul li::after{position:absolute;content:"";width:1px;height:16px;background:#d4d4d4;right:0;top:50%;transform:translateY(-50%);}
.sub .election .receipt_number_table_wrap .table_ul li:nth-child(2n)::after{display:none;}
.sub .election .receipt_number_table_wrap .thead_ul li:nth-child(odd){width:60px;}
.sub .election .receipt_number_table_wrap .thead_ul li:nth-child(even){width:calc((100% - 120px)/2);}
.sub .election .receipt_number_table_wrap .thead_ul{position:relative;border-bottom:1px solid #a2a2a2;}
.sub .election .receipt_number_table_wrap .thead_ul::after{position:absolute;content:"";width:100%;height:1px;background:#e5e6e7;}
.sub .election .receipt_number_table_wrap .thead_ul li{height:38px;font-size:16px;font-weight:400;background:#e8e8e8;}
.sub .election .receipt_number_table_wrap .thead_ul li button{margin:-4px 1px 0 1px;}
.sub .election .receipt_number_table_wrap .thead_ul li .btn_sort_up{margin:-4px 0 0 4px;}
.sub .election .receipt_number_table_wrap .tbody_ul{position:relative;height:calc(100% - 40px);overflow:hidden;}
.sub .election .receipt_number_table_wrap .tbody_ul::after{position:absolute;content:"";width:100%;height:100%;background:url(/publish/images/content/tbody_li_line.png) left 0px;left:0;top:0;}
.sub .election .receipt_number_table_wrap .tbody_ul li{width:calc(100%/2);height:31px;justify-content:flex-start;}
.sub .election .receipt_number_table_wrap .tbody_ul li .input_wrap{position:relative;width:60px;}
.sub .election .receipt_number_table_wrap .tbody_ul li .input_wrap::after{position:absolute;content:"";width:1px;height:16px;background:#d4d4d4;right:0;top:50%;transform:translateY(-50%);}
.sub .election .receipt_number_table_wrap .tbody_ul li label{width:calc(100% - 60px);}
/* send_bottom */ /* send_bottom */
.send_bottom {position: relative;margin: 60px 0 0 0;} .send_bottom {position: relative;margin: 60px 0 0 0;}
.send_bottom .bottom_content {background-color: #fff;padding: 40px;border-radius: 10px;} .send_bottom .bottom_content {background-color: #fff;padding: 40px;border-radius: 10px;}

View File

@ -30,7 +30,7 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$(".receipt_number_table tbody").selectable({ $(".receipt_number_table_wrap .tbody_ul").selectable({
selecting: function (event, ui) { selecting: function (event, ui) {
$(ui.selecting).find("input[type='checkbox']").attr("checked", "checked"); $(ui.selecting).find("input[type='checkbox']").attr("checked", "checked");
}, },
@ -47,14 +47,12 @@
unselected: function (event, ui) { unselected: function (event, ui) {
$(ui.unselected).find("input[type='checkbox']").removeAttr("checked"); $(ui.unselected).find("input[type='checkbox']").removeAttr("checked");
}, },
filter: "td" filter: "li"
}); });
$(".receipt_number_table tbody tr.ui-selectee").removeClass("ui-selectee");
onlongclick(".btn_check_one", 1000, function () { onlongclick(".btn_check_one", 1000, function () {
var checkbox = $('[name=receipt_number_check]'); var checkbox = $('[name=receipt_number_check]');
publishCommon.longMousePressCheck(checkbox, 10); publishCommon.longMousePressCheck(checkbox, 300);
}); });
$(".btn_check_one").click(function(){ $(".btn_check_one").click(function(){
@ -1335,7 +1333,7 @@
</div> </div>
<div class="receipt_num_midde receipt_number_table_wrap"> <div class="receipt_num_midde receipt_number_table_wrap">
<div class="listType list"> <div class="listType list">
<table class="receipt_number_table"> <!-- <table class="receipt_number_table">
<colgroup> <colgroup>
<col style="width:60px;"> <col style="width:60px;">
<col style="width:calc((100% - 60px)/2);"> <col style="width:calc((100% - 60px)/2);">
@ -1365,82 +1363,10 @@
<input type="checkbox" id="check2" name="receipt_number_check"> <input type="checkbox" id="check2" name="receipt_number_check">
<label for="check2">010-1234-5678</label></td> <label for="check2">010-1234-5678</label></td>
</tr> </tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check3" name="receipt_number_check">
<label for="check3">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check4" name="receipt_number_check">
<label for="check4">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check5" name="receipt_number_check">
<label for="check5">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check6" name="receipt_number_check">
<label for="check6">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check7" name="receipt_number_check">
<label for="check7">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check8" name="receipt_number_check">
<label for="check8">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check9" name="receipt_number_check">
<label for="check9">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check10" name="receipt_number_check">
<label for="check10">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check11" name="receipt_number_check">
<label for="check11">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check12" name="receipt_number_check">
<label for="check12">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check13" name="receipt_number_check">
<label for="check13">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check14" name="receipt_number_check">
<label for="check14">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check15" name="receipt_number_check">
<label for="check15">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check16" name="receipt_number_check">
<label for="check16">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check17" name="receipt_number_check">
<label for="check17">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check18" name="receipt_number_check">
<label for="check18">010-1234-5678</label></td>
</tr>
<tr>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check19" name="receipt_number_check">
<label for="check19">010-1234-5678</label></td>
<td colspan="2" class="ui-widget-content">
<input type="checkbox" id="check20" name="receipt_number_check">
<label for="check20">010-1234-5678</label></td>
</tr>
</tbody> </tbody>
</table> </table> -->
<!-- <ul class="thead_ul"> <ul class="thead_ul table_ul">
<li></li> <li></li>
<li> <li>
번호 번호
@ -1452,12 +1378,88 @@
<button type="button" class="btn_sort_up"><img src="/publish/images/sortUp.png"></button> <button type="button" class="btn_sort_up"><img src="/publish/images/sortUp.png"></button>
<button type="button" class="btn_sort_down"><img src="/publish/images/sortDown.png"></button></li> <button type="button" class="btn_sort_down"><img src="/publish/images/sortDown.png"></button></li>
</ul> </ul>
<ul class="tbody_ul"> <ul class="tbody_ul table_ul">
<li class="ui-widget-content"><input type="checkbox" id="check1"></li> <li class="ui-widget-content">
<li class="ui-widget-content"><label for="check1">010-1234-5678</label></li> <div class="input_wrap"><input type="checkbox" id="check1" name="receipt_number_check"></div>
<li class="ui-widget-content"><input type="checkbox" id="check2"></li> <label for="check1">010-1234-0001</label>
<li class="ui-widget-content"><label for="check2">010-1234-5678</label></li> </li>
</ul> --> <li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check2" name="receipt_number_check"></div>
<label for="check2">010-1234-0002</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check3" name="receipt_number_check"></div>
<label for="check3">010-1234-0003</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check4" name="receipt_number_check"></div>
<label for="check4">010-1234-0004</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check5" name="receipt_number_check"></div>
<label for="check5">010-1234-0005</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check6" name="receipt_number_check"></div>
<label for="check6">010-1234-0006</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check7" name="receipt_number_check"></div>
<label for="check7">010-1234-0007</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check8" name="receipt_number_check"></div>
<label for="check8">010-1234-0008</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check9" name="receipt_number_check"></div>
<label for="check9">010-1234-0009</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check10" name="receipt_number_check"></div>
<label for="check10">010-1234-0010</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check11" name="receipt_number_check"></div>
<label for="check11">010-1234-0011</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check12" name="receipt_number_check"></div>
<label for="check12">010-1234-0012</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check13" name="receipt_number_check"></div>
<label for="check13">010-1234-0013</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check14" name="receipt_number_check"></div>
<label for="check14">010-1234-0014</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check15" name="receipt_number_check"></div>
<label for="check15">010-1234-0015</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check16" name="receipt_number_check"></div>
<label for="check16">010-1234-0016</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check17" name="receipt_number_check"></div>
<label for="check17">010-1234-0017</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check18" name="receipt_number_check"></div>
<label for="check18">010-1234-0018</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check19" name="receipt_number_check"></div>
<label for="check19">010-1234-0019</label>
</li>
<li class="ui-widget-content">
<div class="input_wrap"><input type="checkbox" id="check20" name="receipt_number_check"></div>
<label for="check20">010-1234-0020</label>
</li>
</ul>
</div> </div>
<div class="put_right"> <div class="put_right">
<button type="button" class="btnType btnType7">주소록 불러오기</button> <button type="button" class="btnType btnType7">주소록 불러오기</button>
@ -1502,7 +1504,8 @@
<div class="btn_popup_wrap"> <div class="btn_popup_wrap">
<button type="button" class="btnType btn_yellow fill btn_check_one">1명씩 선택<i class="qmMark"></i></button> <button type="button" class="btnType btn_yellow fill btn_check_one">1명씩 선택<i class="qmMark"></i></button>
<div class="error_hover_cont send_hover_cont"> <div class="error_hover_cont send_hover_cont">
<p style="line-height:1.3;">마우스를 누르고 있으면 받는사람을 연속적으로 20명까지 선택할 수 있습니다.</p> <p>휴대폰 번호 입력 시 해당 휴대폰 번호에 대한 형식이 어긋나거나 휴대폰 번호에 오류가 있는지 등을 검사하는 기능</p>
<span>(예시) 010-1234-0001(O) / 010-123-0001(X)</span>
</div> </div>
</div> </div>
</div> </div>