widgets/list/list-expandable.html

   1 <html>
   2         <head></head>
   3         <body>
   4                 <div data-role="page" id="genlist-expandable" data-add-back-btn="true">
   5                         <div data-role="header" data-position="fixed">
   6                                 <h1>expandable list</h1>
   7                         </div>
   8                         <div data-role="content">
   9                                 <ul data-role="listview">
  10                                         <li class="ui-li-dialogue" data-expandable="true" id="exp1" data-initial-expansion="true">1line</li>
  11                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 1</li>
  12                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 2</li>
  13                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 3</li>
  14                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 4</li>
  15                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 5</li>
  16                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 6</li>
  17                                         <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 7</li>
  18                                         <li class="ui-li-dialogue" data-expanded-by="exp1" data-expandable="true" id="exp2">exp1-sub 2 (exp2)</li>
  19                                         <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 1</li>
  20                                         <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 2</li>
  21                                         <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 3</li>
  22                                         <li class="ui-li-dialogue" data-expandable="true" id="exp3"> <span class="ui-li-text-main">2line</span> <span class="ui-li-text-sub">Subtext</span> </li>
  23                                         <li class="ui-li-dialogue" data-expandable="true" id="exp4"> <span class="ui-li-text-main">2line-sub-main</span> <span class="ui-li-text-sub">Subtext</span> </li>
  24                                         <li class="ui-li-has-radio ui-li-dialogue" data-expandable="true" id="exp5"> <span class="ui-li-text-main">2line-radio1</span> <span class="ui-li-text-sub">Subtext</span>
  25                                         <form>
  26                                                 <input type="radio" />
  27                                         </form> </li>
  28                                         <li class="ui-li-dialogue" data-expandable="true" id="exp6"> <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span> <span class="ui-li-text-main">2line-colorbar3</span> <span class="ui-li-text-sub">Subtext</span>
  29                                         <!--                            <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> --> <img src="thumbnail.jpg" class="ui-li-bigicon" /> </li>
  30                                 </ul>
  31                         </div>
  32                         <div data-role="footer">
  33                         </div>
  34                 </div>
  35         </body>
  36 </html>