0
작성중인 코드는 입니다. ASP.net Web Forms 및이 전문 분야는 매우 새로워졌지만 순수 HTML로 실행되도록 단순화하여 jsfiddle.net에서 내 코드로 범위 지정하는 것을 도와 줄 수 있어야합니다. 나는 짧은 코드 (그래서 내가 믿는다)가 저를 수행하는 것을 멈추는 코드의이 스 니펫에서 몇 가지 작업을 수행 할 것을 요구합니다. 내가 할 DEVS의 도움을 요청 무엇보다 쓰고 있어요 : 다른 요소의 동작에서 단추의 상태를 변경하십시오.
- 저장 버튼 기본에 의해 비활성화해야합니다 자체 (약간의 정보 가득) 입력 중 하나가 변경 될 때마다 을 다시 할 수 있습니다. 이 순서대로 다시 활성화 된 후
- 가 나는/부드러운
진행 충전 버튼을 수행하는 클래스를 전환 트리거하는
jQuery 코드를 넣어 한 클릭합니다. 한 번 실행하려면 해당 CSS 전환이 필요하고
버튼의 시각을 기본값으로 다시 설정하면 첫눈이 보입니다.
다음은 FIDDLE입니다. 첫 번째 질문에 대한
<head>
<style>
#formProfile {
z-index: 1;
float: left;
left: 10px;
top: 15px;
position: relative;
height: 620px;
width: 500px;
}
#userProfileTab {
position: absolute;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: teal;
color: whitesmoke;
font-size: 36px;
font-weight: 900;
font-family: Calibri;
text-align: center;
line-height: 170%;
height: 10%;
width: 40%;
top: 0;
left: 30%;
}
#userProfileContainer {
position: absolute;
border: 3px solid teal;
border-radius: 10px;
height: 89%;
width: 90%;
top: 10%;
left: 5%;
overflow: auto;
}
#profileLabels {
position: absolute;
top: 3%;
left: 0;
/*border: 2px outset teal;
border-radius: 10px;*/
height: 490px;
width: 44%;
}
#profileFields {
position: absolute;
/*border: 2px outset teal;
border-radius: 10px;*/
height: 490px;
width: 55%;
top: 3%;
left: 44%;
}
.labels {
position: absolute;
border: none;
border-bottom: 1px solid silver;
height: 38px;
width: 90%;
line-height: 150%;
color: #848484;
font-family: Calibri;
font-size: 24px;
text-align: right;
left: 5%;
}
.labels:after {
content:'';
position: relative;
left: 3%;
border-right: 1px solid silver;
}
.textBox {
position: absolute;
border: 1px dotted black;
display: block;
background-color: white;
box-sizing: border-box;
color: black;
height: 34px;
width: 95%;
left: 2%;
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
font-family: Calibri;
font-style: italic;
font-size: 16px;
text-decoration: none;
outline: 0;
opacity: 0.75;
-moz-transition: all .3s;
-o-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
}
.textBox:hover {
opacity: 1;
border: none;
background: whitesmoke;
-webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.textBox:focus {
border-radius: 10px;
border-style: solid;
border-width: 2px;
background-color: lightskyblue;
color: white;
font-size: 20px;
opacity: 1;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
-moz-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
}
.btnSave {
position: absolute;
height: 40px;
width: 100px;
background-color: white;
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 2px solid teal;
border-radius: 10px;
outline: none;
top: 558px;
left: 330px;
}
.buttonFull {
border: 2px solid teal;
border-radius: 10px;
background: white;
position: absolute;
height: 40px;
width: 100px;
box-shadow: 0 2px 0 silver;
cursor: pointer;
overflow:hidden;
transition: all .1s linear;
}
.buttonFull:active {
box-shadow: none;
transform: translateY(2px);
}
#saveButtonFull {
top: 480px;
left: 330px;
}
#resetButtonFull {
top: 480px;
left: 200px;
}
.save, .reset {
position:absolute;
font-family: Calibri;
font-size: 20px;
font-weight: 900;
text-align: center;
z-index: 10;
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}
.save {
top:7px;
left:30px;
}
.reset {
top:7px;
left:27px;
}
#savedTick, #resetTick {
display: none;
position: absolute;
top: 7px;
left: 50px;
color: white;
font-family: Calibri;
font-size: 20px;
text-align: center;
z-index: 20;
text-shadow: #99FF66 0px 0px 10px;
}
.inner {
background:#1d9650;
/*border-radius: 7px;*/
position: absolute;
top:0;
left:0;
text-align: center;
width:0;
height: 100%;
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
-moz-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
-o-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
/* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
-moz-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
-o-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
/* custom */
}
.progressBar {
width: 100px !important;
}
.textColorize {
left: 26px;
color: white;
}
.notransition {
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
width: 0;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
//var $heightBody = $(window).height()/2;
//var $heightParent = document.getElementById("formLogIn").clientHeight/2;
var $widthBody = $(window).width()/2;
var $widthParent = document.getElementById("formProfile").clientWidth/2;
//var $mrgTop = $heightBody - $heightParent;
var $mrgLeft = $widthBody - $widthParent;
$("body").css("margin-left", $mrgLeft);
$("#saveButtonFull").on("click", function() {
//$(this).off("click");
$(".inner").toggleClass("progressBar");
$(".save").html("Saved").toggleClass('textColorize');
//$(".inner").addClass("notransition").removeClass("notransition");
//$(".save").toggleClass('textColorize');
});
</script>
</head>
<body>
<form id="formProfile">
<div id="userProfileTab">Profile</div>
<div id="userProfileContainer">
<div id="profileLabels"> <span id="lblFirstName" class="labels" style="border-top: 1px solid silver;">* First Name</span>
<br/>
<br/> <span id="lblSurname" class="labels">* Surname</span>
<br/>
<br/> <span id="lblBirdthay" class="labels">* Birthday</span>
<br/>
<br/> <span id="lblGender" class="labels">* Gender</span>
<br/>
<br/> <span id="lblEmail" class="labels">* E-mail</span>
<br/>
<br/> <span id="lblPhone" class="labels">Phone</span>
<br/>
<br/> <span id="lblCountry" class="labels">Country/State</span>
<br/>
<br/> <span id="lblCity" class="labels">City/Town</span>
<br/>
<br/> <span id="lblAddress1" class="labels">Address 1</span>
<br/>
<br/> <span id="lblAddress2" class="labels">Address 2</span>
<br/>
<br/> <span id="lblZip" class="labels">Zip/Postal Code</span>
<br/>
<br/> <span id="lblSignature" class="labels">Signature</span>
</div>
<div id="profileFields">
<input type="text" id="txtFirstName" class="textBox"</input>
<br/>
<br/>
<input type="text" id="txtSurname" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtBirthday" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtGender" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtEmail" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtPhone" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtCountry" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtCity" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtAddress1" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtAddress2" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtZip" class="textBox"></input>
<br/>
<br/>
<input type="text" id="txtSignature" class="textBox"></input>
</div>
<div id="resetButtonFull" class="buttonFull">
<span id="resetTick">✔</span>
<span class="reset">Reset</span>
</div>
<div id="saveButtonFull" class="buttonFull">
<span id="savedTick">✔</span>
<span class="save">Save</span>
<div class="inner"></div>
</div>
</div>
</form>
</body>