버튼 클릭 시 화면전환 이벤트
본문
안녕하세요. 만년 초보 퍼블리셔입니다 ㅠㅠ
버튼 클릭 시 화면전환 이벤트 관련해서 도움 부탁드립니다 ..!
1. 하단 버튼의 이전/다음 버튼 클릭 시 상단 프로그래스바 진행률 표시가 안되고있습니다 ..
스크립트는 작동하는것같은데 css를 어떻게 줘야 색상이 표시될까요 ??
2. 좌측메뉴 클릭했을때도 순서에 맞게 프로그래스바 표시가 되는 스크립트 구성좀 부탁드립니다 ..!
3. 1번화면이 나왔을떈 다음버튼만, 9번화면이 나왔을떄는 이전버튼만 나오게 하고싶습니다..
저에겐 너무 어려워서 요청 올립니다 도움 부탁드립니다 ㅠㅠ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>장기수선계획-장기수선충당금</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
<script type="text/javascript" src="assets/js/script.js"></script>
<link href="http://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<style>
.reportCostWrite-con__menu { width: 18%; display: inline-block; padding-top: 12px;border-right: solid 1px #E4E5ED;background: #fff;overflow-y: auto; height: 100vh;}
.reportCostWrite-con__menu li {cursor: pointer;padding: 14px 21px;font-size: 16px;font-weight: 500;display: block;color: #9A9BA7;transition: all ease 0.2s; display: flex; align-items: center; }
.reportCostWrite-con__menu li .number { width: 26px; min-width: unset; height: 26px; background: #fff; border: solid 1px #E4E5ED; margin-right: 5px; color: #555969; font-size: 16px; font-weight: 600; }
.reportCostWrite-con__menu li.current {background: #F3F3F3;color: #555969;}
.reportCostWrite-con__menu li.current .number { background: #555969; border: solid 1px #E4E5ED; color: #fff; }
.form-step.current { display: block; }
.form-step { display: none; width: 82%;height: 100%; float: right; padding: 20px 30px 0; }
.form-box { margin: 24px 0 0; }
.progress { height: 5px!important; border-radius: 0!important; }
.progress::-webkit-progress-value {background-color: #FAB583!important;color: red;}
.progress::-moz-progress-bar {background-color: #FAB583!important;color: red;}
.progress::-ms-fill {background-color: #FAB583!important;border: none; color: red;}
.footer_reportCostWrite { z-index: 1; background: #fff; position: fixed; bottom: 0; padding: 15px 30px 55px 30px; width: 100%; border-top: solid 1px #dbdbdb; display: flex; justify-content: end; }
.modal-con .form-step { width: 100%; }
.tooltip-content { border: none; width: max-content;}
.tooltip-content.tooltip-content { top: 45px; bottom: unset; font-size: 13px; font-weight: 300; text-align: left; }
.tooltip-content:after { border-color: hsl(0, 0%, 29%) transparent; top: -12px; bottom: unset; transform: rotate( 0deg);}
.tooltip-content:before { display: none; }
</style>
<body>
<div id="apt" class="is-desktop">
<div class="apt-wrap" style="min-height: unset; border-bottom: solid 1px #E4E5ED; ">
<div class="my-3 is-flex is-size-7 has-text-weight-medium">
<span style="color: #9A9BA7;">상단제목</span>
</div>
</div>
<div>
<progress class="progress progress_reportCostWrite is-info mb-0" id="progressbar" value="" max="100"></progress>
</div>
<div class="apt-wrap pt-0">
<div class="apt-content__body">
<div class="apt_table is-flex is-justify-content-space-between">
<ul class="reportCostWrite-con__menu">
<li class="tab_menu current btnReportCost" data-tab="tabreportCostWrite-1"><span class="number">1</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-2"><span class="number">2</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-3"><span class="number">3</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-4"><span class="number">4</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-5"><span class="number">5</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-6"><span class="number">6</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-7"><span class="number">7</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-8"><span class="number">8</span>제목제목</li>
<li class="tab_menu btnReportCost" data-tab="tabreportCostWrite-9"><span class="number">9</span>제목제목</li>
</ul>
<div id="tabreportCostWrite-1" class="form-step current">
<p class="con_title mt-0 ml-1">1. 제목제목</p>
</div>
<div id="tabreportCostWrite-2" class="form-step">
<p class="con_title mt-0 ml-1">2. 제목제목</p>
</div>
<div id="tabreportCostWrite-3" class="form-step">
<p class="con_title mt-0 ml-1">3. 제목제목</p>
</div>
<div id="tabreportCostWrite-4" class="form-step">
<p class="con_title mt-0 ml-1">4. 제목제목</p>
</div>
<div id="tabreportCostWrite-5" class="form-step">
<p class="con_title mt-0 ml-1">5. 제목제목</p>
</div>
<div id="tabreportCostWrite-6" class="form-step">
<p class="con_title mt-0 ml-1">6. 제목제목</p>
</div>
<div id="tabreportCostWrite-7" class="form-step">
<p class="con_title mt-0 ml-1">7. 제목제목</p>
</div>
<div id="tabreportCostWrite-8" class="form-step">
<p class="con_title mt-0 ml-1">8. 제목제목</p>
</div>
<div id="tabreportCostWrite-9" class="form-step">
<p class="con_title mt-0 ml-1">9. 제목제목</p>
</div>
</div>
</div>
</div>
<!------------------모달창--------------------------->
<div class="footer_reportCostWrite">
<button class="apt-btn apt-btn__grey on is-size-6 is-justify-content-center" id="writePre" style="width: 115px;">이전</button>
<button class="apt-btn apt-btn__grey on is-size-6 is-justify-content-center" id="writeNext" style="width: 115px;">다음</button>
<button class="apt-btn apt-btn__regist on is-size-6 is-justify-content-center" id="writeSave" style="width: 115px;">저장</button>
</div>
<!------------------모달창--------------------------->
</div>
</body>
<script>
$(function() {
var base = 1000;//기준값
var price = 100;//단위값
var totalSum = 0;//계산값
//progressbar 초기설정.
$( "#progressbar" ).progressbar({
value: totalSum
});
//이전버튼 클릭
$("#writePre").click(function(event) {
$(".form-step").each(function() {
if($(this).hasClass("current")){
var id = $(this).attr("id");
var tmp_id = id.replace("tabreportCostWrite-","");
if(parseInt(tmp_id) > 1 ){
int_id = parseInt(tmp_id) - 1;
var new_id = "tabreportCostWrite-"+int_id;
$(".tab_menu").removeClass("current");
$(".form-step").removeClass("current");
$("#"+new_id + "").addClass("current");
$('[data-tab="'+new_id+'"').addClass("current");
}else{
alert("이전 페이지가 없습니다. ");
}
// do something with the id...
return false;
}
});
if(totalSum > 0){
totalSum = totalSum - price;
$( "#progressbar" ).progressbar({
value: (totalSum /base)*100
});
}
});
//다음버튼 클릭
$("#writeNext").click(function(event) {
$(".form-step").each(function() {
if($(this).hasClass("current")){
var id = $(this).attr("id");
var tmp_id = id.replace("tabreportCostWrite-","");
if(parseInt(tmp_id) > 8 ){
alert("다음 페이지가 없습니다. ");
}else{
int_id = parseInt(tmp_id) + 1;
var new_id = "tabreportCostWrite-"+int_id;
$(".tab_menu").removeClass("current");
$(".form-step").removeClass("current");
$("#"+new_id + "").addClass("current");
$('[data-tab="'+new_id+'"').addClass("current");
}
// do something with the id...
return false;
}
});
totalSum = totalSum + price;
console.log((totalSum/base)*100);
$( "#progressbar" ).progressbar({
value: (totalSum /base)*100
});
});
});
//좌측 탭 메뉴 화면 전환
$('.form-step.form-step1').addClass('current');
$(document).ready(function(){
$('.reportCostWrite-con__menu li').click(function(){
var tab_id = $(this).attr('data-tab');
$('.reportCostWrite-con__menu li').removeClass('current');
$('.form-step').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
</html>
답변 1
1. 하단 버튼의 이전/다음 버튼 클릭 시 상단 프로그래스바 진행률 표시가 안되고있습니다 ..
네 맞습니다 먼저 스크립트에 사용자 프로그래스바 의 진행률 표시 를 수정.
//progressbar 초기설정.
$("#progressbar").progressbar({ value: 0 });
그리고 css, 에서 정의 되어있지않으니 사용자의 프로그래스 바에 에대한 색상을 정의 해주시고 추가 해주세요
.progress_reportCostWrite{ background-color: #FAB583; height: 5px !important; border-radius: 0 !important; }
그리고 프로그래스 바는 이미 정의 되어있으니 이렇게 하면 될것 같습니다.
스크립트 수정정본 원하는것 일 것같아서..;;; 한번적용해보세요
<script>
$(function() {
var base = 1000; // 기준값
var price = 100; // 단위값
var totalSum = 0; // 계산값
// 프로그래스 바 초기설정
$("#progressbar").progressbar({
value: 0
});
// 이전 버튼 클릭
$("#writePre").click(function(event) {
$(".form-step").each(function() {
if ($(this).hasClass("current")) {
var id = $(this).attr("id");
var tmp_id = id.replace("tabreportCostWrite-", "");
if (parseInt(tmp_id) > 1) {
int_id = parseInt(tmp_id) - 1;
var new_id = "tabreportCostWrite-" + int_id;
$(".tab_menu").removeClass("current");
$(".form-step").removeClass("current");
$("#" + new_id).addClass("current");
$('[data-tab="' + new_id + '"').addClass("current");
$("#writeNext").show(); // 이전 버튼 클릭 시 다음 버튼 표시
} else {
alert("이전 페이지가 없습니다. ");
}
return false;
}
});
if (totalSum > 0) {
totalSum = totalSum - price;
$("#progressbar").progressbar({
value: (totalSum / base) * 100
});
}
// 1번 화면에서는 이전 버튼만 표시
if ($("#tabreportCostWrite-1").hasClass("current")) {
$("#writePre").hide();
}
});
// 다음 버튼 클릭
$("#writeNext").click(function(event) {
$(".form-step").each(function() {
if ($(this).hasClass("current")) {
var id = $(this).attr("id");
var tmp_id = id.replace("tabreportCostWrite-", "");
if (parseInt(tmp_id) < 9) {
int_id = parseInt(tmp_id) + 1;
var new_id = "tabreportCostWrite-" + int_id;
$(".tab_menu").removeClass("current");
$(".form-step").removeClass("current");
$("#" + new_id).addClass("current");
$('[data-tab="' + new_id + '"').addClass("current");
$("#writePre").show(); // 다음 버튼 클릭 시 이전 버튼 표시
} else {
alert("다음 페이지가 없습니다. ");
}
return false;
}
});
totalSum = totalSum + price;
$("#progressbar").progressbar({
value: (totalSum / base) * 100
});
// 9번 화면에서는 다음 버튼만 표시
if ($("#tabreportCostWrite-9").hasClass("current")) {
$("#writeNext").hide();
}
});
});
// 좌측 탭 메뉴 화면 전환
$(document).ready(function() {
$('.form-step.form-step1').addClass('current');
$('.reportCostWrite-con__menu li').click(function() {
var tab_id = $(this).attr('data-tab');
$('.reportCostWrite-con__menu li').removeClass('current');
$('.form-step').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
});
</script>
그리고 ccs 에서 프로그래스 바는 이렇게 해야 정상입니다.
.progress_reportCostWrite { background-color: #e9e9e9; height: 5px !important; border-radius: 0 !important; }
.progress_reportCostWrite::-webkit-progress-value { background-color: #FAB583 !important; color: red; }
.progress_reportCostWrite::-moz-progress-bar { background-color: #FAB583 !important; color: red; }
.progress_reportCostWrite::-ms-fill { background-color: #FAB583 !important; border: none; color: red; }
감사합니다 최고최고
