jQuery를 이용한 SMS 수신번호 리스트 추가
이미지와 같은 부분을 jQuery를 이용해서 작업했다. 번호 입력 후 추가 버튼을 클릭하면 아래 리스트에 추가되고
리스트의 X 버튼을 클릭하면 추가된 번호가 삭제된다. 말로하면 별 것도 아닌 기능인데 이걸 구현한다는 것은..
근본 바탕이 없는 나에게는 쉬운 일은 아니었다. 번호 추가를 하는 것은 쉽다. after()를 이용하면 되니까.. 근데
문제는 리스트가 세로로 추가된다는 것이다. 01 아래에 02 이런 식이로 06 부터는 오른쪽 부분에 추가가 된다. 그건
뭐 if 열심히 써서 해결을 했는데.. 어제 미처 생각하지 못했던 문제가 삭제를 했을 경우 번호 리스트가 재정렬되어야
한다는 것이었다. 어젠 그냥 빼면 되겠지.. 생각을 했는데.. 조금만 더 생각하니 그게 얼마나 어리석은 생각이었는지..
<div class=”num_title”>받으시는 분</div>
<div class=”num_field”>
<span><input type=”text” name=”receiver” /></span>
<span><img src=”<?php echo $g4[admin_img_path]; ?>/sms_btn_add.png” class=”pointer” id=”add_number” alt=”추가” /></span>
</div>
<div class=”num_list”>
<div class=”number1″>
<ul>
</ul>
</div>
<div class=”number2″>
<ul>
</ul>
</div>
</div>
</div>
위 코드는 처음 이미지 부분을 구성하는 html 코드이다. 그리고 아래는 jQuery 코드이다.
$(function() {
$(‘#add_number’).click(function() {
var hp = $.trim($(‘input[name=receiver]’).val()).replace(/[^0-9-]/g, “”);
if(hp.length < 1) {
alert(“휴대폰번호를 입력해 주십시오.”);
return false;
}
AddNumber(hp, “ ”);
$(‘input[name=receiver]’).val(“”);
});
$(‘div.num_delete’).live(‘click’, function() {
$(this).closest(‘li’).remove();
LineUpNumber();
});
});
function AddNumber(hp, name)
{
var no;
var cnt1 = $(‘div.num_list div.number1 li’).size();
var cnt2 = $(‘div.num_list div.number2 li’).size();
if(cnt1 == 0) {
no = zerofill(1);
$(‘div.num_list div.number1 ul’).html(‘<li><div class=”no”>’ + no + ‘</div><div class=”hp”>’ + hp + ‘</div><div class=”name”>’ + name + ‘</div><div class=”num_delete”></div></li>’);
} else if(cnt1 > 0 && cnt1 < 5) {
no = zerofill(cnt1 + 1);
$(‘div.num_list div.number1 li:last’).after(‘<li><div class=”no”>’ + no + ‘</div><div class=”hp”>’ + hp + ‘</div><div class=”name”>’ + name + ‘</div><div class=”num_delete”></div></li>’);
} else if(cnt1 == 5 && cnt2 == 0) {
no = zerofill(cnt1 + 1);
$(‘div.num_list div.number2 ul’).html(‘<li><div class=”no”>’ + no + ‘</div><div class=”hp”>’ + hp + ‘</div><div class=”name”>’ + name + ‘</div><div class=”num_delete”></div></li>’);
} else if(cnt1 == 5 && cnt2 > 0 && cnt2 < 5) {
no = zerofill(cnt1 + cnt2 + 1);
$(‘div.num_list div.number2 li:last’).after(‘<li><div class=”no”>’ + no + ‘</div><div class=”hp”>’ + hp + ‘</div><div class=”name”>’ + name + ‘</div><div class=”num_delete”></div></li>’);
} else if(cnt1 == 5 && cnt2 == 5) {
alert(“수신번호를 더 이상 추가하실 수 없습니다.”);
return false;
}
}
function LineUpNumber()
{
try {
var H = new Array();
var N = new Array();
var cnt1 = $(‘div.num_list div.number1 li’).size();
var cnt2 = $(‘div.num_list div.number2 li’).size();
if(cnt1 > 0) {
$(‘div.num_list div.number1 li div.hp’).each(function() {
var hp = $(this).text().replace(/[^0-9-]/g, “”);
H.push(hp);
});
$(‘div.num_list div.number1 li div.name’).each(function() {
var name = $(this).text();
N.push(name);
});
}
if(cnt2 > 0) {
$(‘div.num_list div.number2 li div.hp’).each(function() {
var hp = $(this).text().replace(/[^0-9-]/g, “”);
H.push(hp);
});
$(‘div.num_list div.number2 li div.name’).each(function() {
var name = $(this).text();
N.push(name);
});
}
if(H.length > 0) {
$(‘div.num_list div.number1 ul’).empty();
$(‘div.num_list div.number2 ul’).empty();
for(i = 0; i < H.length; i++) {
AddNumber(H[i], N[i]);
}
}
}
finally {
H = N = null;
cnt1 = cnt2 = hp = name = null;
}
}
</script>
일단 테스트해보니 정상 작동하는 것 같은데.. 여기다 뭐 다른 거 더 추가할게 있을까? 있어도 추가하긴 힘들다. 너무
피곤해서 말이다. ㅋ 디자이너가 원하는 대로 작업을 했으니 이젠 뭐 끝내도 되겠지.. 아구~ 정말 피곤하다. ㅎㅎ
음 제가 써보려고 했는데…. jQuery 최신 js로는 live속성을 지원하지 않는다네요.
최신 jQuery에서는 live 를 지원하지 않습니다. 말씀하신 대로 on으로 대체됐습니다.
우선 live는 on으로 변경했는데 zerofill이 함수도 없구요. 정확히 돌아가는 소스파일을 첨부로 주시는게 가능하시다면 erm00@naver.com으로 쪽지나 메일 부탁드립니다. 정보 도움 많이 되었구요. 완벽한 소스로 올려주시면 다른 사람에게도 더 많은 사람에게 도움이 될 것 같습니다.
zerofill 함수는 대단한 기능을 수행하는 함수는 아닙니다. 번호 앞에 0을
추가할 뿐입니다.
제대로 작동하는 소스를 원하신다고 말씀하셨는데요.. 제가 이 코드를 공개할 때는
이런 식으로도 가능하지 않을까? 하는 생각에 공개를 한 것입니다. 위의 코드가
완벽하게 작동한다고 장담도 할 수 없는 상황에서 코드를 드리는 것은 어려운 일입니다.