본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
반응형

jQuery-Mobile33

jQuery Mobile 네이티브 폼 — data-role="none" 완전 정리 Web Development · jQuery MobilejQuery Mobile 네이티브 폼 —data-role="none" 완전 정리jQM 위젯 변환을 끄고 표준 HTML 폼으로 보이기시작 오늘 분석할 코드jQM 페이지 안의 form인데 모든 입력에 data-role="none"이 붙어 있다. 이건 jQM의 예쁜 위젯 변환을 끄고 네이티브 HTML 폼 모양을 그대로 두는 패턴이다. method="get" action="form.jsp"> 동아리 회원 가입 필수 정보 for="s_id">학번 type="text" id="s_id" data-role="none"/> for="s_name">성명 id="s_name" data-role="none"/> … type="submit" value=".. 2026. 6. 25.
jQuery Mobile 토글 스위치 — select + data-role="slider" 완전 정리 Web Development · jQuery MobilejQuery Mobile 토글 스위치 —select + data-role="slider"두 옵션을 좌우로 끌어 선택하는 스위치 위젯시작 오늘 분석할 코드option이 정확히 2개인 select에 data-role="slider"를 붙이면 jQM이 좌우 토글 스위치로 변환한다. 라디오 버튼보다 모바일에서 더 직관적이다. data-role="fieldcontain"> for="gender1">성별 name="gender" id="gender1" data-role="slider"> value="male">남자 value="female">여자 실제 출력 미리보기header 영역성별 남자여자(다른 상태) 남자여자footer 영역용어 핵심 키워드dat.. 2026. 6. 24.
jQuery Mobile 텍스트영역 — textarea cols, rows 완전 정리 Web Development · jQuery MobilejQuery Mobile 텍스트영역 —textarea, cols, rows 완전 정리긴 글을 여러 줄로 받아내는 입력 박스시작 오늘 분석할 코드input은 한 줄짜리 입력이지만 textarea는 여러 줄이다. fieldcontain으로 감싸 label과 함께 정렬한다. data-role="fieldcontain"> for="txtarea1">도시설명 cols="25" rows="5" id="txtarea1"> 실제 출력 미리보기header 영역도시설명 footer 영역용어 핵심 키워드textarea여러 줄 텍스트 입력 — input의 long 버전cols가로 너비 — 글자 단위 (대략적)rows세로 줄 수 — 보이는 줄 수자동 높이 늘림jQM은 .. 2026. 6. 24.
jQuery Mobile 입력 타입 — password, number, email, tel, url, search 완전 정리 Web Development · jQuery MobilejQuery Mobile 입력 타입 —password · number · email · tel · url · searchtype 속성으로 모바일 키보드와 검증을 자동 전환시작 오늘 분석할 코드같은 input 태그지만 type 속성만 바꾸면 모바일에서 뜨는 키보드 모양과 자동 검증 규칙이 달라진다. 6가지 타입을 한 번에 본다. type="password" id="input1" placeholder="패스워드를 입력하세요"/> type="number" id="input2" placeholder="숫자를 입력하세요"/> type="email" id="input3" placeholder="이메일을 입력하세요"/> type="tel" id="input.. 2026. 6. 24.
반응형

티스토리툴바