빌드 단계 진행률 표시 줄 (css 및 jquery)
페이팔과 같은 사이트에서 이러한 유형의 진행률 표시 줄이 반복되는 것을 보았습니다. CSS및 사용하여 이것을 설정하는 방법은 jquery무엇입니까? 나는 4 페이지를 가지고 있고 각 페이지는 단계입니다. 그래서 4 단계.
웹 애플리케이션에서 프로세스 단계를 시각화 할 솔루션을 찾았습니다. 나는 Stephen A Thomas의 다음과 같은 훌륭한 글을 발견했습니다.
순수 CSS에서 진행률 추적 ( 원래 링크는 이제 작동하지 않음)
그의 접근 방식에서 Thomas는 CSS를 사용하는 것만으로도 빠져 나갑니다-Javascript가 없습니다! 본질적으로 그의 기사의 다음 CSS 코드가 나를 위해 트릭을 수행합니다.
<style>
<!-- Progress with steps -->
ol.progtrckr {
margin: 0;
padding: 0;
list-style-type: none;
}
ol.progtrckr li {
display: inline-block;
text-align: center;
line-height: 3em;
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
ol.progtrckr li.progtrckr-done {
color: black;
border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
color: silver;
border-bottom: 4px solid silver;
}
ol.progtrckr li:after {
content: "\00a0\00a0";
}
ol.progtrckr li:before {
position: relative;
bottom: -2.5em;
float: left;
left: 50%;
line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
content: "\2713";
color: white;
background-color: yellowgreen;
height: 1.2em;
width: 1.2em;
line-height: 1.2em;
border: none;
border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
content: "\039F";
color: silver;
background-color: white;
font-size: 1.5em;
bottom: -1.6em;
}
</style>
그의 예제의 HTML 태그와 함께 (저는 Grails GSP 페이지를 사용하여 태그와 'done / todo'클래스를 동적으로 생성합니다) :
<ol class="progtrckr" data-progtrckr-steps="5">
<li class="progtrckr-done">Order Processing</li>
<li class="progtrckr-done">Pre-Production</li>
<li class="progtrckr-done">In Production</li>
<li class="progtrckr-done">Shipped</li>
<li class="progtrckr-todo">Delivered</li>
</ol>
도움이 되었기를 바랍니다. 나를 위해 꽤 잘 작동합니다.
업데이트 : 다음 (단축) 버전도 잘 작동합니다.
ol.progtrckr {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
ol.progtrckr li {
display: table-cell;
text-align: center;
line-height: 3em;
}
... and the rest of the CSS ...
<ol class="progtrckr">
...
</ol>
display: table; table-layout: fixed; width: 100%콘텐츠가 오버플로되지 않는 한 목록 항목의 크기가 자동으로 동일하게 조정되는지 확인합니다. 사용 data-progtrckr-steps및 관련 CSS 가 필요하지 않습니다 .
만드는 방법은 다음과 같습니다.
http://24ways.org/2008/checking-out-progress-meters
다음은 몇 가지 영감의 예입니다.
이 페이지에는 매우 멋진 답변이 많이 있으며 더 많은 정보를 검색했지만 내 위시리스트의 모든 확인란을 선택한 답변은 없습니다.
- CSS 만, 자바 스크립트 없음
- Tom Kenny의 Best Design Practices 고수
- 다른 답변과 같은 레이아웃
- 각 단계에는 이름과 번호가 있습니다.
- 반응 형 레이아웃 : 글꼴 크기 독립적
- 유동적 인 레이아웃 : 목록과 항목이 사용 가능한 너비에 따라 조정됩니다.
- 이름과 번호는 해당 블록의 중앙에 있습니다.
- "완료"색상은 활성 항목까지 올라가지 만 지나치지는 않습니다.
- 활성 항목은 그래픽으로 눈에 띄어 야합니다.
그래서 여러 예제의 코드를 혼합하고 필요한 사항을 수정했으며 결과는 다음과 같습니다.
다음 CSS와 HTML을 사용했습니다.
/* Progress Tracker v2 */
ol.progress[data-steps="2"] li { width: 49%; }
ol.progress[data-steps="3"] li { width: 33%; }
ol.progress[data-steps="4"] li { width: 24%; }
ol.progress[data-steps="5"] li { width: 19%; }
ol.progress[data-steps="6"] li { width: 16%; }
ol.progress[data-steps="7"] li { width: 14%; }
ol.progress[data-steps="8"] li { width: 12%; }
ol.progress[data-steps="9"] li { width: 11%; }
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
}
.progress .name {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: black;
opacity: 0.3;
}
.progress .step {
color: black;
border: 3px solid silver;
background-color: silver;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step span {
opacity: 0.3;
}
.progress .active .name,
.progress .active .step span {
opacity: 1;
}
.progress .step:before {
content: "";
display: block;
background-color: silver;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.6em;
left: 0;
z-index: -1;
}
.progress .step:after {
content: "";
display: block;
background-color: silver;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.6em;
right: 0;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
background-color: yellowgreen;
}
.progress .done .step,
.progress .active .step {
border: 3px solid yellowgreen;
}<!-- Progress Tracker v2 -->
<ol class="progress" data-steps="4">
<li class="done">
<span class="name">Foo</span>
<span class="step"><span>1</span></span>
</li>
<li class="done">
<span class="name">Bar</span>
<span class="step"><span>2</span></span>
</li>
<li class="active">
<span class="name">Baz</span>
<span class="step"><span>3</span></span>
</li>
<li>
<span class="name">Quux</span>
<span class="step"><span>4</span></span>
</li>
</ol>위의 예에서 볼 수 있듯이,주의해야 할 두 개의 목록 항목 클래스가 있습니다. active및 done. 사용하여 class="active"현재 단계, 사용을 위해 class="done"그것을하기 전에 모든 단계에 대한.
또한주의 data-steps="4"에 ol태그; 모든 목록 항목에 올바른 크기를 적용하려면 총 단계 수로 설정하십시오.
함께 놀러 자유롭게 JSFiddle . 즐겨!
이것이 내가 순수하게 CSS와 HTML (자바 스크립트 / 이미지 등 없음)을 사용하여 달성 한 방법입니다.
대부분의 브라우저에서 우아하게 성능이 저하됩니다 (<IE9에서 last-of-type이 부족한 경우 수정 사항을 추가해야합니다).
일종의 단계 진행 추적기를 만드는 데 동일한 요구 사항이 있었으므로 해당 목적을위한 JavaScript 플러그인을 만들었습니다. 다음은 이 단계 진행률 추적기의 데모 용 JsFiddle 입니다. GitHub 에서도 코드에 액세스 할 수 있습니다 .
기본적으로하는 일은 json 데이터 (아래에 설명 된 특정 형식)를 입력으로 받아이를 기반으로 진행률 추적기를 생성하는 것입니다. 강조 표시된 단계는 완료된 단계를 나타냅니다.
html은 기본 CSS를 사용하여 아래와 같이 다소 보이지만 응용 프로그램의 테마에 따라 사용자 정의 할 수 있습니다. 각 단계에 대한 도구 설명 텍스트를 표시하는 옵션도 있습니다.
다음은 이에 대한 몇 가지 코드 스 니펫입니다.
//container div
<div id="tracker1" style="width: 700px">
</div>
//sample JSON data
var sampleJson1 = {
ToolTipPosition: "bottom",
data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
{ order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
{ order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
{ order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};
//Invoking the plugin
$(document).ready(function () {
$("#tracker1").progressTracker(sampleJson1);
});
다른 사람에게도 유용하기를 바랍니다.
이것이 내가 한 일입니다.
- 진행률 표시 줄에 div를로드하려면 jQuery .progressbar () 를 만듭니다 .
- 진행률 표시 줄 하단에 단계 제목 을 만듭니다 . 그들을 배치 CSS .
- 그럼 함수 생성 jQuery를 변경 값 의 진행 막대의 다음 단계로 매번 사용자 이동.
HTML
<div id="divProgress"></div>
<div id="divStepTitle">
<span class="spanStep">Step 1</span> <span class="spanStep">Step 2</span> <span class="spanStep">Step 3</span>
</div>
<input type="button" id="btnPrev" name="btnPrev" value="Prev" />
<input type="button" id="btnNext" name="btnNext" value="Next" />
CSS
#divProgress
{
width: 600px;
}
#divStepTitle
{
width: 600px;
}
.spanStep
{
text-align: center;
width: 200px;
}
자바 스크립트 / jQuery
var progress = 0;
$(function({
//set step progress bar
$("#divProgress").progressbar();
//event handler for prev and next button
$("#btnPrev, #btnNext").click(function(){
step($(this));
});
});
function step(obj)
{
//switch to prev/next page
if (obj.val() == "Prev")
{
//set new value for progress bar
progress -= 20;
$("#divProgress").progressbar({ value: progress });
//do extra step for showing previous page
}
else if (obj.val() == "Next")
{
//set new value for progress bar
progress += 20;
$("#divProgress").progressbar({ value: progress });
//do extra step for showing next page
}
}
내가 할 일은 버튼에 마우스를 올리는 데 자주 사용하는 것과 동일한 트릭을 사용하는 것입니다. 두 부분으로 구성된 이미지를 준비합니다. (1) 불완전 함을 의미하는 회색으로 표시된 절반과 (2) 완료됨을 의미하는 색상으로 표시된 아래쪽 절반. 동일한 이미지를 4 번 사용하여 진행률 표시 줄의 4 단계를 구성하고 불완전한 단계의 경우 상단을 정렬하고 불완전한 단계의 경우 하단을 정렬합니다.
이미지 정렬을 활용하려면 img 요소를 사용하는 대신 이미지를 4div의 배경으로 사용해야합니다.
이것은 배경 이미지 정렬을위한 CSS입니다.
div.progress-incomplete {
background-position: top;
}
div.progress-finished {
background-position: bottom;
}
참고 URL : https://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery
'program tip' 카테고리의 다른 글
| 단일 HTTP 헤더의 여러 값을 요청 또는 응답에 추가하기위한 표준 (0) | 2020.12.12 |
|---|---|
| 실행중인 가비지 수집기 유형 찾기 (0) | 2020.12.12 |
| DataGridView 열에서 텍스트를 오른쪽 정렬하려면 어떻게해야합니까? (0) | 2020.12.12 |
| Android SDK의 위치가 Mac OS의 환경 설정에서 설정되지 않았습니까? (0) | 2020.12.12 |
| 중첩 된 개체에서 키로 찾기 (0) | 2020.12.12 |