I am trying out my first list view, and firs off scrolling is odd on my touch screen device. For example not every time I swipe does it move. Sometimes its like it gets stuck and doesn't register the swipe and instead just lights up the one entry.
Secondly as you can see in the screen shot, my activity list goes right up to both the right and left edges and looks a bit ugly.
data-inset is one way, but it might not be what you want.
It looks to me like you need some padding. Did you add some CSS to remove the default padding? There should be padding at the left/right.
It's up to you to adjust CSS to your own liking.
I do not recommend using listview if performance is important. It is a pig. It's probably the poorest-performance jQuery Mobile feature - especially when containing links, and even more especially the split-view.
Look at the generated HTML and you will see why. It's bloated.
Make your own list. It's not that hard. Listview is great for prototyping.
@watusiware: could you share some more hints on "listview - it is a pig and the poorest-performance jqm feature". listviews are such a elementary feature. sure i could build up my own UL/LI but then i would miss the css rendering to have a "nice look". are there any samples how to replace listviews?
could you share some more hints on "listview - it is a pig and the poorest-performance jqm feature"
I strongly suggest that anyone using JQM take a look at the generated HTML for a listview that contains links. For extra points, look at a split-button listview.
That's a lot of HTML! And a lot of class attributes! It is tremendously bulky.
Is all that HTML necessary? It is several times more HTML as is needed to do the job.
It does look nice, and is easy to use. It's a great prototyping tool.
It's not that hard to replace with your own HTML and CSS, but there is a caveat: it's easiest if you are using some backend that has templates and helpers. (e.g. Rails would be great). Then you can write a template or helper to generate a list item. Otherwise it would be quite painful to apply a complex list-item structure to long static lists.
An interim step that will get you some performance improvement without going whole-hog with your own list is to examine the generated HTML and to "pre-populate" the list items with the HTML and classes that the listview would create. Then don't use data-role="listview". Note that any dynamic features of the listview (not sure there are any?) will not work, since you will never instantiate a widget. Bascially, you are just borrowing the listview's CSS.
I'd urge your to just write your own list items with a simplified HTML structure and classes, and then you won't have to fight with the existing CSS to get it to look just the way you want it to look.
If you are producing static content, then I think it is nearly impossible to produce a JQM site without using a static site generator. I use one called Middleman. It gives you templates and helpers like Rails, but instead of being used on a server, it produces a static site.
I don't have any samples. It's just an HTML list, and CSS to style it! You can probably find thousands of examples on the net and in books. It's what you'd do if you didn't have the list view. You know - make a list, and then style it.
A reasonable approach is to write your own HTML/CSS for lists that are long or used a great deal, and use a listview for other lists. However, this does mean you have to stick to the standard JQM listview appearance.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic