반응형
jQuery / Twitter Bootstrap 데이터 로딩 텍스트 버튼 (지연 포함)
이 정확한 예제가 내 웹 사이트에서 작동하도록 노력하고 있습니다.
http://getbootstrap.com/2.3.2/javascript.html#buttons
그러나 다음 HTML을 포함하기 만하면됩니다.
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
작동하지 않습니다. jQuery 1.7.x를 실행 중이고 Bootstrap JS 파일을로드했습니다.
구체적으로 말하자면, 버튼을 "로드 중"텍스트 변경으로 약간 지연시킨 다음 일반 텍스트로 돌아 가기를 원합니다. 내 인터넷 검색에서 온라인으로 사용할 수있는 좋은 예가없는 것 같습니다 (대부분 영구적 인 상태 변경 또는 토글 요청). 부트 스트랩 사이트 자체에는 여기에 문서가 없습니다.
문서 페이지에는 application.js라는 파일이로드되고 있습니다. http://twitter.github.com/bootstrap/assets/js/application.js
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
});
또는 이것을 추가하여 Twitter Bootstrap 속성을 선택합니다.
$('button[data-loading-text]').click(function () {
$(this).button('loading');
});
button ( 'loading')을 실행하기 전에 수락 된 답변이 jQuery 버튼 객체를 js var로 변환 한 방법을 기록해 두십시오. 이것이 작동하는 동안 jQuery 버튼 객체에서 직접 사용될 때 button ( 'loading')이 작동하지 않기 때문입니다. .
부트 스트랩 라이브러리를 포함하기 만하면됩니다.
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
다음은 예입니다.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Bootstrap Example</TITLE>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
<button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
<script type="text/javascript">
$(function(){
$('#btnD').click(function(){
var btn = $(this);
btn.button('loading');
});
});
</script>
</BODY>
</HTML>
또한 jquery에는 setTimeout보다 작업하기 쉬운 .delay () 메서드가 있습니다.
그냥 작은 js를 넣어
onclick="$(this).button('loading');"
반응형
'programing' 카테고리의 다른 글
| SQL Server의 기본 포트 (0) | 2020.12.11 |
|---|---|
| boost :: unique_lock 대 boost :: lock_guard (0) | 2020.12.11 |
| TypeScript는 클래스에 대한 이벤트를 지원합니까? (0) | 2020.12.11 |
| JavaScript : 1 분마다 실행할 코드 가져 오기 (0) | 2020.12.11 |
| Sublime Text 2 파일 사이드 바의 글꼴 크기를 변경하는 방법은 무엇입니까? (0) | 2020.12.11 |