개발 일지개인 프로젝트STEAM IC.

게시글 수정 및 디자인

게시글이 수정될 때는 제목과 내용이 그대로 나오듯이 앱 데이터도 그대로 나와야 한다.

그래서 다음과 같이 JQuery로 구현했다.

hidden 옵션이 적용된 input 태그 안에 id_app_name에 value 값으로 조건을 잡았다.

그리고 있다면 게시글을 생성할 때와 마찬가지로 마크업 문법을 쓰려고 append()와

attr()를 찾아서 구현했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
$(function(){
    //alert('함수 실행');
    if($('input#id_app_name').val() != ''){
    $('.data_area').append($('<span/>').attr('class', 'app_image'));
    $('.app_image').append($('<img/>').attr('class', 'header_image'));
    $('.header_image').attr('width', '124px');
    $('.header_image').attr('height', '49px');
    $('.header_image').attr('style', 'max-width: none; padding: 1px; border: 1px solid rgb(221, 221, 221); vertical-align: top;');
    $('.header_image').attr('src', $('input#id_app_image').val());
    $('.data_area').append($('<span/>').attr('class', 'app_content'));
    $('.app_content').append($('<span/>').attr('class', 'app_name'));
    $('.app_name').attr('style', 'font-size: 0.9em; font-weight: bold;');
    $('.app_name').html("&nbsp;" + $('input#id_app_name').val());
    $('.app_content').append($('<span/>').attr('class', 'app_price'));
    $('.app_price').attr('style', 'font-size: 0.8em; font-weight: bold; color: #999;');
    $('.app_price').html("(" + $('input#id_app_price').val() + ")");
    $('.app_content').append($('<span/>').attr('class', 'app_store_link'));
    $('.app_store_link').append($('<a/>').attr('class', 'app_link'));
    $('.app_link').attr('style', 'font-size: 0.9em; font-weight: bold; color: #2a4752; display: block;');
    $('.app_link').attr('href', $('input#id_app_link').val());
    $('.app_link').html("&nbsp;" + $('input#id_app_link').val());
    }
});
</script>

게시글의 디테일한 화면에서도 앱의 정보를 표시해야 했기 때문에 table을 사용해서 다음과 같은 정보를 표현했다.

나중에 더 좋은 위치와 디자인을…ㅠㅠ!!

Share