자바스크립트(Javascript) 제이쿼리(JQuery)로 Sticky 기능 및 재미있는것 만들어보기
우선 역시 실행영상~
https://www.w3schools.com
에서 찾아보면 역시 코드가 있는데 가져와서 응용해서 만들어 보았다.
전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만
맨아래에 아래 함수 들이 있다.
openNav() #mySidenav의 width속성을 500px로 만들어줌 -> 튀어나오도록
closeNav() #mySidenav의 width속성을 0로 만들어줌 -> 들어가서 안보이도록
해준다.
#choice라는 select태그의 값이 어떤 값이냐에 따라 밑에 있는 태그들이
유동적으로 바뀌게끔 짜주었다.
조금 지저분하지만 겁나 솔직하고 직관적이게 짰다.
더 좋은방법이 있겠지만 느낌가는데로,,,~
$(document).ready(function(){
var output = "";
if($("#choice > option:selected").val()=='Bottom'){
output +='<label>총 기 장 : </label> <input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<label>허 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
output +='<label>밑 위 : </label><input type="text" name="rise" placeholder="Enter Your Cm"/><br>';
output +='<label>허 벅 지 : </label> <input type="text" name="thigh" placeholder="Enter Your Cm"/><br>';
output +='<label>밑 단 : </label><input type="text" name="hem" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").append(output);
}else if ($("#choice > option:selected").val()=='Outer') {
output +='<label>어 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
output +='<label>암 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").append(output);
}else if ($("#choice > option:selected").val()=='Top') {
output +='<label>어 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
output +='<label>암 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").append(output);
}
// alert($("#choice > option:selected").val());
$("#choice").change(function(){
var output = "";
if($("#choice > option:selected").val()=='Bottom'){
output +='<label>총 기 장 : </label> <input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<label>허 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
output +='<label>밑 위 : </label><input type="text" name="rise" placeholder="Enter Your Cm"/><br>';
output +='<label>허 벅 지 : </label> <input type="text" name="thigh" placeholder="Enter Your Cm"/><br>';
output +='<label>밑 단 : </label><input type="text" name="hem" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").empty();
$("#fitple-form").append(output);
}else if ($("#choice > option:selected").val()=='Outer') {
output +='<label>어 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
output +='<label>암 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").empty();
$("#fitple-form").append(output);
}else if ($("#choice > option:selected").val()=='Top') {
output +='<label>어 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
output +='<label>암 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
output +='<input type="submit" value="Search" />';
$("#fitple-form").empty();
$("#fitple-form").append(output);
}
});
});
function openNav() {
document.getElementById("mySidenav").style.width = "500px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
댓글
댓글 쓰기