이번에는 부트스트랩의 탭화면을 구현 하여 컨텐츠 내용의 가독성을 높여보도록 하겠습니다.
탭기능을 동작시키는 방법으로는 스크롤 스파이와 동일하게
HTML 태그의 속성값을 추가하는 방법과 JQUERY를 이용한 방법 이렇게 2가지 예를 들도록 하겠습니다.
HTML로 구현되는 탭화면 + 기능코드
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<ul class="nav navbar-nav nav-tabs">
<li class="active"><a href="#first" >탭화면 첫번째</a></li>
<li><a href="#second" >탭화면 두번째</a></li>
<li><a href="#third" >탭화면 마지막</a></li>
</ul>
</div>
</nav>
<div class="tab-content" style="margin-top: 80px;">
<div class="tab-pane fade active in" id="first">
<p>
첫번째 탭포커스가 위치할 내용입니다.<br/>
id="first인대 상단 네비게이션의 href속성값인 #아이디"명과 일치하는 패널이랑 맵핑을 시켜줍니다.
</p>
</div>
<div class="tab-pane fade" id="second">
<p>
두번째 탭포커스 위치할 내용입니다.<br/>
data-togge="tab"을 지정해주셔야 탭버튼으로 인식을 합니다.
</p>
</div>
<div class="tab-pane fade" id="third">
<p>
마지막 세번째 탭클릭시 보여지는 컨텐츠 내용입니다.
</p>
</div>
</div>
탭화면을 구현하기 위한 방법은
1. 네비게이션바의 탭토글을 적용하고자 할 태그에 data-toggle="tab" 라는 속성을 추가해줍니다.
2. 네비게이션바의 a태그의 href값과 각 탭패널에대한 id값을 맵핑시켜주어야 합니다.
3. tab-pane 클래스로 정의된 그룹들을 tab-content 클래스로 부모태그로 감싸주셔야 합니다.
4. 최초 로딩후 포커스를 주고자 하는 tab-pane div 영역에 active클래스와 in 클래스를 적용해줍니다.
스크립트로 탭기능 구현을 위해서는 다음 jQuery 코드를 작성해주시면 되겠습니다.
jQuery를 이용한 탭기능 구현코드
$(function(){
$('ul.nav-tabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
})
jQuery코드를 적용하실경우 data-toggle="tab" 속성들을
삭제 후 스크립트 코드를 적용해주시면 되겠습니다.
실행결과는 모두 동일하게 나옵니다
부트스트랩을 이용한 탭화면 실행 결과
부트스트랩을 이용하면 참 심플하게 화면이 구현되지 정말 매력적입니다 ^^ ㅋ
by 개발로짜
'웹개발강좌 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
|---|---|
| 부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
| 부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
| 부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
| 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
스크롤스파이는 보통 "one page content"에 사용되는 기능입니다.
스크롤을 내릴때마다 타이틀 영역이 변경되면
네비게이션메뉴의 포커스가
자동으로 이동되는 기능을 의미합니다.
간단하게 메뉴별 컨텐츠내용을 기준으로 코드를 작성 해보도록 하겠습니다.
스크롤스파이를 구현하는방법은
HTML 태그의 속성값을 지정해주는 방법과
자바스크립트를 이용한 방법 2가지가 존재합니다.
먼저 HTML 태그 속성값을 이용하여 스크롤스파이기능을 만들어 보도록 하겠습니다.
스크롤스파이 HTML방식
<nav id="menubar" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">스크롤스파이테스트</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#blog_intro">블로그소개</a></li>
<li><a href="#writer_intro">작성자소개</a></li>
</ul>
</div>
</nav>
<div style="margin-top: 100px;">
<h4 id="blog_intro"><strong>블로그소개</strong></h4>
<p>
IT Storage라는 블로그를 소개합니다.<br/>
10월초에 생성하였으며 구글링을 통한 혹은 프로젝트를 진행하면서<br/>
자주사용되는 코드를 게시를 하고자 개설을 하게되었습니다.<br/>
front-end 관련 강좌도 야금야금 진행하고있으니<br/>
자주 방문해주시면 감사하겠습니다 ^^<br/>
실시간 포스팅 글을 구독하고자 하시는 분들께서는<br/>
우측 사이드바에 존재하는 네이버 이웃추가를 통하시면<br/>
네이버 로그인시 구독란에서 저의 실시간으로 등록된 글을 확인하실 수 있습니다.<br/>
남은 포스팅 글들이 아직도 한참 남아서 언제 이글들을 모두 채울까 걱정이네요 ;;<br/>
신규 포스팅 주제글들도 있긴한대 이부분은 저도 공부를 하고 이해를 하면서 포스팅을<br/>
진행할 예정이랍니다 ㅋㅋ<br/>
많이 방문해주세요
</p>
<h4 id="writer_intro"><strong>작성자소개</strong></h4>
<p>
저는 "개발로짜"라는 닉넴을 가지고 블로그 활동을 하는 IT 블로거입니다.<br/>
전문 블로거분들처럼 자세한 내용및 블로그를 꾸미는 방법에 대해서는 미흡하나<br/>
최대한 시간을 내서 제가 알고 있는 지식선에서 문의주신 질문에 대하여 답변을 드리도록 노력하고있습니다.<br/>
항상 열심히 노력하며 발전해나가는 개발자고 되고싶어하는 개발로짜였습니다!!
</p>
</div>
위 코드에서 추가 <body> 태그에 다음과 같이 속성들을 추가해줍니다.
<body data-spy="scroll" data-target="#menubar">
네비게이션 바에 스크롤 스파이 기능을 넣고자 하는 태그에 data-spy="scroll" 이란 속성을 추가하는겁니다.
추가로 data-spy를 적용한 태그에 data-target="#네비게이션아이디" 혹은 data-target=".클래스" 속성을 추가해줍니다.
위 예제는 화면이 커지면 스크롤 스파이 테스트를 할수 없으므로 브라우저 높이를 줄여서 테스트를 진행합니다.
스크롤스파이실행결과
최초에는 블로그소개에 메뉴바에서 스크롤을 내리니
작성자내용으로 메뉴포커스가 이동되었습니다.
추가로 jquery 를이용하여 스크롤스파이를 구현해보도록 하겠습니다.
기존 <body>태그에 속성값 2가지를 추가 하셨을겁니다.
이 추가했던 부분들을 삭제한다음 스크립트 코드를 다음과 같이 작성을 해주십니다.
jQuery를 이용한 스크롤스파이 스크립트코드
$(function(){
$('body').scrollspy({ target: '#menubar' })
})
위처럼 스크립트코드를 추가하면 일반 태그 속성 적용했을때와 동일한 기능이 동작됩니다.
by 개발로짜
'웹개발강좌 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 7장 - 탭기능을 적용하여 내용의 가독성 높이기 (0) | 2014.10.24 |
|---|---|
| 부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
| 부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
| 부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
| 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
이번에는 부트스트랩을 이용하여 모달창(일명 : 레이어팝업)을 띄워보도록 하겠습니다.
모달창 출력은 "html 속성변경", "jquery를 이용한 출력"
이 2가지 방법으로 모달을 실행화면에 출력을 시킬수가 있습니다.
제일 먼저 html속성값만을 이용하여 모달창을 실행해보도록 하겠습니다.
HTML코드를 이용하여 모달 띄우기
<button class="btn btn-default" data-target="#layerpop" data-toggle="modal">모달출력버튼</button><br/>
<div class="modal fade" id="layerpop" >
<div class="modal-dialog">
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<!-- 닫기(x) 버튼 -->
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- header title -->
<h4 class="modal-title">Header</h4>
</div>
<!-- body -->
<div class="modal-body">
Body
</div>
<!-- Footer -->
<div class="modal-footer">
Footer
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
위 코드 실행하기전 모달 띄우는데 필수적인 속성은 버튼태그의 경우
data-target속성과 data-toggle속성입니다.
data-target의 value는 버튼 클릭 시 모달로 띄우고자하는
id값을 #을 붙여서 연결을 해주는 것입니다.
data-toggle의 value는 모달기능을 수행하겠다는 의미입니다.
그리고 모달창 영역에 버튼태그의 data-dismiss 속성을 적용하면 모달을 닫게하는 기능을 적용하겠다라는 의미입니다.
실행결과
위 코드를 실행하게 된다면 부드럽게 모달창이 띄어질 것입니다.
이유는 모달레이어의 클래스 부분을 보면 class속성에 "fade"라는 클래스가 추가되었기 때문입니다.
해당 클래스를 지우게 된다면 모달의 show/hide기능이 딱딱하게 보여질 것입니다
jQuery를 이용하여 모달띄우기
jquery를 이용하여 모달을 띄울경우 상단에 작성했던 html 코드를 수정하도록 하겠습니다.
모달 출력버튼에서 data-target / data-toggle 속성이 필요가 없습니다.
과감히 삭제~
그리고 삭제 된 버튼 태그에 id속성을 추가하도록 하겠습니다.
저는 버튼태그의 id="popbutton" 라고 주었습니다.
이어서 jquery 를 이용하여 버튼클릭시 모달창을 띄우는 코드는 다음과 같습니다.
버튼 클릭 모달띄우는 jquery 코드
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal();
})
})
위와 같이 정해주면 정상적으로 일반 HTML 실행결과와 동일하게 나올것입니다.
마지막으로 비동기 방식인 ajax call을 하여 모달을 띄워보도록 해보겠습니다.
이방식 역시 기존 코드를 이용하여 적용해보도록 하겠습니다.
버튼 클릭시 적용해준 modal() 함수를 하단과 같이 변경해주도록 합니다.
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal({
remote : 'layer.html'
});
})
})
기존 modal 함수에 추가 속성으로 remote를 주어
modal창에 보여줄 페이지를 layer.html에 기술하도록 합니다.
layer.html내에는 기존에 작성되었던 modal 레이아웃중 class="modal-content" 내에
정의했던 코드를 복사하여 붙여놓고 실행을 해보도록 하겠습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal({remote : 'layer.html'});
})
})
</script>
</head>
<body>
<button class="btn btn-default" id="popbutton">모달출력버튼</button><br/>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- remote ajax call이 되는영역 -->
</div>
</div>
</div>
</body>
</html>
layer.html
<!-- header --> <div class="modal-header"> <!-- 닫기(x) 버튼 --> <button type="button" class="close" data-dismiss="modal">×</button> <!-- header title --> <h4 class="modal-title">Header</h4> </div> <!-- body --> <div class="modal-body"> Body </div> <!-- Footer --> <div class="modal-footer"> Footer <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div>
페이지별 코드작성 후 실행을 하게되면
기존 실행결과들과 동일하게 나올것입니다.
by 개발로짜
'웹개발강좌 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 7장 - 탭기능을 적용하여 내용의 가독성 높이기 (0) | 2014.10.24 |
|---|---|
| 부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
| 부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
| 부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
| 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |