트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
Novices 튜토리얼의 코드와 같은 부트 스트랩 프레임 워크에서 제공 한 진행률 표시 줄
<div> <div role = "progressbar"aria-valuenow = "60"aria-valuemin = "0"aria-valuemax = "100"> <span> 40% 완료 </span> </div> </div>
저와 같은 진짜 초보자, 어떻게 해야할지 모르겠습니다. 진정한 진보 바가 되십시오. 그러나 Baidu를 몇 번 입력 한 후에는 jQuery 코드를 추가하여 협력하여이를 달성 할 수 있습니다. 내 학위는 마침내 다음과 같이 실현됩니다.
<div id = "myModal1"tabindex = "-1"role = "대화 상자"aria-labelledby = "mymodallabel"aria-hidden = "true"data-backdrop = "static"> <div> <div> <스팬 스타일 = "Text-Align : CENTRE; COLOR : RED"> 파일이 업로드됩니다. 페이지를 새로 고치지 마십시오! 매
위 단락은 팝업 박스를 사용하여 진행률 표시 줄을 포함하는 것입니다. 그렇지 않으면 숨기기 시작하는 것을 어떻게 달성 할 수 있습니까? Bootstrap을 진행 막대 또는 고정 팝업 박스로 사용하는 경우 Data-Backdrop = "STATIC"을 추가하는 것이 더 좋습니다.이 수정이 없으면 마우스를 클릭하면 팝업 상자가 사라지기 때문입니다.
<cripts> var p = 101; var stop = 1; 함수 run () {p += 4; $ ( "div [class = bar]"). css ( "width", p + "%"); var timer = settimeout ( "run ()", 500); if (p> 100 && stop <1) {p = 0; }} $ ( '##btnsubmit'). click (function () {$ ( '##myModal1'). modal ( 'show'); p = 0; stop = 0; run (); $ ( '#upload'). 제출 ();}); </스크립트>실제로, 부트 스트랩의 진행률 표시 줄은 CSS 스타일을 통해 표시되므로 스타일 너비의 값을 계속 수정하는 한 표시 할 수 있습니다. 물론, 내주기에서는 새로 고침 페이지를 재발견하고 숨길 수 있습니다. 그렇다면 게시물로 제출 한 다음 반환 값을 기준으로 판단한 다음 $ ( '#myModal1'). modal ( 'hide')으로 숨 깁니다. 그리고 해당 정지 값을 1로 변경하면 계속 실행됩니다.