Front-end 국비지원 #059일

JooSehyun·2023년 1월 11일
Datepicker option 종류Form UI Elementsautocompletechangecheckboxradiodatepickerformjqueryjquery ui 사용법jquery-uinew Dateoption:selectedprogressprogressbarselectselectmenuspinnersubmitupdateProgressval()달력문제해결비활성화자동 키워드 추천활성화
0

JQuery & JQuery UI

JQuery UI 의 사용법은 #52일차에 기록해두었다.
URL : https://velog.io/@nuyhes/Front-end-%EA%B5%AD%EB%B9%84%EC%A7%80%EC%9B%90-052%EC%9D%BC

이번 수업에 JQuery UI 를 사용하는 이유

  • Cross browsing 을 위해 어느 브라우저에서 봐도 같은 모양이 나와야 좋기 때문이다.


    ex ) select 박스를 보면 CHROME(크롬) , FIREFOX(파이어폭스 브라우저 비교


    CHROME(크롬) select

    FIREFOX(파이어폭스) select

    비교이다 이렇게

[문제해결] select 안에 option의 영역에 css가 안되는거 같다. 검색결과는 따로 라이브러리나 다른곳에서 스타일을 줘야하는거 같은데...

Form UI Elements

JQuery UI를 이용하여 From 태그를 사용해본다.

JQuery UI 에 사용되는것

  1. selectmenu
  2. autocomplete
  3. spinner
  4. datepicker
  5. progressbar

결과

첫번째 부터 차례대로
지역 : select를 이용한다.
자동 글 생성 : 해당 키워드 단어를 배열로 넣고 첫글자를 적자마자 해당되는 키워드가 밑에 추천으로 뜬다.
Select a value : 숫자가 올라가고 내려간는 카운터 버튼
언제부터 출근가능 하세요? : 누르면 JQuery UI 로 사용한 달력이 나타난다.
우리 회사는 어떻게... : input radio가 JQuery UI 로 꾸며진 버튼
submit 버튼 : 전부다 체크 또는 기입이 되면 활성화가 된다.
ProgressBar : 진행상황이 퍼센트로 나타난다.

※ JQuery Ui 의 CSS 파일도 link로 꼭 넣어준다.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

HTML

<div class="container">
        <form action="#" method="post" name="form1" id="form1">
            <h1>Form UI Elements</h1>
            <!-- jquery-ui selectmenu -->
            <div class="ui-widget">
                <label for="location">지역</label>
                <select id="location">
                    <optgroup label="city">
                        <option value="서울">서울</option>
                        <option value="경기">경기</option>
                        <option value="제주">제주</option>
                    </optgroup>
                    <optgroup label="city1">
                        <option value="강남">강남</option>
                        <option value="종로">종로</option>
                        <option value="서귀포">서귀포</option>
                    </optgroup>
                </select>
            </div>
            <!-- jquery-ui autocomplete -->
            <div class="ui-widget">
                <label for="category">자동 글생성</label>
                <input type="text" id="category" class="ui-button ui-selectmenu-button">
            </div>
            <!-- jquery-ui spinner -->
            <div class="ui-widget">
                <label for="spinner">Select a value</label>
                <input id="spinner" name="value" value="0" class="">
            </div>
            <!-- jquery-ui datepicker -->
            <div class="ui-widget">
                <label for="startDate">언제부터 출근 가능하세요?</label>
                <input type="text" id="datepicker" class="ui-button ui-selectmenu-button">
            </div>
            <fieldset class="check-box">
                <legend>우리 회사는 어떻게 알고 지원하셨나요?</legend>
                <input type="radio" name="refer" id="internet" value="internet">
                <label for="internet">internet</label>
                <input type="radio" name="refer" id="tv" value="tv">
                <label for="tv">tv</label>
                <input type="radio" name="refer" id="other" value="other">
                <label for="other">other</label>
            </fieldset>
           	<button id="submit">submit</button>
			<div id="progress">
                <div class="pct ui-progressbar-value"><span>0</span>%완료</div>
            </div>
        </form>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: 'Noto Sans KR', sans-serif;}
.container{width: 500px; border: 5px solid #ddd; padding: 20px; margin: 30px auto;}
h1{text-align: center; margin-bottom: 20px;}
form > .ui-widget{margin-bottom: 20px;}
form > .ui-widget label{display: block; margin-bottom: 10px;}
form > .ui-widget label select{}
form > .ui-widget label select{}
.ui-selectmenu-button.ui-button{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    transition: .3s ease-in-out;
    outline: none;
}
.ui-selectmenu-button.ui-button:hover{
    background: rgba(0, 0, 0, .2);
    color: #fff;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button.ui-state-active:hover {
    border: none/* 1px solid #003eff */;
    background: tomato;
    font-weight: normal;
    color: #ffffff;
}
.ui-button .ui-icon{
    position: absolute;
    right: 20px;
    top: 9px;
}
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    border-radius: 10px;
    margin-top: 5px;
}
.ui-widget.ui-widget-content{
    width: 100%;
}
.ui-widget > #spinner{
    width: 90%;
    margin-left: 11px;
    outline: none;
}
.ui-widget > .ui-datapicker{
    background: red;
}
#ui-datepicker-div{
    width: 450px;
    position: absolute !important; 
    top: 187.234px !important;
}
fieldset{padding: 20px 10px; border: 1px solid #ccc;}
.ui-checkboxradio-label{width: 138px;}

#submit{margin-top: 20px; width: 100%;}
#progress{position: relative; height: 20px;}
#progress .pct{position: absolute; width: 100%; line-height: 20px; font-size: 12px; color: #444; text-align: center; }

script

//select menu
$('#location').selectmenu();

//autocomplete
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme",
    "HTML",
    "CSS"
  ];
  $( "#category" ).autocomplete({
    source: availableTags
  });

//spinner
//옵션을 주기위해 중괄호추가
var spinner = $( "#spinner" ).spinner({
    min:0,
    max:10,
    step: 2
});

//datepicker
$("#datepicker").datepicker({
    minDate: new Date(),//이렇게 하면 과거 날짜는 비활성화 됨
    maxDate: "+2w",
    showAnim: "slide"
});

//check box radio
$( "input[type=radio]" ).checkboxradio();

//button
$( "#submit" ).button({
  disabled:true
});

//pregress
$( "#progress" ).progressbar({
  value: 0
});

//인풋의 값이 바뀔때
$('input').change(function(){
  updateProgress();
});

updateProgress();
function updateProgress(){
  let progress=0;
  let itemCount=5;
  let itemCompleted=0;

  let $location=$('#location option:selected').val();
  //console.log($location);
  let $category=$('#category').val();
  let $spinner=$('#spinner').val();
  console.log($spinner);
  let $datepicker=$('#datepicker').val();
  let $radio=$('input[type="radio"]:checked').val();
  if($location) itemCompleted++;
  if($category) itemCompleted++;
  if($spinner) itemCompleted++;
  if($datepicker) itemCompleted++;
  if($radio) itemCompleted++;
  
  progress=(itemCompleted/itemCount)*100

  $( "#progress" ).progressbar("option","value",progress)
  $('.pct span').text(progress);
  if(progress==100){
    $('#submit').button({
      disabled:false
    })
  }
}

01. JQuery UI : select menu

URL : https://jqueryui.com/selectmenu/ 에 들어가면

예제가 나온다. 아래의 'view source' 를 클릭하면 html , style , script 가 나오는데
우리는 script의 $("선택자").selectmenu( );의 코드가 필요하다. 해당 선택자를 넣고 스크립트에 작성한다.

$( function() {
    $( "#speed" ).selectmenu();
 	$( "#files" ).selectmenu();
 	$( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
      .addClass( "overflow" );
 	$( "#salutation" ).selectmenu();
  } );

이 코드만 작성해도 아래와 같이 적용된다. (색상과 넓이 값은 따로 지정)

$('#location').selectmenu();

02. JQuery UI : autocomplete

URL : https://jqueryui.com/autocomplete/

JQuery UI의 autocomplete 의 기능이다.

아래와 같이 변수 availableTags안에 자동완성이 될 키워드를 입력해놓는다. 그럼 위와 같이 추천키워드로 뜬다. 

var availableTags = [
	배열1,
    배열2,
    배열3
  ];
  $( "#category" ).autocomplete({
    source: availableTags
  });

03. JQuery UI : spinner

URL : https://jqueryui.com/spinner/

JQuery UI의 spinner 의 기능이다. 화살표를 클릭하면 value 값이 변하는 input 박스이다. 

var spinner = $( "#spinner" ).spinner({
    min:0,
    max:10,
    step: 1
});

view source에서 가져오고 { }안에 옵션값을 부여한다.
min : 최소값 또는 시작값
max : 최대값
step : 누를때 마다 값이 바뀌는 값 Ex ) step : 1 = 1씩 증가 , step : 2 = 2씩 증가

