부트스트랩 Jquery 사용하기
<script>
$(function(){
var $btn = $('#my-buttons-1 .btn');
$btn.on('click', function(){
});
$('#my-buttons-1 .btn').click(function(){
$(this).button('toggle');
})
$('#my-buttons-2 .btn').click(function(){
$(this).button('loading');
})
$('#my-buttons-3 .btn').click(function(){
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
}, 3000);
})
$('#my-buttons-4').click(function(){
var $btn = $(this)
$btn.button('finish');
setTimeout(function(){
$btn.button('reset');
}, 3000);
})
})
</script><div class="container">
<h2>버튼 메소드</h2>
<h4>.button('toggle') 메소드 예제</h4>
<div id="my-buttons-1" class="bs-example">
<button type="button" class="btn btn-primary">버튼</button>
</div>
<div class="clearfix"></div>
<h4>.button('loading') 메소드 예제</h4>
<div id="my-buttons-2" class="bs-example">
<button type="button" class="btn btn-primary" data-loading-text="로딩 중...">버튼</button>
</div>
<div class="clearfix"></div>
<h4>.button('reset') 메소드 예제</h4>
<div id="my-buttons-3" class="bs-example">
<button type="button" class="btn btn-primary" data-loading-text="로딩 중 ...">버튼</button>
</div>
<div class="clearfix"></div>
<h4>.button(string) 메소드 예제</h4>
<!-- data-finish-text 에 나타난 것과 같이 finish로 입력이 된 상황에서는 finish-text에 포함된 텍스트로 해당 버튼의 텍스트가 변경된다. -->
<button type="button" class="btn btn-primary" id="my-buttons-4" data-finish-text="로딩 끝">여기를 누르세요.</button>
</div>collapse-event
<!doctype html>
<html lang="ko">
<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>부트스트랩</title>
<!-- Bootstrap -->
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/kfonts.css" rel="stylesheet">
<style>
h2 {
margin: 20px 0
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h2>컬랩스 이벤트</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsesample1"> 여기 클릭하면 펼쳐지고, 다시 클릭하면 접힙니다.</a>
</h4>
</div>
<div id="collapsesample1" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc suscipit velit sit amet
tristique tincidunt. Fusce dapibus tortor ut est ornare porttitor.
Aliquam auctor bibendum posuere. Fusce laoreet tincidunt lacinia.
Aliquam posuere pharetra auctor. Pellentesque et eleifend nibh, a
bibendum lacus. Pellentesque sit amet dignissim mauris.
Suspendisse a erat congue nunc auctor malesuada. Mauris ultricies
magna quis neque egestas, eu vehicula sapien luctus. Aenean id
condimentum mauris. Integer urna enim, vehicula non nunc non,
feugiat imperdiet eros. Morbi vitae est at erat tristique
facilisis. Mauris pulvinar vel arcu vel ultrices. Mauris a nisi
sit amet urna elementum semper. Etiam dignissim pharetra mauris.
Donec rhoncus nisl sem, ut ultrices odio porttitor sed. Donec
consequat facilisis velit. Cras feugiat tincidunt fermentum. Duis
interdum nec quam id eleifend.</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsesample2"> 여기 클릭하면 펼쳐지고, 다시 클릭하면 접힙니다.</a>
</h4>
</div>
<div id="collapsesample2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc suscipit velit sit amet
interdum nec quam id eleifend.</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#collapsesample1').on('show.bs.collapse', function(){
console.log('펼쳐질 때 이 메세지가 보인다.')
})
})
</script>
</body>
</html>'HTML, CSS, ECMA6 > 부트스트랩(Bootstrap)' 카테고리의 다른 글
| [부트스트랩(Bootstrap)] 부트스트랩 나아가기 (0) | 2019.07.02 |
|---|