Friday, April 5, 2013

Jquery Mobile - List dividers

    How about organizing your listview items? You can organize your listview items by adding the list dividers to have a well organized listview page. In the example that follows, let us take a look at how we can achieve this.

    Like any other Jquery example this too can be achieved in a very simple and easy way. Just add the data-role="list-divider" to any list item that you want to specify as a list divider. Adding data-role="list-divider" will style that list item as a blue bar - blue being the default swatch theme. In the example that follows, we have 3 list divider list items (li) which are - "Interesting Articles", "Google Maps API" and "Jquery Mobile"



    Hope you have followed the example above. We still have got a few more listview examples in the pipeline before we take the next step in Jquery Mobile framework. In case you have any doubts or have not followed the example, drop a comment and I will be happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!