JQUERY UI

LANGUAGE/JQUERY

옐옐루 2022. 6. 21. 17:14

ㅇ우리가 로직을 짠 결과물이 크롬에선 잘 나타날지 모르겠지만, 고객들이 사용하는 인터넷은 다를 수 있음.

ㅇ따라서 우리가 원하는 모양대로 혹은 사용자가 원하는 대로 화면에 나타나길 바랄땐, jquery의 ui에 가서 소스를 긁어오

면 됨

ㅇ 우리가 일반적으로 쓰는 input type의 date 형태는 크롬에서만 잘 먹힐때가 있음.

ㅇ 따라서 다른 인터넷을 사용하는 고객이 우리가 만든 홈페이지에 들어가면 date 형태가 제대로 안 뜰 수가 있음

ㅇ jquery의 ui 소스를 긁어와서 데이트 형태를 만들어주면 어느 브라우저에서나 먹힐 수 있는 형태로 데이트를 사용할 수 있음

ㅇ http://www.jquery.com - ui - datapicker - veiwsource에서 긁어오기

ㅇ 어느 브라우저로 들어가던 날짜는 이러한 형태로 뜰 수 있도록 설정 한 것

ㅇ 여기서 날짜에 나오는 영어를 한글로 바꾸거나, 다른 디자인적인 측면을 수정할 수도 있음

ㅇ http://www.jquery.com - ui - datapicker - veiwsource 아래에 API document 에 들어가서 확인해보기

ㅇ 빨간 박스 안에 객체를 하나 생성해주기 , 대괄호 쳐주고 그 안에 바꾸고 싶은 아이들을 와르르 써주면 됨

ㅇ 객체는 내가 지정해줄 수 없고, API안에 들어가 있는 애들을 활용할 수 있음

-- dateFormat : 날짜 형태가 나오는 포맷을 바꿔주는 아이

-- changeMonth : 월을 바꿀 수 있는 셀렉트 박스 표시하게 해주는 아이 (true 를 해주면 셀렉트 박스가 생김)

-- monthNamesShort : 월의 이름을 내가 원하는 형태로 바꾸는 방식

-- showMonthAfterYear : true, 연도 뒤에 month 나오게 하는 애들

-- changeYear : true , 년을 바꿀 수 있는 셀렉트 박스 표시 하는 애들

-- yearSuffix : '년', // "2020년 3월"

-- showOtherMonths : true, : 다른 월 날짜도 약한 회색으로 나올 수 있도록

-- dayNamesMin:['일','월','화','수','목','금','토']

--minDate : '-100y', 현재 날짜로부터 100년 이전까지 표시

-- yearRange : 'c-100' : c+0 // 셀렉트 박스에 표시될 연도

-- minDate : 0

ㅇ 만약 화면단에 캘린더 형태를 뿌리고 싶다면 input 대신 div 형태로 변환해주면 된다

ㅇ 특히 홈페이지를 만들때 예약서비스를 행할 경우 예약일을 나타내는 캘린더를 나타내려면 이미 지나간 날짜는 보이지 않아도 되기 때문에 minDate : 0 을 해주면 지나간 날짜가 선택이 안됨

ㅇ jquery 의 ui 단에서 tabs 과 관련된 소스 긁어오기

ㅇ 보통 관리자와 사용자의 로그인이 따로 이루어 져야 할 경우 많이 사용한다