jQuery Mobile CSS 유형
jQuery Mobile CSS Classes
jQuery CSS Classes
jQuery Mobile CSS 클래스를 사용하여 다양한 요소의 스타일을 지정할 수 있습니다.
다음 목록에는 일반적인 CSS 스타일이 포함되어 있습니다.
전역 클래스
다음 클래스는 jQuery Mobile 위젯(버튼, 도구 모음, 패널, 테이블, 목록 등)에서 사용할 수 있습니다.
Class | 설명 |
---|---|
ui-corner-all | 요소에 둥근 모서리 추가 |
ui-shadow | 요소에 그림자 추가 |
ui-overlay-shadow | 요소에 다중 레이어 그림자 추가 |
ui-mini | 요소를 더 작게 만들기 |
버튼 클래스
글로벌 클래스 외에도 <a> <button> 요소는 다음 클래스를 추가합니다(<input> 버튼 아님):
Class | Description |
---|---|
ui-btn | <a> 요소에 추가하고 다음과 같이 표시합니다. 버튼 |
ui-btn-inline | 버튼을 같은 줄에 표시 |
ui-btn-icon-top | 버튼 텍스트 위에 아이콘 위치 |
ui-btn-icon-right | 아이콘 위치 아이콘을 버튼 텍스트 오른쪽에 배치하세요 |
ui-btn-icon-bottom | 아이콘을 버튼 텍스트 아래에 배치하세요 |
ui-btn-icon-left | 아이콘을 버튼 텍스트 아래에 배치하세요 버튼 텍스트 왼쪽 |
ui -btn-icon-notext | 아이콘만 표시 |
ui-btn-a|b | 버튼 데모를 지정하세요. "a"는 기본값(회색 배경의 검정색 텍스트 스타일)이고, "b"는 검정색 배경의 흰색 텍스트로 색상을 변경합니다 |
Icon 클래스
<a> 및 <button> 요소에 사용되는 모든 이미지에 대한 클래스(다른 요소에서 사용하는 방법은 jQuery Mobile 아이콘 참조 설명서 참조):
Class | 아이콘 설명 | icon |
---|---|---|
ui-icon-action | action(일반적으로 페이지 점프 전환에 사용됨) | |
ui-icon-alert | 느낌표 mark | |
ui-icon-audio | 오디오/스피커 | |
ui-icon-arrow-d-l | 왼쪽 하단 화살표 | |
ui-아이콘-화살표 - d-r | 오른쪽 아래 화살표 | |
ui-icon-arrow-u-l | 왼쪽 위 화살표 | |
ui-icon-arrow-u-r | 오른쪽 위 화살표 | |
ui-icon-arrow-l | 왼쪽 모서리 화살표 | |
ui-icon-arrow-r | 오른쪽 모서리 화살표 | |
ui-icon-arrow-u | up arrow | |
ui-icon-arrow-d | 아래쪽 화살표 | |
ui-icon-back | back | |
ui-icon-bars | 세 개의 가로 라인, 일반적으로 목록 버튼 아이콘을 표시하는 데 사용됩니다 | |
ui-icon-bullets | 목록 버튼 아이콘 표시용 | |
ui-icon-calendar | calendar | |
ui-icon-camera | camera | |
ui-icon-carat-d | 아이콘을 아래로 스와이프 | |
ui-icon-carat-l | 아이콘을 왼쪽으로 스와이프 | |
ui-icon-carat-r | 는 아이콘 오른쪽||
아이콘을 위로 스와이프하세요 | ||
Check | ||
알람시계 | ||
cloud | ||
댓글/메시지 | ||
삭제 | ||
edit/pencil | ||
eyes | ||
forbidden 로고 사인 | ||
ui-icon-forward | Undo- (이전 단계로 돌아가기) | |
ui-icon-gear | gear, 일반적으로 버튼 아이콘을 설정하는 데 사용됩니다 | |
ui-icon- 그리드 | Grid | |
ui-icon-heart | 하트 모양, 기사 수집에 사용할 수 있음 | |
ui-icon-home | Homepage | |
ui -icon -info | information | |
ui-icon-location | location | |
ui-icon-lock | lock | |
ui-아이콘-메일 | 메일/봉투 | |
ui-icon-minus | minus | |
ui-icon-navigation | navigation | |
ui -icon-phone | Phone | |
ui-icon-power | 스위치(켜기/끄기) | |
ui-icon-plus | plus | |
ui-icon-recycle | 루프 로고 | |
ui-icon-refresh | refresh | |
ui-icon-search | 검색/돋보기 | |
ui-icon-shop | 샵/쇼핑백 | |
ui-icon-star | star | |
ui-icon-tag | tag | |
ui-icon-user | 사용자/사람 | |
ui-icon-video | Video/Camera |
테마 클래스
jQuery Mobile은 a(회색)와 b(검은색)의 두 가지 테마 클래스를 제공합니다. 그러나 최대 문자 "z"까지 사용자 정의 클래스를 만들 수 있습니다(jQuery Mobile 테마 참조). 다음 표에는 사용 가능한 테마 클래스가 나열되어 있습니다. 문자(a-z)는 스타일을 a부터 z까지 지정할 수 있음을 의미합니다. 예를 들어 ui-bar-a 또는 ui-bar-b 등
Class | Description |
---|---|
ui-bar-(a-z) | 지정된 열 데모 - 헤더, 하단 및 기타 열 |
ui-body-(a-z) | 지정된 콘텐츠 블록 색상 - 페이지 콘텐츠의 일부( 버전 1.4.0은 더 이상 사용되지 않음), 목록 보기, 팝업 창, 사이드바, 패널, 로드, 축소. |
ui-btn-(a-z) | 버튼 색상 지정 |
ui-group-theme-(a-z) | 그룹을 제어하는 데모 목록 보기 및 축소 가능한 컬렉션을 정의합니다. |
ui-overlay-(a-z) | 은 대화 상자, 팝업 및 최상위 페이지에 나타나는 기타 페이지 컨테이너를 포함하여 페이지 배경색을 정의합니다. |
ui-page-theme-(a-z) | 정의 페이지 데모를 받았습니다 |
그리드 클래스
그리드의 열은 너비가 동일하며(전체 100%) 테두리, 배경, 여백 또는 패딩이 없습니다. 여기에는 네 가지 레이아웃 그리드가 있습니다.
grid class | column | column width | corresponding | instance |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-블록- a | 사용해 보세요 |
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 사용해 보세요 |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 해 보세요 |
ui-grid-c | 4 | 25% / 25% / 25% / 25 % | ui-block-a|b|c|d | 사용해 보세요 |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui- block-a|b|c|d|e | 사용해 보세요 |
자세한 내용은 jQuery Mobile Grid 장을 확인하세요.