봉봉의 개인 블로그

2017-06-29-T 본문

학원에서 배운것들/TEA - T

2017-06-29-T

봉봉이네 2017. 6. 29. 16:39

Bootstrap 사용과 JQuery 사용해보기.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style type="text/css">
.no-padding{padding: 0 !important;}
</style>
</head>
<body>
<div class="col-sm-5 bg-success no-padding">
    <h3>학생신상카드</h3>
    <div class="">
            <button type="button" class="btn btn-default btn-sm btn-block">
                <i class="glyphicon glyphicon-play"></i>
                play
            </button>
            <button type="button" class="btn btn-primary btn-xs">
                <i class="glyphicon glyphicon-play"></i>
                play
            </button>
            <button type="button" class="btn btn-danger">
                <i class="glyphicon glyphicon-play"></i>
                play
            </button>
    </div>
    <div class="col-md-3 col-sm-6 bg-primary">1</div>
    <div class="col-md-3 col-sm-6 bg-primary">2</div>
    <div class="col-md-3 col-sm-6 bg-primary">3</div>
    <div class="col-md-3 col-sm-6 bg-primary">4</div>
</div>
<div class="col-sm-7 bg-success no-padding">
    <h3>학생상세정보</h3>
    <div class="">
    <button type="button" class="btn row">Left</button>
    </div>
    <div class="col-md-3 col-sm-6 bg-primary">1</div>
    <div class="col-md-3 col-sm-6 bg-primary">2</div>
    <div class="col-md-3 col-sm-6 bg-primary">3</div>
    <div class="col-md-3 col-sm-6 bg-primary">4</div>
</div>
<div class="">
<h3> 공백 </h3>
</div>
<div class="alert alert-danger">
alert
</div>
 
<div class="row">
    <div class="col-sm-8">
    <div class="form-group">
    <input type="text" class="form-control" id="memberIdSearchTarget" placeholder="아이디를 중복검사 먼저 실행해주세요." readonly="readonly">
    </div>
    </div>
    <div class="col-sm-4">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">
      아이디 중복검사
    </button>
    </div>
</div>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content"> 
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">회원 아이디 중복검사</h4>
      </div>
      <div class="modal-body">
      <div class="form-group">
        회원아이디 : 
        <input type="text" id="memberId" class="form-control"></div>
        <button type="button" id="memberIdSearch" class="btn btn-primary">아이디 조회</button>
        <div class="alert alert-success" id="alertsuccess" style="display: none;">사용가능</div>
        <div class="alert alert-danger" id="alertdanger" style="display: none;">사용불가</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
/*
제이쿼리 사용 메서드 설명
$('선택자').hide(); 선택대상 감추기 - style="display:none;" 과 같음
$('선택자').show(); 선택대상 대상보이기 - style="display:'';" 과 같음
$('선택자').val(); 선택된 대상에 값을 넣거나 가지고 오기
$('선택자').addClass();
$('선택자').removeClass();
*/
var check = "";
$('#memberIdSearchTarget').click(function () {
      $('#myModal').modal('show',function(){
      });
    })
$('#myModal').on('shown.bs.modal', function () {
      //alert('호출되었습니다.')
      var memberIdObj = $('#memberId');
      var memberIdSearchTargetObj = $('#memberIdSearchTarget');
      
      memberIdObj.val('');
      memberIdSearchTargetObj.val('');
      $('#memberIdSearch').click(function(){
        var value = $('#memberId').val();
        if(value == "id001"){
             $('#alertsuccess').show();
             $('#alertdanger').hide();
             check = true;
        }else{
             $('#alertsuccess').hide();
             $('#alertdanger').show();
             check = false;
        }
      });
    })
$('#myModal').on('hidden.bs.modal', function () {
      //alert('호출되었습니다.')
      var value = $('#memberId').val();
      if(check){
        $('#memberIdSearchTarget').val(value);
      }else{
        $('#memberIdSearchTarget').val("아이디를 중복체크를 다시 실행해주세요");
      }
    })
</script>
</body>
</html>
cs

위와같은 html 문서가 있다.

분석을 조금하자면 먼저 bootstrap을 사용하기 위해선 8번줄과 9번줄의 라인이 필요하게 된다.

그리고 JQuery를 사용하기 위해서는 89번줄과 90번 라인이 필요하게 된다.

다시 위에서 부터 설명하자면 15번줄과같이 class  안에 col-sm-5 <<이런건 그리드에 관련된 내용이다.

그리고 그 뒤에 bg-success 는 기본색에 관련된 내용이다 그 뒤 no-padding 은 padding을 없애준다.

18번줄과 같이 class 부분에 btn 뒤에 btn-default 는 버튼을 default 값으로 보여주고 btn-sm 은 버튼의 크기이다

그리고 btn-block 은 버튼을 화면 가득 채운다고 생각하면된다.

31번줄을 설명하자면 크기가 md 사이즈 일때는 3크기만큼 4개를 보여준다 하지만 sm 크기가 되어 버리면

6크기만큼 4개를 보여주기 때문에 2개가 나오고 아래에 또 2개가 나오게 되는것이다.

다음으로 설명할것은 39번라인의 row에 대해서 설명하자면 위에있던 속성을 다 무시하겠다고 생각하면된다.

다음으로 설명할것은 Modal 에 관해서 설명하겠다 Modal 은

이런식으로 뜨는 화면을 Modal 이라고한다.

다음으로 설명할것은 80번 라인에 style="display: none" 에 관련된것이다 이것은 보여줄것인지 안보여줄것인지를 말한다.


이제 제이쿼리에 관해서 설명하겠다.

먼저 103번줄에서 아이디가 memberIdSearchTarget 인걸 클릭하면 아이디가 myModal인 modal 이 실행되게끔 한다. 그러면 실핼되었을때 아이디가 myModal 인 modal 이실행되면 shown.bs.modal의 function이 실행된다.

다음에 설명할것은 memberIdObj.val(''); 이다 .val 를 붙여주게 되면 value의 값을 가지고 온다.


다음으로 127번줄에서 아이디가 myModal 인 model 이 close 즉 hidden 처리 되면 그안에 function이 실행되는것이다.

저작자표시

'학원에서 배운것들 > TEA - T' 카테고리의 다른 글

2017-07-12-Entity Relationship Diagram  (0) 2017.07.12
2017-07-11-T(게시판 editor)이미지 업로드 가능  (0) 2017.07.11
2017-07-10-T(mock up)  (0) 2017.07.10
2017-06-30-T  (0) 2017.06.30
2017-06-28-T  (0) 2017.06.28
공유하기 링크
'학원에서 배운것들/TEA - T' Related Articles more
Comments