lucysoo95
3 years ago
parent
e74f20eb13
commit
ec3821609c
@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<title>아이 정보 변경 </title>
|
||||
<link rel="shortcut icon" href="../../img/favicon.ico">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../../css/anypicker-all.css">
|
||||
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="../js/anypicker.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg_setting">
|
||||
<div class="wrap">
|
||||
<header class="header_wrapper">
|
||||
<a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
|
||||
<h1 class="header_title">아기 정보 입력</h1>
|
||||
<a href="#" class="side_Rbtn hidden"></a>
|
||||
</header>
|
||||
<main class="m_child_profile" id="top_move">
|
||||
<div class="profile_wrap">
|
||||
<div class="profile_header">
|
||||
|
||||
<div class="profile_list">
|
||||
<h2 class="p_sub_title">아기 사진 등록</h2>
|
||||
<div class="setting_header_child_top">
|
||||
<div>
|
||||
<p class="proimg"><img src="../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></p>
|
||||
<p class="info"><span class="name">사진을 등록해주세요</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="p_sub_title">아기 이름<span style="color:#FF9C01">*</span></h2>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="child_name" class="p_label">아기 이름</label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="" name="child_birthday" class="" placeholder="아기 이름">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="p_sub_title">아기 성별<span style="color:#FF9C01">*</span></h3>
|
||||
<div class="p_list_item gender_box">
|
||||
<button type="button" id="" name="" class="active p_btn p_border_box">
|
||||
<span class="hidden icon">체크박스</span>여자
|
||||
</button>
|
||||
<button type="button" id="" name="" class="p_btn p_border_box">
|
||||
<span class="hidden icon">체크박스</span>남자
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile_cont">
|
||||
<h2 class="p_sub_title">기본 정보 입력</h2>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="child_birthday" class="p_label">생년월일<span style="color:#FF9C01">*</span></label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="child_birthday" name="child_birthday" class="" placeholder="YYYY. MM.DD">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="birth_weight" class="p_label">출생시각</label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="birth_weight" name="birth_weight" class="" placeholder="">
|
||||
<span class="unit">시</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="birth_height" class="p_label">출생 시 몸무게</label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="birth_height" name="birth_height" class="" placeholder="">
|
||||
<span class="unit">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="birth_height" class="p_label">출생 시 키</label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="birth_height" name="birth_height" class="" placeholder="">
|
||||
<span class="unit">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="birth_height" class="p_label">출생 시 머리둘레</label>
|
||||
<div class="p_input_box">
|
||||
<input type="text" id="birth_height" name="birth_height" class="" placeholder="">
|
||||
<span class="unit">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="p_sub_title">질환</h2>
|
||||
<div class="p_list_item disease_box">
|
||||
<button type="button" id="" name="" class="active p_btn p_border_box">
|
||||
<div onclick="fncYes(this)">있음</div>
|
||||
</button>
|
||||
<button type="button" id="" name="" class="p_btn p_border_box">
|
||||
<div onclick="fncNo(this)">없음</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="select_list">
|
||||
<div class="p_list_item child_box">
|
||||
<label for="disease_fever" class="p_label">태열(신생아 여드름/지루성 피부병)</label>
|
||||
<div class="fe_input_box">
|
||||
<input type="checkbox" id="checkbox" name="scales">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p_list_item child_box">
|
||||
<label for="disease_fever" class="p_label">기타( )</label>
|
||||
<div class="fe_input_box">
|
||||
<input type="checkbox" id="checkbox" name="scales">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="p_sub_title"><span style="color:#FF9C01">*</span>표시로 되어 있는 칸은 필수 입력칸입니다.</h3>
|
||||
<div class="profile_btn_box">
|
||||
<button type="button" id="" name="" class="btns blue_btn">저장</button>
|
||||
<button type="button" id="" name="" class="btns grey_btn">건너뛰기</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$(".gender_box button, .disease_box button").on("click", function () {
|
||||
$(this).addClass("active").siblings().removeClass("active");
|
||||
})
|
||||
})
|
||||
|
||||
//질환있음
|
||||
function fncYes(e) {
|
||||
$(".select_list").show(
|
||||
"<div class='p_list_item child_box'>" +
|
||||
"<label for='disease_fever' class='p_label'>태열(신생아 여드름/지루성 피부병)</label>" +
|
||||
"<div class='fe_input_box'>" + "<input type='checkbox' id='checkbox' name='scales'>" + "</div>" + "</div>" +
|
||||
"<div class='p_list_item child_box'>" + "<label for='disease_fever' class='p_label'>기타( )</label>" + "<div class='fe_input_box'>" +
|
||||
"<input type='checkbox' id='checkbox' name='scales'>" + "</div>" + "</div>" + "</div>"
|
||||
);
|
||||
}
|
||||
|
||||
function fncNo(e) {
|
||||
$(".select_list").hide(
|
||||
"<div class='p_list_item child_box'>" +
|
||||
"<label for='disease_fever' class='p_label'>태열(신생아 여드름/지루성 피부병)</label>" +
|
||||
"<div class='fe_input_box'>" + "<input type='checkbox' id='checkbox' name='scales'>" + "</div>" + "</div>" +
|
||||
"<div class='p_list_item child_box'>" + "<label for='disease_fever' class='p_label'>기타( )</label>" + "<div class='fe_input_box'>" +
|
||||
"<input type='checkbox' id='checkbox' name='scales'>" + "</div>" + "</div>" + "</div>"
|
||||
);
|
||||
}
|
||||
|
||||
//프로필 입력
|
||||
var oArrData = [];
|
||||
|
||||
function createDataSource(s, e, sel) {
|
||||
var oArrData = [];
|
||||
|
||||
for (i = s; i < e; i++) {
|
||||
bSelected = (i === sel) ? true : false;
|
||||
oArrData.push({
|
||||
val: i.toString(),
|
||||
label: i.toString(),
|
||||
selected: bSelected
|
||||
});
|
||||
}
|
||||
|
||||
return oArrData;
|
||||
}
|
||||
|
||||
function cfFormatOutput(oSelectedValues) {
|
||||
var apo = this,
|
||||
sArrOutput = [],
|
||||
sTempStr = "",
|
||||
iTempIndex;
|
||||
for (iTempIndex = 0; iTempIndex < apo.tmp.numOfComp; iTempIndex++) {
|
||||
sArrOutput.push(oSelectedValues.values[iTempIndex].label.toString());
|
||||
}
|
||||
sTempStr = sArrOutput[0] + "." + sArrOutput[1];
|
||||
return sTempStr
|
||||
}
|
||||
|
||||
function cfParseInput(sElemValue) {
|
||||
var apo = this;
|
||||
var oArrInput = [];
|
||||
|
||||
if (sElemValue !== undefined && sElemValue !== null && sElemValue !== "") {
|
||||
sArrValue = sElemValue.split('.');
|
||||
|
||||
if (sArrValue !== undefined && sArrValue !== null && sArrValue !== "") {
|
||||
if (sArrValue.length == 1) {
|
||||
oArrInput = [sElemValue, 0];
|
||||
} else if (sArrValue.length == 2) {
|
||||
oArrInput = sArrValue;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
oArrInput = ["50", "0"];
|
||||
}
|
||||
|
||||
return oArrInput;
|
||||
}
|
||||
/*엄마,아빠,희망키*/
|
||||
var heightComponents = [{
|
||||
component: 0,
|
||||
name: "height01",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}, {
|
||||
component: 1,
|
||||
name: "height02",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}],
|
||||
heightDataSource = [{
|
||||
component: 0,
|
||||
data: createDataSource(130, 200, 100)
|
||||
}, {
|
||||
component: 1,
|
||||
data: createDataSource(0, 10, 3)
|
||||
}];
|
||||
/*출생시 체중*/
|
||||
var weightComponents = [{
|
||||
component: 0,
|
||||
name: "weight01",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}, {
|
||||
component: 1,
|
||||
name: "weight02",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}],
|
||||
weightDataSource = [{
|
||||
component: 0,
|
||||
data: createDataSource(1, 10, 100)
|
||||
}, {
|
||||
component: 1,
|
||||
data: createDataSource(0, 10, 3)
|
||||
}];
|
||||
/*출생시 키*/
|
||||
var b_heightComponents = [{
|
||||
component: 0,
|
||||
name: "height01",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}, {
|
||||
component: 1,
|
||||
name: "height02",
|
||||
label: "",
|
||||
width: "50%",
|
||||
textAlign: "center"
|
||||
}],
|
||||
b_heightDataSource = [{
|
||||
component: 0,
|
||||
data: createDataSource(30, 130, 100)
|
||||
}, {
|
||||
component: 1,
|
||||
data: createDataSource(0, 10, 3)
|
||||
}];
|
||||
|
||||
|
||||
|
||||
//사진 추가
|
||||
$(function () {
|
||||
// File Upload + Preview
|
||||
$('.input_file_upload .btn_upfile').on('click', function () {
|
||||
$(this).siblings('.upfile').trigger('click');
|
||||
});
|
||||
$('.profile_imgbox .ibtn_x').on('click', function () {
|
||||
$(this).addClass('off').siblings().find('.add_thumb')
|
||||
.addClass('off').find('img').remove();
|
||||
$(this).siblings('.upfile').val('');
|
||||
$('#append_src_img_file_0').val('');
|
||||
$('#append_300_img_file_0').val('');
|
||||
});
|
||||
$(".input_file_upload input[type=file]").change(function () {
|
||||
var file = $(this)[0].files[0];
|
||||
//console.log(file.name + "\n" + file.type + "\n" + file.size + "\n" + file.lastModifiedDate); // upfile var
|
||||
if ($(this).hasClass('file_mypage')) {
|
||||
$(this).talkImage(file, '.add_thumb');
|
||||
} else {
|
||||
$(this).displayImage(file, '.add_thumb');
|
||||
}
|
||||
$(this).siblings('.add_thumb').removeClass('off')
|
||||
.parent().siblings('.ibtn_x').removeClass('off');
|
||||
});
|
||||
$.fn.extend({
|
||||
// Upload preview Function
|
||||
displayImage: function (file, classname) {
|
||||
if (typeof FileReader !== "undefined") {
|
||||
// var container = document.getElementsByClassName(classname),
|
||||
// img = document.createElement("img"),
|
||||
// reader;
|
||||
$('#add_thumb').addClass('off').find('img').remove();
|
||||
var container = $(this).siblings(classname),
|
||||
img = document.createElement("img"),
|
||||
reader;
|
||||
img.setAttribute('width', '100%'),
|
||||
img.setAttribute('height', '100%'),
|
||||
//console.log($(this));
|
||||
container.append(img);
|
||||
reader = new FileReader();
|
||||
reader.onload = (function (theImg) {
|
||||
return function (evt) {
|
||||
theImg.src = evt.target.result;
|
||||
};
|
||||
}(img));
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue