In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.
Let's take a look at a few of them. Some questions are really amazing like "When i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview?" Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.
Another really nice question was "Listview with collapsable listview inside". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfiddles. There is this another enhancement where we can "Add a count bubble to a collapsible listview header ". We had see an example on listviews with count bubbles. We can add the class "ui-li-count" to only list dividers or simple listview. We cannot add it to a collapsible list. Here is a solution wherein we can achieve it with the closest possible style.
Some minor looking style changes like "Changing collapsible div color" can also be easily achieved with something as seen in this solution. On a number of occasions when we are deep into coding something really complex we tend to forget the most basic stuff and then end up facing issues like "Adding a missing icon to a listview". Well the solution to this was very obvious and simple. The link/anchor tag that is required to get an "arrow-r" icon on the listview was definitely missing. Here is a link to the details of the issue.
Hope it has been a fun ride for you all so far. Hope you have enjoyed the series on listview and enjoying exploring the Jquery Mobile framework. Drop a line to appreciate, criticize, comment or ask a doubt and share if you have enjoyed the post. I would be happy to help!
Let's take a look at a few of them. Some questions are really amazing like "When i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview?" Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.
Another really nice question was "Listview with collapsable listview inside". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfiddles. There is this another enhancement where we can "Add a count bubble to a collapsible listview header ". We had see an example on listviews with count bubbles. We can add the class "ui-li-count" to only list dividers or simple listview. We cannot add it to a collapsible list. Here is a solution wherein we can achieve it with the closest possible style.
Some minor looking style changes like "Changing collapsible div color" can also be easily achieved with something as seen in this solution. On a number of occasions when we are deep into coding something really complex we tend to forget the most basic stuff and then end up facing issues like "Adding a missing icon to a listview". Well the solution to this was very obvious and simple. The link/anchor tag that is required to get an "arrow-r" icon on the listview was definitely missing. Here is a link to the details of the issue.
Hope it has been a fun ride for you all so far. Hope you have enjoyed the series on listview and enjoying exploring the Jquery Mobile framework. Drop a line to appreciate, criticize, comment or ask a doubt and share if you have enjoyed the post. I would be happy to help!
Comments
Post a Comment
Please leave your comments here...