jQuery Mobile CSS 类

jQuery Mobile CSS Class

jQuery CSS Class

jQuery Mobile CSS class to style different elements.

The following list contains common CSS styles:

Global classes

The following classes can be used in jQuery Mobile gadgets (buttons, toolbars, panels, Tables, lists, etc. ):

#ClassDescription##ui-corner-allui-shadow##ui-overlay-shadow Add multiple layers of shadows to elementsui-miniMake elements smaller


Add rounded corners to elements
Add shadow to elements

Button Class

In addition to the global class, you can specify <a> or Add the following class to the <button> element (not the <input> button):

ClassDescriptionui-btnAdded on the <a> element and displayed as a buttonui-btn-inlineon the same line Show button on topui-btn-icon-topPosition icon above button textui-btn -icon-rightPosition the icon to the right of the button textui-btn-icon-bottomPosition the icon below the button textui-btn-icon-left Position the icon to the left of the button textui-btn-icon-notext Only display the iconui-btn-a|bSpecify button demonstration. "a" is the default (black text style with gray background), "b" changes the color to white text with black background

Icon Classes

All available image classes are used on the <a> and <button> elements (see the jQuery Mobile Icon Reference Manual to learn how to use them on other elements) :

##ui-icon-alertExclamation mark within the triangleui-icon-audioAudio/Speakerui-icon-arrow-d-lLower left corner arrow##ui-icon-arrow-d-r##ui-icon-arrow-u-lUpper left arrowui-icon-arrow-u-rupper right corner arrowui-icon-arrow-lLeft corner arrowRight corner arrowUp arrowDown ArrowReturnThree horizontal lines, generally used to display list button icons ##ui-icon-calendarCalendar##ui-icon-cameraui-icon-carat-dui-icon -carat-l##ui-icon-carat-rright Sliding iconui-icon-carat-uSliding icon upui-icon-checkCheckAlarm clock云Comment/MessageDelete##ui-icon-editui-icon-eyeui-icon- forbidden##ui-icon-gear Gear, generally used to set button iconsui-icon-gridGridui-icon-heartHeart shape, can be used for article collection##ui-icon-home##ui-icon-infoInformationLocationLOCKMail/Envelope##ui-icon-minusui-icon-navigation##ui-icon-powerSwitch (On/off)ui-icon-plusplus signui-icon -recyclecycle Identification##ui-icon-search Search/Magnifying Glass##ui-icon-shopui-icon-star##ui-icon-tagtaguser/characterVideo/Camera##Theme Classes

Class	Icon Description	Icon
ui-icon-action	Action (generally used for page jump switching)



Lower right arrow


		##ui-icon-arrow-r
		##ui-icon-arrow-u
		ui-icon-arrow-d
		ui-icon- back
		ui-icon-bars

ui-icon-bullets	Used to display list button icons

Camera
Swipe down the icon
Slide icon left


		##ui-icon-clock
		##ui-icon-cloud
		ui-icon-comment
		ui-icon-delete
		Edit/Pencil
		eye
		forbidden sign

ui-icon-forward	Undo- (return to previous step)



首页
		##ui-icon-location
		ui-icon-lock
		##ui-icon-mail
		Minus
		Navigation
	##ui-icon-phone	Phone



ui-icon-refresh	Refresh

Shop/Shopping Bag
星
		##ui-icon-user
		ui-icon-video

jQuery Mobile provides two theme classes: a (gray) and b (black). However, you can create your own custom class - up to the letter "z" (see jQuery Mobile themes). The following table lists the available theme classes. The letters (a-z) mean that the style can be specified a through z. For example ui-bar-a or ui-bar-b etc.

Class

Descriptionui-bar-(a-z)Specified column Demo - Header, bottom and other columns ui-body-(a-z)Specify the color of the content block - page content part ( Version 1.4.0 is obsolete), list view, pop-up window, sidebar, panel, loading, collapse. ui-btn-(a-z)Specify button colorui-group-theme-(a-z)Defines the demo listviews and collapsible collections of the control group. ui-overlay-(a-z) Defines the page background color, including dialog boxes, pop-ups and other page containers that appear on the top levelui-page-theme-(a-z)Defines the page demo

Grid Class

Columns in a grid are equal width (totaling to 100%), with no borders, backgrounds, margins or padding. There are four layout grids available:

Grid Class	Columns	Column Width	Corresponds to	Instance
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 out

#For more information, see the jQuery Mobile Grid chapter.