I was utilizing a form of this hack to create the following (in 1.0b3):
These items are formed by an XSLT through a master XML, so I'll just give you the HTML for one line without all the XSLT:
- <div data-role="collapsible">
- <h3>
- Hower
- <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:50px;">
- <img src="rocky-icons/restrict.png" alt="No" width="16px" height="16px"/>
- <img src="rocky-icons/cool.png" alt="F" width="16px" height="16px"/>
- <img src="rocky-icons/wine-glass.png" alt="T" width="16px" height="16px"/>
- </span>
- <span class="ui-li-has-count ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:15px;">1</span>
- </h3>
- <!-- below the fold material here -->
- <a href="index.pl?uid={@id}&call=upd_UnitFresh" data-role="button" data-inline="true" data-ajax="false">Fresh</a>
- <a href="index.pl?uid={@id}&call=upd_UnitTD" data-role="button" data-inline="true" data-ajax="false">Turn</a>
- <!-- end below the fold material -->
- </div>
The material below the fold is just a few buttons. They still look great and function properly. Anyway, the idea is that each line has all necessary information on it for the decisions that need to be made, then the user selects one of the lines to access the buttons and enter an input. Very efficient and easy to use.
Unfortunately, today I upgraded to 1.0 Final, and now the bubbles don't work. Here is what I get:
This is not optimal ;) I know I'm hacking the bubbles onto the accordion list, but as you can see, it is very informative and useful to have them there (Accessory bubbles should be included for all horizontal lists!).
Anyway, does anyone know an elegant solution to rebuilding the 1.0b3 look, in the 1.0Final? Alternatively, is there a more elegant way for me to accomplish the goal?
Thanks!