jQuery 여러개의 박스 겹치지 않게 만들기
id 값을 다르게 하여 만드는 샘플 입니다.
jQuery 여러개의 박스 겹치지 않게 만들기 할때 글로벌 변수를 하나 생성하고 이 값을 만들때 마다 변경하는 방식을 사용하여 서로 다른 선택자가 되게 생성을 하는 방식 입니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>여러개 만들기</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
</head>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<body>
<div id="test1" style="width: 555px; height: 400px; border: solid 1px #777"> </div>
</body>
</html>
<script>
var id_name_main = 'test1';
var id_num = 1;
function get_div_name( type, id_num ) {
if ( type == 'img' ) return 'img_' + id_num;
if ( type == 'img_border' ) return 'img_br_' + id_num;
}
function get_default_data( id_name )
{
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
var img_url = './test1.jpg'; // 이건 base64로 바로 표현 될 수 있다.
var str = '';
str += '<div id="' + id_img_b + '" style="position:absolute; border: soild 1px #f00; width: 111px; height: 111px;">';
str += ' <img id="' + id_img + '" src="' + img_url + '" width=111; height=111; style="position:absolute;left:0;top:0;" />';
str += '</div>';
return str;
}
function show_default_data()
{
id_num += 1;
var img_layer = get_default_data( id_num );
$( '#' + id_name_main ).append(img_layer);
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
// 대략 중앙에 위치 시키기
var parent_width = $('#' + id_name_main).outerWidth();
var parent_height = $('#' + id_name_main).outerHeight();
var width = $('#' + id_img).outerWidth();
var height = $('#' + id_img).outerHeight();
$('#' + id_img_b ).offset({left: parent_width/2 - width/2 - 20 + id_num * 10 } );
$('#' + id_img_b ).offset({top: parent_height/2 - height/2 - 20 + id_num * 10 } );
}
$(document).ready(function() {
show_default_data();
show_default_data();
show_default_data();
});
</script>