04. JQuery UI : datepicker

URL : https://jqueryui.com/datepicker/
개인적으론 제일 유용하게 사용될듯하다.

[문제해결] : 지금 반응형 페이지를 만들고 있는데 호텔홈페이지의 예약 날짜를 선택하는란이 있다. 이부분을 활용하거나 참고하여 만들어볼 생각이다.

$("#datepicker").datepicker({
    minDate: new Date(),//이렇게 하면 과거 날짜는 비활성화 됨
    maxDate: "+2w",
    showAnim: "slide"
});

앞서 설명했듯이 { }안에 옵션값을 부여한다.

minDate : 최소 날짜인데 new Date() 를 사용하게 되면 금일 기준 과거의 날짜가 비활성화 된다.

Ex ) minDate 적지 않았을 때 (2023년 1월 11일 기준) 과거가 활성화 돼있다.

Ex ) minDate: new Date() 옵션을 부여했을때 (2023년 1월 11일 기준) 과거가 비활성화 돼있다.

JQuery UI : Datepicker option 종류

 $("#Date").datepicker({
	showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.
	buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지
	buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.
	changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다.
	changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.
	minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.
	nextText: '다음 달', // next 아이콘의 툴팁.
	prevText: '이전 달', // prev 아이콘의 툴팁.
	numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.
	stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. 
	yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.
	showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. 
	currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널
	closeText: '닫기',  // 닫기 버튼 패널
	dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식.
	showAnim: "slide", //애니메이션을 적용한다.
	showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. 
	dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.
	monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.
	yearRange: "2010:2013" //연도 범위
	});

04. JQuery UI : Checkboxradio

URL : https://jqueryui.com/checkboxradio/

$( "input[type=radio]" ).checkboxradio();

05. JQuery UI : Progressbar

URL : https://jqueryui.com/progressbar/

$( "#progress" ).progressbar({
  value: 0 //0에서 시작
});

input의 값이 입력 됐을때 progressbar '%' 구현

//인풋의 값이 바뀔때
$('input').change(function(){
  updateProgress();
});
updateProgress();
function updateProgress(){
  let progress=0;
  let itemCount=5;
  let itemCompleted=0;
  let $location=$('#location option:selected').val();
  let $category=$('#category').val();
  let $spinner=$('#spinner').val();
  console.log($spinner);
  let $datepicker=$('#datepicker').val();
  let $radio=$('input[type="radio"]:checked').val();
  if($location) itemCompleted++;
  if($category) itemCompleted++;
  if($spinner) itemCompleted++;
  if($datepicker) itemCompleted++;
  if($radio) itemCompleted++;
  progress=(itemCompleted/itemCount)*100
  $( "#progress" ).progressbar("option","value",progress)
  $('.pct span').text(progress);
  if(progress==100){
    $('#submit').button({
      disabled:false
    })
  }
}

input의 값이 change될때 함수 updateProgress가 되게 한다.
updateProgress 함수는 각 input의 value값이 생긴다면 프로그래스바가 채워지는 원리이다.
따라서

let progress=0;
let itemCount=5;
let itemCompleted=0;

progress는 0부터 시작을 해야하고
itemCount는 현재 입력받을 input의 갯수이다. (퍼센트로 계산하기 위함)
각 value값이 입력된 input을 카운팅하고 아래와 같이 계산이 되어 '%'로 계산이 된다.

progress=(itemCompleted/itemCount)*100
profile
JooSehyun
이전 포스트

[문제해결] Visual Studio Code : Configure User Snippets 설정 1

다음 포스트

Front-end 국비지원 #060일

0개의 댓글