List autodividers

Gabor Paller's picture

Another jQuery Mobile goodie for lists is the autodivider option. This option is also supported by the Tizen Web UI Framework. Autodivider automatically inserts dividers into the the list based on the list items' values.

The example project is attached to this post. You have to be logged in to Sfonge site to access it.

Autodivider is enabled by adding the data-autodividers parameter to the <ul> tag that defines the list.

<ul data-role="listview" data-autodividers="alpha">

The default value is "alpha" which means that the dividers are created from the list items' first character. Like in the picture:

 

The other option is data-autodividers="full". In this case the list elements' entire value is considered when creating the divider.

 

Attached file: 
Taxonomy upgrade extras: