정이솔
3 years ago
parent
404ac7264d
commit
71470df6d6
@ -0,0 +1,206 @@
|
||||
<!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, viewport-fit=cover" />
|
||||
<link rel="shortcut icon" href="../img/favicon.ico">
|
||||
<link rel="stylesheet" href="/src/main/webapp/WEB-INF/views/ftl/m/">
|
||||
<link rel="stylesheet" href="../../css/style.css">
|
||||
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
|
||||
<script src="../js/swiper.min.js"></script>
|
||||
<script src="../js/jquery_popupoverlay.js"></script>
|
||||
<script src="../js/design.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- wrap -->
|
||||
<div class="wrap">
|
||||
<!-- header_sub -->
|
||||
<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>
|
||||
<!-- //header_sub -->
|
||||
<div class="community_write community_view01">
|
||||
<div class="between cont_space">
|
||||
<div class="tag_cont">
|
||||
<span id="yellow">자유글</span>
|
||||
<span id="blue">기록</span>
|
||||
<span id="green">이유식</span>
|
||||
<span id="red">칼럼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="community_write_review">
|
||||
<div class="item">
|
||||
<p>제품명</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>판매처</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>구매평</p>
|
||||
<div class="star">
|
||||
<img src="../../img/nutrition/nutrition_babyfood_search_star_on.png" alt="">
|
||||
<img src="../../img/nutrition/nutrition_babyfood_search_star_on.png" alt="">
|
||||
<img src="../../img/nutrition/nutrition_babyfood_search_star_on.png" alt="">
|
||||
<img src="../../img/nutrition/nutrition_babyfood_search_star_on.png" alt="">
|
||||
<img src="../../img/nutrition/nutrition_babyfood_search_star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--write_basic-->
|
||||
<div class="write_basic">
|
||||
<!-- textarea -->
|
||||
<textarea style="resize:none" placeholder="내용을 입력하세요."></textarea>
|
||||
|
||||
<button type="button" class="camera_button">
|
||||
<label for="image-upload">
|
||||
<img src="../../img/community/ico_camera.png" alt="">
|
||||
</label>
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*;capture=camera"
|
||||
id="image-upload"
|
||||
style="display:none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="img_cont" id="imagePreview">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- community_write_tag-->
|
||||
<div class="community_write_tag">
|
||||
<input type="text" placeholder="# 태그를 입력하세요">
|
||||
</div>
|
||||
<!-- <ul class="community_write_tag_result">
|
||||
<input type="hidden" name="tag_${item_index}" value="">
|
||||
</ul> -->
|
||||
<!-- //community_write_tag -->
|
||||
|
||||
<div class="write_submit">
|
||||
<a>등록하기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// 클래스 추가 삭제시
|
||||
$(".li_check>li").click(function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (!$(this).hasClass("active")) {
|
||||
$(this).siblings().removeClass("active");
|
||||
$(this).addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
/*********항목 추가*********/
|
||||
var $add_btn = $(".vote_community_add_btn");
|
||||
var add_vote_tags = '<div class="vote_community_write_category">' +
|
||||
'<input type="text" placeholder="">' +
|
||||
'</div>';
|
||||
$add_btn.on("click", function () {
|
||||
$(".vote_community_list").append(add_vote_tags);
|
||||
}); //
|
||||
|
||||
/*********사진 추가*********/
|
||||
$(function () {
|
||||
// File Upload + Preview
|
||||
$('.input_file_upload .btn_upfile').on('click', function () {
|
||||
$(this).siblings('.upfile').trigger('click');
|
||||
});
|
||||
$('.input_file_upload .ibtn_x').on('click', function () {
|
||||
$(this).addClass('off').siblings('.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').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);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
var $add_btn = $("#add_pic_btn");
|
||||
var add_pic_tags = '<div class="add_pic_list_item">' +
|
||||
'<div class="input_file_upload">' +
|
||||
'<input type="file" id="append_src_img_file_0" name="append_src_img_file_0" accept="image/*;capture=camera" class="upfile">' +
|
||||
'<button type="button" class="btn_upfile"></button>' +
|
||||
'<div id="add_thumb" class="add_thumb">' +
|
||||
'<img src="http://www.ghealthplaza.com/ghealth/html/ghealthHv2.0/open/20190901/img/community/upload_img.jpg" alt="사진추가하기">' +
|
||||
'</div>'
|
||||
'<button type="button" id="" class="ibtn_x off">삭제</button> ' +
|
||||
'</div>' +
|
||||
'</div>;';
|
||||
$add_btn.on("click", function () {
|
||||
$(".add_pic_list_box").append(add_pic_tags);
|
||||
});
|
||||
|
||||
var tag_index = $(tag_index);
|
||||
|
||||
$("#b_tag_add").on("click", function (e) {
|
||||
var input = $('#input_tag').val();
|
||||
var tag = '<li id="li_tag_' + tag_index + '" class = "li_tag">' + input + '<span class="tag_close_btn" id="tag_' + tag_index + '" onclick="javascript:tag_del(' + tag_index + ')"></span>'
|
||||
+ '<input type="hidden" name="tag_' + tag_index + '" value="' + input + '"></li>';
|
||||
$(".community_write_tag_result").append(tag);
|
||||
$('#input_tag').val('');
|
||||
++tag_index;
|
||||
});
|
||||
|
||||
var $tag_btn = $(".community_write_tag");
|
||||
var add_tags = '<ul class="community_write_tag_result">' + '<li>장난감<span class="tag_close_btn"></span></li>' +
|
||||
'</ul>';
|
||||
$tag_btn.on("click", function () {
|
||||
$(".community_write_tag").append(add_tags);
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,103 @@
|
||||
<!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, viewport-fit=cover" />
|
||||
<link rel="shortcut icon" href="../../img/favicon.ico">
|
||||
<link rel="stylesheet" href="/src/main/webapp/WEB-INF/views/ftl/m/">
|
||||
<link rel="stylesheet" href="../../css/style.css">
|
||||
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<script src="../../js/swiper.min.js"></script>
|
||||
<script src="../../js/jquery_popupoverlay.js"></script>
|
||||
<script src="../../js/design.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- wrap -->
|
||||
<div class="wrap">
|
||||
<!-- header_sub -->
|
||||
<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>
|
||||
<!-- //header_sub -->
|
||||
<div class="community_write community_view01">
|
||||
<div class="between cont_space">
|
||||
<div class="tag_cont">
|
||||
<span id="yellow">자유글</span>
|
||||
<!-- <span id="blue">기록</span>
|
||||
<span id="green">이유식</span>
|
||||
<span id="red">칼럼</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="write_title_cont">
|
||||
<input class="write_title" type="text" placeholder="제목을 입력하세요">
|
||||
</div>
|
||||
|
||||
<!--write_basic-->
|
||||
<div class="write_basic">
|
||||
<!-- textarea -->
|
||||
<textarea style="resize:none" placeholder="내용을 입력하세요."></textarea>
|
||||
|
||||
<label for="image-upload" class="camera_button">
|
||||
<img src="../../img/community/ico_camera.png" alt="">
|
||||
</label>
|
||||
<input type="file" multiple accept="image/*;capture=camera" id="image-upload" style="display:none;">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="preview">
|
||||
|
||||
</div> -->
|
||||
|
||||
<!-- community_write_tag-->
|
||||
<div class="community_write_tag">
|
||||
<input type="text" placeholder="여행,">
|
||||
</div>
|
||||
|
||||
<div class="write_submit">
|
||||
<a>등록하기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
// Multiple images preview in browser
|
||||
var imagesPreview = function(input, placeToInsertImagePreview) {
|
||||
|
||||
if (input.files) {
|
||||
var filesAmount = input.files.length;
|
||||
|
||||
for (i = 0; i < filesAmount; i++) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(event) {
|
||||
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$('#image-upload').on('change', function() {
|
||||
imagesPreview(this, 'div.preview');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue