자바스크립트(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>허&nbsp;&nbsp;&nbsp;&nbsp; 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
    output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 위 : </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>밑&nbsp;&nbsp;&nbsp;&nbsp; 단 : </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>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
    output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </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>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
    output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </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>허&nbsp;&nbsp;&nbsp;&nbsp; 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
      output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 위 : </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>밑&nbsp;&nbsp;&nbsp;&nbsp; 단 : </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>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
      output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </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>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
      output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </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";
}

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째