Search jQuery

jQuery Forum

jQuery Mobile

adrian.he..

Collapsible Content + Count Bubble and Non Header Persistant Element

in jQuery Mobile • 10 years ago

Hi Guys,

I have two questions for you,

1) Can the Count Bubble be used on Collapsible Content items?

2) Can data-position="fixed" be applied to non header elements?

To expound upon the above:

1) I have the below code block and I want to be able to display a Count Bubble in the <h3> that displays a count of all the <li> items.

<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h3>View Notes</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#view-note">Call Bob</a></li>
<li><a href="#view- note">Email Smith</a></li>
<li><a href="#view- note">Meet Joe</a></li>
<li><a href="#view- note">BRW Report</a></li>
</ul>
</div>

2) I have the below code block and I want to have #fixed hang out at the top of the screen as the user flicks down and loads in more content as #fixed contains a content specific short cut buttons.

<div data-role="page" data-theme="b">
<div data-role="header" data-theme="d">
<h1>Contacts</h1>
</div>
<div data-role="content">
<div id="fixed" data-theme="d" data-position="fixed">
<a href="#" data-role="button" data-theme="b" data-inline="true">Button 1</a>
<a href="#" data-role="button" data-theme="b" data-inline="true">Button 2</a>
</div>
<form action="contacts.html" method="get" accept-charset="utf-8">
<div data-role="fieldcontain">
<label for="contacts_search">Contact Search:</label>
<input type="search" name="property_search" id="property_search" value="" />
</div>
<div data-role="fieldcontain">
<label for="orderby_by" class="select">Order By:</label>
<select name="orderby_by" id="orderby_by">
<option value="first_name">First Name</option>
<option value="last_name">Last Name</option>
<option value="Company">Company</option>
</select>
</div>
</form>
<ul data-role="listview" data-inset="true">
<li>
<a href="#contact-detail"><h3>John Smith</h3></a>
<p>ACME Inc.</p>
</li>
<li>
<a href="#contact-detail"><h3>John Smith</h3></a>
<p>ACME Inc.</p>
</li>
</ul>
<div data-role="fieldcontain">
<a href="javascript:void(0);" data-role="button" data-theme="b">View next 10 results...</a>
</div>
</div>
</div>

With both of these issues I am currently only interested in iOS solutions as these are the primary devices that this product is being developed for.

Cheers,

Replies(5)

argrithma..

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

10 years ago

I don't have an answer, just a horrible hack for question 1....

I added to my page this:

<div data-role="collapsible" data-collapsed="true">
<h2>Order Lines <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">234</span></h2>
<div data-role="fieldcontain">

While it works, the obvious problem is that if they change the overall theme to a different theme, then the ui-btn-up-c may not be appropriately themed.

If you get rid of the hard coded theme, you'll get the number showing up correctly, but no "button" look surrounding it.

crc1024

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

9 years ago

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>
<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>
</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!

kd0g25

Re: Re: Collapsible Content + Count Bubble and Non Header Persistant Element

9 years ago

Change each span's style to float : right.

twisha.trp

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

9 years ago

how about something like this?

http://jsfiddle.net/tdesai/NcHk8/

danast

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

8 years ago

This works:

var outContent = <...some html content to be filled into somewhere...>

var myArray = <...some content fields....>

....yaddayadda.......code.....

.....

outContent += '<div data-role="collapsible">';

//heading collapsible 2

outContent += '<h3><table style="width:100%;"><tr><td style="width:90%;">Bilder</td><td style="width;10%;"><div class="ui-li-has-count ui-li-count ui-btn-up-c ui-btn-corner-all" style="text-align:center;">'+myArray.length+'</div></td></tr></table></h3>';

Top Reply

Response title

Attachments

jQuery Forum

Collapsible Content + Count Bubble and Non Header Persistant Element

Replies(5)

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

Re: Re: Collapsible Content + Count Bubble and Non Header Persistant Element

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

Re: Collapsible Content + Count Bubble and Non Header Persistant Element

Statistics

Tags

Actions