1.11.4

News

Feb 16, 2013
Category: General
Posted by: admin
Another summary
Feb 16, 2013
Category: General
Posted by: admin
Another summary
Nov 4, 2011
Category: General
Posted by: admin
Summary here
CMS - 1.11.4 - Fernandina
 

Content formating

I'm a header

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

Header swatch A

I'm the collapsible content with a themed content block set to "C".

Header swatch A

I'm the collapsible content with a themed content block set to "A".

I'm a header

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

I'm a nested collapsible with a child collapsible

I'm a child collapsible.

Nested inside again.

Three levels deep now.

Section 3: Form elements

Section 4: Collapsed list

Here is an inset list:

Section 1

I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the data-collapsed="false" attribute.

Section 2

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 3

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 4

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

Section 5

I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

I'm a themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

I'm a themed collapsible with a themed content

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

I'm a themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

I'm a themed collapsible with a themed content

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

I'm a themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

I'm a themed collapsible with a themed content

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

I'm a themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

I'm a themed collapsible with a themed content

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

listas

Theming dividers

The theme for list dividers can be set by adding the data-divider-theme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">

Theming count bubbles

The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">

Theming icons

The default icon for each list item is arrow-r. To override this, set the data-icon attribute on the desired list item to the name of a standard icon. To prevent icons from appearing altogether, set the data-icon attribute to "false".


<li data-icon="info"><a href="#">Notices</a></li>
<li data-icon="alert"><a href="#">Alerts</a></li>
<li data-icon="false"><a href="#">No icon</a></li>

Theming split buttons

For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:

<ul data-role="listview" data-inset="true" data-split-theme="a">

To specify the color swatch for the icon button on the right, add the data-split-theme to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a data-theme attribute to specific links (see second list item).

The icon for the split theme can set at the list level by adding the data-split-icon to the list and specifying a standard icon. This attribute can also be added to individual split inside list items by adding a data-icon attribute to specific links (see second list item).

<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">

Examples of all basic list swatches

A swatch

B swatch

C swatch

D swatch

E swatch

Previous page: Gallery with swipe function  Next page: Form elements