Demo: Tile layout for list items

[vpxavier]

Hello everyone,
before using JQM, I used to code with Adobe Flex.
It has a feature that I'm missing a lot: the tile container:
http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#docIndex=0;sampleId=4300;illustIndex=0

Would it be possible for you to add this feature?

The goal is to have a grid automatically created with equal sized tiles; so each list item is a tile.
I think this could be done using float:left.

The filter option would be a nice to have.
Thanks in advance

[jaspermdegroot]

@vpxavier

If I understand you correctly you mean automatically apply layout grids (http://jquerymobile.com/test/docs/content/content-grids.html).

The framework has a grid function that adds the grid and block classes. This is used for the navbar, but you can use this function for other markup as well.

You can specify the number of columns with the option grid (a=2, b=3, c=4, d=5 columns). The framework does not contain CSS for more than 5 columns.

$( "#selector" ).grid( { grid: "b" } );

Here is a code example: http://jsbin.com/ikisux/7/edit

If you just call grid() without options or set option grid to null the function will count the number of child elements. If this is more than 5, grid "a" (2 column) will be applied.

Keep in mind that it's just a function and not a real widget. So a method like grid( "refresh" ) won't work. See ticket #2126.

We will add this information to the docs.

Important note: There was a bug in this function. In 1.1.1 and earlier versions specifying the number of columns does not work. This is fixed in latest code and 1.2.

[frequent]

you could also set this up pretty easy by overriding the listview CSS. This way, the grid/tiles would adapt to the screen width vs being fixed in a grid-layout.

[vpxavier]

Hello, thanks for your answers and the time spent.
I know the grid feature, but I would really need this as a list to benefit from the filter option.
As @frequent also said it, I would love it to automatically adapt to the screen width.
The idea is to have items that are automatically put in a "grid layout" but without knowing the items widths (that should be a parameter) and the screen width, even if you don't know in advance how many items you have and without the limitation of 5 items per rows.

Thanks again.

[frequent]

I'll post an example of how I'm doing this tomorrow. Maybe you can use it.

[frequent]

ok. I just ripped this out of a page, so you will have to fit it to your need. To use it, set class iconList on a data-role="listview". The CSS will override JQMs CSS and convert the list to icon only tiles. You will need to tweak some of the CSS, since I'm only using icons (CSS is for a springboard menu), but this should get you on the right track:

.iconList  {
display: inline-block; 
margin: 1em 0px !important; 
padding: 0 2% 50px; 
width: 96%; 
}   
.iconList li {
display: inline; 
float: left; 
width: 24%; 
min-width: 65px; 
max-width: 100px; 
padding: 0 0 30px 0;
border-width: 0 !important; 
background: none !important;
}
.iconList li > a, .iconList li .ui-btn-inner .ui-btn-text a {
margin: 0 auto;
padding: 0;
position: relative;
overflow: visible !important;
}
.iconList li > a h3, .iconList li .ui-btn-inner .ui-btn-text a h3 {
position: absolute !important;
bottom: -16px;
}
.iconList li > a span, .iconList li .ui-btn-inner .ui-btn-text a span {
padding: 1px 2px;
    position: absolute;
    right: -0.5em;
    top: -0.75em;
}
.iconList li:first-child {
border-width: 0 !important; 
border: 1px solid #ccc; 
border-top-right-radius: 0px; 
-moz-border-radius-topright: 0px; 
-webkit-border-top-right-radius: 0px; 
border-top-right-radius: 0px;
}
.iconList li:last-child {
border-bottom-width: 0 !important; 
border-bottom-left-radius: 0px; 
-moz-border-radius-bottomleft: 0px; 
-webkit-border-bottom-left-radius: 0px; 
}
.iconList li div.ui-btn-inner {
width: auto; 
border-width: 0 !important; 
text-align: center;
}
.iconList li a {
margin-right: 0; 
padding: 0 2px 0 0 !important;
}
.iconList li .ui-link-inherit {
padding-left: 0px;
}
.ui-li-thumb, .ui-li-icon {
max-width: 114px; max-height:114px;
}
.iconList li img {
margin-right: 0; 
width: 100%;
position: static !important; 
float: none !important;
padding-bottom: 9px; 
max-width: 114px;
}
.iconList li h3 {
display: block; 
position: static !important; 
margin: 0 auto; 
padding-top: 0; 
font-weight: normal; 
text-align: center;
width: 100%; 
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;
}

[ghost]

This is an absolute killer feature for any app since you don't wanna have one list item per row on a large wide screen. It's killing the user experience when it could have been showing 5-6 tiles per row. Excellent for results based on list filter.

I could make a contribution of 200 dollars if this get released in the next version :)

[toddparker]

I think we could probably add a few demos or even a class you could tack on to make this work but there is a lot of variety in styles people might need. Good candidate for more demos in 1.3.

[toddparker]

Possible demos: Spring board style with smaller icons, photo grid, product result grid

[ghost]

Sounds that you have covered all major styles.

Good for me I was serious about that contribution :)

[toddparker]

We've decided to make a demo for this, but not shop it as part of the core library for 1.3

[ghost]

Why?

I dont get the demo thing. How can we do the same thing?

[toddparker]

There will be a new demo site with 1.3 that will have lots of customization examples with code you can copy and paste.