JQuery mobile: Replace thumbnail with data element
In JQuery mobile listview, how can I replace the left-side thumbnail image with a data element?

Say I have a list of daily exercise tips.  Instead of an image to the left, I want to show the "Day" of the tip.  Like this:

4  Lift some weights --> <br />
3  Do some squats -->  <br />
2  Do some pushups -->  <br />
1  Stretch your muscles -->  <br />

Assume in the "tips" model, there's a field for "Day", just like there's a field for content. Day is a number.

So, instead of this current code (which works to put a img to the left)

    <div data-role="content" data-theme="d" >
      <div class="content-primary">
        <ul data-role="listview" >
          <% @all_challenges.each do |tip| %>
            <li><a href="#">
					<img src="/images/icondock/accept2.png" class="ui-li-icon">
					<h3><%= tip.outboundtitle %></h3>
				</a>
					<ul><!-- Second page with full tip -->
						<li>
							<br />
							<p><%= tip.outgoing %></p>
						</li>
					</ul>
			</li>
		<% end %>
	</ul>
  </div>		
</div>

I want to replace that <!-- <img src> line with a data element: <%= tip.day %>

What I can't figure out is how to let JQuery Mobile let me keep that great 32X32 space to the left, but not expect an image there.  I want to put a big number (day) in there.

If I replace the img src line with <!-- <h2><%= tip.day %></h2> it just puts the number on **TOP** of the tip, and both are left justified.  Two lines.

Any ideas?


JQuery mobile: Replace thumbnail with data element
===

In JQuery mobile listview, how can I replace the left-side thumbnail image with a data element?

Say I have a list of daily exercise tips.  Instead of an image to the left, I want to show the "Day" of the tip.  Like this:

4  Lift some weights --> <br />
3  Do some squats -->  <br />
2  Do some pushups -->  <br />
1  Stretch your muscles -->  <br />

Assume in the "tips" model, there's a field for "Day", just like there's a field for content. Day is a number.

So, instead of this current code (which works to put a img to the left)

    <div data-role="content" data-theme="d" >
      <div class="content-primary">
        <ul data-role="listview" >
          <% @all_challenges.each do |tip| %>
            <li><a href="#">
					<img src="/images/icondock/accept2.png" class="ui-li-icon">
					<h3><%= tip.outboundtitle %></h3>
				</a>
					<ul><!-- Second page with full tip -->
						<li>
							<br />
							<p><%= tip.outgoing %></p>
						</li>
					</ul>
			</li>
		<% end %>
	</ul>
  </div>		
</div>

I want to replace that <!-- <img src> line with a data element: <%= tip.day %>

What I can't figure out is how to let JQuery Mobile let me keep that great 32X32 space to the left, but not expect an image there.  I want to put a big number (day) in there.

If I replace the img src line with <!-- <h2><%= tip.day %></h2> it just puts the number on **TOP** of the tip, and both are left justified.  Two lines.

Any ideas?

