jQuery를 CSS의 클래스
jQuery를 모바일은 다른 요소의 스타일을 CSS 클래스를 사용합니다.
아래의 참조 목록을 위해, 우리는 일반적인 스타일에 대한 CSS 클래스를 포함하고있다.
글로벌 클래스
이러한 클래스는 어떤 jQuery를 모바일 위젯 (에 추가 할 수있는 buttons, toolbars, panels, tables, lists , 등)
| 수업 | 기술 |
|---|---|
| ui-corner-all | 요소에 둥근 모서리를 추가합니다 |
| ui-shadow | 요소에 그림자를 추가합니다 |
| ui-overlay-shadow | 요소에 오버레이 그림자를 추가합니다 |
| ui-mini | 요소 작은 만든다 |
버튼 클래스
글로벌 클래스 외에도 다음 클래스를 추가 할 수 있습니다 <a> 또는 <button> 요소 (안 <input> 버튼) :
| 수업 | 기술 |
|---|---|
| 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" 흰색 텍스트와 검은 배경에 색상을 변경합니다 |
아이콘 클래스
모든 사용 가능한 아이콘 클래스 <a> 과 <button> 요소 (참조 아이콘 참조 다른 요소에 아이콘을 사용하는 방법에 대한 일) :
| 수업 | 아이콘 설명 | 상 |
|---|---|---|
| ui-icon-action | 액션 (상자 중 아크를 시계 방향으로 화살표) | |
| ui-icon-alert | 삼각형 안에 느낌표 | |
| ui-icon-audio | 사운드 / 스피커 | |
| ui-icon-arrow-d-l | , 왼쪽 화살표 아래로 | |
| ui-icon-arrow-d-r | , 오른쪽 화살표 아래로 | |
| ui-icon-arrow-u-l | 왼쪽 위쪽 화살표 | |
| ui-icon-arrow-u-r | 오른쪽 위쪽 화살표 | |
| ui-icon-arrow-l | 왼쪽 화살표 | |
| ui-icon-arrow-r | 오른쪽 화살표 | |
| ui-icon-arrow-u | 위쪽 화살표 | |
| ui-icon-arrow-d | 아래쪽 화살표 | |
| ui-icon-back | 뒤로 (곡선 화살표가 위쪽으로 반 시계 방향으로 아크) | |
| ui-icon-bars | 서로 위에 세 수평 바 | |
| ui-icon-bullets | 서로 위에 세 가로 글 머리 기호 | |
| ui-icon-calendar | 달력 | |
| ui-icon-camera | 카메라 | |
| ui-icon-carat-d | 아래 캐럿 | |
| ui-icon-carat-l | 왼쪽 캐럿 | |
| ui-icon-carat-r | 오른쪽 캐럿 | |
| ui-icon-carat-u | 캐럿까지 | |
| ui-icon-check | 체크 표시 | |
| ui-icon-clock | 시계 | |
| ui-icon-cloud | 구름 | |
| ui-icon-comment | 댓글 / 메시지 | |
| ui-icon-delete | 지우다 | |
| ui-icon-edit | 편집 / 연필 | |
| ui-icon-eye | 눈 | |
| ui-icon-forbidden | 금지 된 기호 | |
| ui-icon-forward | 포워드 - (위쪽 곡선 화살표 아킹 시계 방향) | |
| ui-icon-gear | 기어 | |
| ui-icon-grid | 그리드 | |
| ui-icon-heart | 심장 / 사랑의 상징 | |
| ui-icon-home | 홈 / 하우스 | |
| ui-icon-info | 정보 | |
| ui-icon-location | 위치 | |
| ui-icon-lock | 잠금 / 자물쇠 | |
| ui-icon-mail | 메일 / 문자 | |
| ui-icon-minus | 빼기 기호 | |
| ui-icon-navigation | 항해 | |
| ui-icon-phone | 전화 | |
| ui-icon-power | 전원 (ON / OFF) | |
| ui-icon-plus | 더하기 기호 | |
| ui-icon-recycle | 재활용 기호 | |
| ui-icon-refresh | 새로 고침 - 원형 화살표 | |
| ui-icon-search | 검색 / 돋보기 | |
| ui-icon-shop | 쇼핑 / 가방 | |
| ui-icon-star | 별 | |
| ui-icon-tag | 꼬리표 | |
| ui-icon-user | 사용자 / 사람 | |
| ui-icon-video | 비디오 카메라 |
테마 클래스
A (회색)와 b (검정) : jQuery를 모바일이 테마 클래스를 제공합니다. 그러나, 당신은 또한 자신의 사용자 정의 클래스 값을 생성 할 수 있습니다 - 모든 방법을 문자까지 "z" (테마 장을 참조하십시오). 아래의 표는 사용 가능한 테마 클래스를 나열합니다. 문자 (az) 당신이 A에서 Z 편지를 지정할 수 있다는 것을 의미한다. 예를 들면 다음과 같습니다 ui-bar-a 또는 ui-bar-b 등
| 수업 | 기술 |
|---|---|
| ui-bar-(a-z) | 머리글, 바닥 글 및 기타 바 - ㄱ 막대 색상을 지정합니다 |
| ui-body-(a-z) | (버전 1.4.0에서 사용되지 않음) 페이지의 콘텐츠 창, 목록보기 항목, 팝업, collapsibles, 로더, 슬라이더, 및 패널 - 콘텐츠 블록의 색상을 지정합니다 |
| ui-btn-(a-z) | 버튼 (및 아이콘)의 색상을 지정합니다 |
| ui-group-theme-(a-z) | controlgroups, ListView도 및 축소 세트의 색상을 지정합니다 |
| ui-overlay-(a-z) | 다이얼로그가 팝업 페이지 및 다른 용기의 상부에 표시되는 페이지의 배경색을 지정 |
| ui-page-theme-(a-z) | 페이지의 색상을 지정합니다 |
그리드 클래스
그리드의 열이없는 테두리, 배경, 여백이나 패딩, 동일한 폭 (총 넓은 100 %)의이다. 사용할 수있는 다섯 가지 레이아웃 격자가 있습니다 :
| 그리드 클래스 | 열 | 열 너비 | 에 해당 | 예 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
그리드에 대한 자세한 내용은, 우리의 읽기 jQuery를 모바일 그리드 장 .