demos/tizen-gray/widgets/list/list-bubble.html

   1 <div data-role="page" id="genlist-bubble" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>bubble list (message bubble)</h1>
   4         </div>
   5         <div data-role="content">
   6                 <ul data-role="listview" data-style="bubble">
   7                         <li class="ui-li-bubble-left">short left<span class="ui-li-bubble-time">9:20 PM</span></li>
   8                         <li class="ui-li-bubble-right">But I have no choice. I have a big exam tomorrow. (bubble right)<span class="ui-li-bubble-time">9:26 PM</span></li>
   9
  10                         <li class="ui-li-bubble-left">Don't worry... I'm free. You're gonna get sick. (bubble left)<span class="ui-li-bubble-time">9:30 PM</span></li>
  11                         <li class="ui-li-bubble-date">2010. 05. 20 (bubble date)</li>
  12                         <li class="ui-li-bubble-right">Sorry I'm late. (bubble right)<span class="ui-li-bubble-time">9:26 PM</span></li>
  13                         <li class="ui-li-bubble-left ui-li-bubble-sos">Don't worry... I'm free. You're gonna get sick. (bubble sos)<span class="ui-li-bubble-time">9:30 PM</span></li>
  14                         <li class="ui-li-bubble-left"><span>Picture test asdjfkldsjaklf sda lfkjdsa f lasd fldsaf das jflds lfdsl jfklsda jlfjdslf jdskl jfklds fdas lf </span><img src="genlist-bubble-sample1.png" /><span class="ui-li-bubble-time">9:40 PM</span></li>
  15                 </ul>
  16
  17
  18
  19         </div>
  20 </div>
  21