jQuery Mobile 클...login
jQuery Mobile 클래식 튜토리얼
작가:php.cn  업데이트 시간:2022-04-11 13:58:34

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> 버튼 아님):

ClassDescription
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 아이콘 참조 설명서 참조):

는 아이콘 오른쪽ui-icon-carat-u아이콘을 위로 스와이프하세요ui-icon-checkCheck UI 아이콘 -시계알람시계ui-icon-cloudcloudui-icon-comment댓글/메시지ui-icon-delete삭제 ui-icon-editedit/pencilui-icon-eyeeyes bidden
Class아이콘 설명icon
ui-icon-actionaction(일반적으로 페이지 점프 전환에 사용됨)action
ui-icon-alert 느낌표 markalert
ui-icon-audio오디오/스피커audio
ui-icon-arrow-d-l왼쪽 하단 화살표arrow-d-l
ui-아이콘-화살표 - d-r오른쪽 아래 화살표arrow-d-r
ui-icon-arrow-u-l왼쪽 위 화살표arrow-u-l
ui-icon-arrow-u-r오른쪽 위 화살표 arrow-u-r
ui-icon-arrow-l왼쪽 모서리 화살표arrow-l
ui-icon-arrow-r오른쪽 모서리 화살표arrow-r
ui-icon-arrow-uup arrow arrow-u
ui-icon-arrow-d아래쪽 화살표arrow-d
ui-icon-backbackback
ui-icon-bars 세 개의 가로 라인, 일반적으로 목록 버튼 아이콘을 표시하는 데 사용됩니다bars
ui-icon-bullets 목록 버튼 아이콘 표시용bullets
ui-icon-calendarcalendarcalendar
ui-icon-cameracamera camera
ui-icon-carat-d아이콘을 아래로 스와이프carat-d
ui-icon-carat-l아이콘을 왼쪽으로 스와이프carat-l
ui-icon-carat-rcarat-r
carat-u
check
clock
cloud
comment
delete
edit
eye
forbidden 로고 사인 forbidden
ui-icon-forwardUndo- (이전 단계로 돌아가기)forward
ui-icon-geargear, 일반적으로 버튼 아이콘을 설정하는 데 사용됩니다gear
ui-icon- 그리드 Gridgrid
ui-icon-heart하트 모양, 기사 수집에 사용할 수 있음heart
ui-icon-homeHomepagehome
ui -icon -infoinformationinfo
ui-icon-locationlocationlocation
ui-icon-locklocklock
ui-아이콘-메일 메일/봉투 mail
ui-icon-minusminusminus
ui-icon-navigationnavigationnavigation
ui -icon-phonePhone phone
ui-icon-power 스위치(켜기/끄기)power
ui-icon-plusplusplus
ui-icon-recycle 루프 로고 recycle
ui-icon-refreshrefreshrefresh
ui-icon-search검색/돋보기search
ui-icon-shop샵/쇼핑백 shop
ui-icon-starstarstar
ui-icon-tagtagtag
ui-icon-user사용자/사람 user
ui-icon-videoVideo/Cameracamera1


테마 클래스

jQuery Mobile은 a(회색)와 b(검은색)의 두 가지 테마 클래스를 제공합니다. 그러나 최대 문자 "z"까지 사용자 정의 클래스를 만들 수 있습니다(jQuery Mobile 테마 참조). 다음 표에는 사용 가능한 테마 클래스가 나열되어 있습니다. 문자(a-z)는 스타일을 a부터 z까지 지정할 수 있음을 의미합니다. 예를 들어 ui-bar-a 또는 ui-bar-b 등

ClassDescription
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 classcolumncolumn widthcorrespondinginstance
ui-grid-solo1100% ui-블록- a 사용해 보세요
ui-grid-a250% ​​​​/ 50%ui-block-a|b 사용해 보세요
ui-grid-b 333% / 33% / 33%ui-block-a|b|c 해 보세요
ui-grid-c425% / 25% / 25% / 25 %ui-block-a|b|c|d 사용해 보세요
ui-grid-d520% / 20% / 20% / 20% / 20% ui- block-a|b|c|d|e사용해 보세요

자세한 내용은 jQuery Mobile Grid 장을 확인하세요.

PHP 중국어 웹사이트