libs/js/jquery-mobile-1.2.0/tests/functional/autodividers.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5         <meta charset="utf-8" />
   6         <title>jQuery Mobile: Autodividers</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <script src="../../js/jquery.js"></script>
   9         <script src="../../js/"></script>
  10 </head>
  11
  12 <body>
  13
  14 <div data-role="page" id="baseline">
  15         <div data-role="header">
  16                 <h1>Autodividers</h1>
  17         </div>
  18
  19         <div data-role="content">
  20                 <p>This should get auto-dividers based on link text.</p>
  21                 <ul id="link-text-dividers" data-role="listview" data-autodividers="true">
  22                         <li><a href="#">Amy</a></li>
  23                         <li><a href="#">Andrew</a></li>
  24                         <li><a href="#">Astrid</a></li>
  25                         <li><a href="#">Bertie</a></li>
  26                         <li><a href="#">Carrie</a></li>
  27                         <li><a href="#">Derek</a></li>
  28                         <li><a href="#">Ian</a></li>
  29                         <li><a href="#">Matthew</a></li>
  30                 </ul>
  31         </div>
  32
  33         <div data-role="content">
  34                 <p>This should get auto-dividers based on link text but
  35                 shouldn't produce duplicate dividers. Should also
  36                 add more dividers if new list elements are added. Note that
  37                 removing Bertie should cause the duplicate "A" dividers to merge
  38                 and trigger a "listviewchange" event.</p>
  39
  40                 <p>
  41                         <button id="add-gary-button" data-inline="true">Add Gary and refresh</button>
  42                         <button id="remove-bertie-button" data-inline="true">Remove Bertie and refresh</button>
  43                 </p>
  44
  45                 <ul id="refreshable-dividers" data-role="listview" data-autodividers="true">
  46                         <li><a href="#">Amy</a></li>
  47                         <li><a href="#">Andrew</a></li>
  48                         <li><a href="#">Angela</a></li>
  49                         <li><a href="#">Bertie</a></li>
  50                         <li><a href="#">Astrid</a></li>
  51                         <li><a href="#">Carrie</a></li>
  52                         <li><a href="#">Derek</a></li>
  53                         <li><a href="#">Ian</a></li>
  54                         <li><a href="#">Matthew</a></li>
  55                 </ul>
  56         </div>
  57
  58         <div data-role="content">
  59                 <p>This uses a custom selector to draw text from formatted list
  60                 items.</p>
  61
  62                 <ul id="custom-selector">
  63                         <li><span>Anne</span> likes to eat sweets</li>
  64                         <li><span>Beth</span> likes to eat treats</li>
  65                         <li><span>Bill</span> likes to eat meats</li>
  66                         <li><span>Carl</span> likes to eat beets</li>
  67                 </ul>
  68         </div>
  69
  70         <div data-role="content">
  71                 <p>This should get auto-dividers based on text. NB this has
  72                 intentionally blank li elements to check they don't get dividers.</p>
  73                 <ul id="text-dividers" data-role="listview" data-autodividers="true">
  74                         <li>Barry</li>
  75                         <li>Betty</li>
  76                         <li>Carrie</li>
  77                         <li>Harry</li>
  78                         <li></li>
  79                         <li>Hetty</li>
  80                         <li>Kitty</li>
  81                         <li>Larry</li>
  82                         <li></li>
  83                         <li>Laurie</li>
  84                         <li>Mary</li>
  85                 </ul>
  86         </div>
  87
  88         <div data-role="content">
  89                 <p>Non-sorted list will produce duplicate auto-dividers.</p>
  90                 <ul id="non-sorted" data-role="listview" data-autodividers="true">
  91                         <li>Barry</li>
  92                         <li>Carrie</li>
  93                         <li>Betty</li>
  94                         <li>Harry</li>
  95                         <li>Carly</li>
  96                         <li>Hetty</li>
  97                 </ul>
  98         </div>
  99
 100         <div data-role="content">
 101                 <p>This had dividers already which were replaced.</p>
 102                 <ul id="has-dividers" data-role="listview" data-autodividers="true">
 103                         <li data-role="list-divider">Any old iron</li>
 104                         <li><a href="#">Amy</a></li>
 105                         <li><a href="#">Andrew</a></li>
 106                         <li><a href="#">Astrid</a></li>
 107                         <li data-role="list-divider">Barnacles</li>
 108                         <li><a href="#">Bertie</a></li>
 109                         <li data-role="list-divider">Crop circle</li>
 110                         <li><a href="#">Carrie</a></li>
 111                         <li data-role="list-divider">Dog</li>
 112                         <li><a href="#">Derek</a></li>
 113                         <li data-role="list-divider">Igloos</li>
 114                         <li><a href="#">Ian</a></li>
 115                         <li data-role="list-divider">Massive clouds</li>
 116                         <li><a href="#">Matthew</a></li>
 117                 </ul>
 118         </div>
 119
 120 </div>
 121
 122 <script>
 123 $(document).bind('pagecreate', function () {
 124         $('#custom-selector').listview({
 125           autodividers: true,
 126           autodividersSelector: function( elt ) {
 127                         return elt.find('span').text();
 128                 }
 129         });
 130
 131         $('#add-gary-button').bind('click', function () {
 132                 var gary = $('<li><a href="#">Gary</a></li>');
 133                 $('#refreshable-dividers').find('li.ui-li-divider:contains(I)').before(gary);
 134                 $('#refreshable-dividers').listview('refresh');
 135         });
 136
 137         $('#remove-bertie-button').bind('click', function () {
 138                 $('#refreshable-dividers').find('li:contains("Bertie")').remove();
 139                 $('#refreshable-dividers').listview('refresh');
 140         });
 141 });
 142 </script>
 143
 144 </body>
 145 </html>