Files

JqmobileHelpers::ListViewsHelper

JqmobileHelpers List View Helpers

Provides a set of methods for making list views for jquery-mobile markup

Public Instance Methods

basic_list(collection, options = {}) click to toggle source
BASIC LIST ===========================================================

Creates a simple unordered list containing linked list items with a data-role=“listview” attribute

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  basic_list(@posts.map{|x| x.title})
  # => <ul data-role="listview" data-inset="true"><li>Title 1</li><li>test2</li></ul>

  basic_list(@posts.map{|x| link_to(x.title, post_path(x))}, {'data-inset'=>'false', 'data-theme'=>'b'})
  # => <ul data-role="listview" data-inset="false" data-theme="b"> \\
         <li><a href='/posts/1'>Title 1</a></li><li><a href="/posts/2">test2</a></li></ul>
    # File lib/jqmobile_helpers/list_views_helper.rb, line 26
26:     def basic_list(collection, options = {})
27:       html_attributes_options(options)
28:       list = collection.map {|item| content_tag("li", item)}
29:       content_tag(:ul, list.join.html_safe, default_options)
30:     end
count_bubble(collection, options = {}) click to toggle source
SPLIT-BUTTON LIST ===========================================================

In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items — the list item and a small arrow icon in the far right The framework will add a vertical divider line and sets the title attribute of the link to the text the link for accessibility.

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  <%= split_button_list "Split Button List", post_path(@posts) %>
  # => <ul data-role="listview" data-split-icon="gear" data-split-theme="d"><li><a data-rel="dialog" data-transition="slideup" href="/posts/1">Split Button List</a></li></ul>
for collections of data that have more than one.
 <% @posts.each do |post|
 <%= split_button_list(post.name, post_path(post)) %>
 <% end %>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 125
125:     def count_bubble(collection, options = {})
126:       html_attributes_options(options)
127:       list = collection.map do |item|
128:         if item.is_a?(Array)
129:           if item[1].blank?
130:             item[1] = content_tag(:a, "No item description", :href => "")
131:           end
132:           content_tag("li", "#{item[1]}<span class=ui-li-count>#{item.size}</span>".html_safe)
133:         else
134:           content_tag("li", item)
135:         end
136:       end
137:       content_tag(:ul, list.join.html_safe, self.default_options)
138:     end
icon_list(collection, options = {}) click to toggle source
ICON LIST ===========================================================

To add thumbnails to the left of a list item, the first element in your collection must have a image_tag. The framework will scale the image to 80 pixels square.

Items in your collection must also be constructed inside an array with 3 elements inside

Examples

     <%= icon_list(@posts.collect do |x|
         [image_tag('/images/sample-pic.jpg'), link_to(x.title, post_path(x))]
       end) %>
     # => <ul data-inset="false" data-role="listview">
            <li><img alt="Gb" class="ui-li-icon" src="https://github.com/jquery/jquery-mobile/blob/master/docs/lists/images/gb.png" />
                <a href="/posts/1">First Title </a>
                <span class=ui-li-count>2</span>
            </li>
          </ul>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 188
188:     def icon_list(collection, options = {})
189:       html_attributes_options(options)
190:       list = collection.map do |item|
191:         if item.is_a?(Array)
192:           if item[1].blank?
193:             item[1] = content_tag(:a, "No item description", :href => "")
194:           end
195:           content_tag("li", item[0] + "#{item[1]}<span class=ui-li-count>#{item.size}</span>".html_safe)
196:         else
197:           content_tag("li", item)
198:         end
199:       end
200:       content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
201:     end
inset_list(collection, options = {}) click to toggle source
INSET LIST ===========================================================

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  inset_list(@posts.map{|x| x.title})
  # => <ul data-role="listview" data-inset="true"><li>Title 1</li><li>test2</li></ul>

Examples

  ol_inset_list(@posts.map{|x| x.title}, {'data-theme' => "a"} )
  # => <ol data-role="listview" data-inset="true" data-theme="a"><li>Title 1</li><li>test2</li></ul>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 280
280:     def inset_list(collection, options = {})
281:       html_attributes_options(options)
282:       list = collection.map {|item| content_tag("li", item)}
283:       content_tag(:ul, list.join.html_safe, default_options)
284:     end
list_divider(collection, options = {}) click to toggle source
LIST DIVIDER ===========================================================

jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter=“true” attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don’t contain the current search string as the user types.

Examples

     <%= search_filter_list(@posts.map{|x| link_to(x.title, post_path(x))}) %> 
     # => <ul data-inset="false" data-role="listview" data-filter="true">
            <li>          
              <a href="/posts/1">Title 1</a></h3><p>Title 1</p>
            </li>
          </ul> 
     # File lib/jqmobile_helpers/list_views_helper.rb, line 259
259:       def list_divider(collection, options = {})
260:         html_attributes_options(options)
261:         #html_li_attributes_options(options)
262:         list = collection.map{|item| content_tag(:li, content_tag("li", item), {'data-role' => 'list-divider'})}
263:         content_tag(:ul, list.join.html_safe, self.default_options)
264:       end
list_formatting(collection, options = {}) click to toggle source
LIST FORMATTING LIST ===========================================================

jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter=“true” attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don’t contain the current search string as the user types.

Examples

     <%= search_filter_list(@posts.map{|x| link_to(x.title, post_path(x))}) %> 
     # => <ul data-inset="false" data-role="listview" data-filter="true">
            <li>          
              <a href="/posts/1">Title 1</a></h3><p>Title 1</p>
            </li>
          </ul> 
     # File lib/jqmobile_helpers/list_views_helper.rb, line 238
238:       def list_formatting(collection, options = {})
239:         html_attributes_options(options)
240:         #html_li_attributes_options(options)
241:         list = collection.map{|item| content_tag(:li, content_tag("li", item), {'data-role' => 'list-divider'})}
242:         content_tag(:ul, list.join.html_safe, self.default_options)
243:       end
nested_list(collection, options = {}) click to toggle source
NESTED LIST ===========================================================

By nesting child ul of ol inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements.

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  <%= nested_list @posts.map{|x| link_to(x.title, post_path(x))} %>
  # => <ul data-inset="true" data-role="listview"><li><ul><li><a href="/birds/1">Bird</a></li></ul></li></ul>
    # File lib/jqmobile_helpers/list_views_helper.rb, line 71
71:     def nested_list(collection, options = {})
72:       html_attributes_options(options)
73:       list = collection.map {|item| content_tag("li", content_tag("ul", content_tag("li", item)))}
74:       content_tag :ul, list.join.html_safe, self.default_options
75:     end
numbered_list(collection, options = {}) click to toggle source
NUMBERED LIST ===========================================================

Creates ordered lists (ol) which is useful when presented items that are in a sequence. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  basic_list(@posts.map{|x| x.title})
  # => <ol data-role="listview" data-inset="true"><li>Title 1</li><li>test2</li></ol>

  basic_list(@posts.map{|x| link_to(x.title, post_path(x))}, {'data-inset'=>'false', 'data-theme'=>'b'})
  # => <ol data-role="listview" data-inset="false" data-theme="b"> \\
         <li><a href='/posts/1'>Title 1</a></li><li><a href="/posts/2">test2</a></li></ol>
    # File lib/jqmobile_helpers/list_views_helper.rb, line 49
49:     def numbered_list(collection, options = {})
50:       html_attributes_options(options)
51:       list = collection.map {|item| content_tag("li", item)}
52:       content_tag(:ol, list.join.html_safe, self.default_options)
53:     end
ol_inset_list(collection, options = {}) click to toggle source
     # File lib/jqmobile_helpers/list_views_helper.rb, line 286
286:     def ol_inset_list(collection, options = {})
287:       html_attributes_options(options)
288:       list = collection.map {|item| content_tag("li", item)}
289:       content_tag(:ol, list.join.html_safe, default_options)
290:     end
search_filter_list(collection, options = {}) click to toggle source
SEARCH FILTER LIST ===========================================================

jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the data-filter=“true” attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don’t contain the current search string as the user types.

Examples

     <%= search_filter_list(@posts.map{|x| link_to(x.title, post_path(x))}) %>
     # => <ul data-inset="false" data-role="listview" data-filter="true">
            <li>
              <a href="/posts/1">Title 1</a></h3><p>Title 1</p>
            </li>
          </ul>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 217
217:       def search_filter_list(collection, options = {})
218:         html_attributes_options(options)
219:         list = collection.map{|item| content_tag("li", item)}
220:         content_tag(:ul, list.join.html_safe, default_options.update('data-filter' => 'true', 'data-inset' => 'false'))
221:       end
split_button_list(name,link, options={}) click to toggle source
SPLIT-BUTTON LIST ===========================================================

In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items — the list item and a small arrow icon in the far right The framework will add a vertical divider line and sets the title attribute of the link to the text the link for accessibility.

Options

  # => 'data-inset' => 'true' (Default data-inset is set to true)
  # => 'data-theme' => 'c' (Default data-theme is set to c)

Examples

  <%= split_button_list "Split Button List", post_path(@posts) %>
  # => <ul data-role="listview" data-split-icon="gear" data-split-theme="d"><li><a data-rel="dialog" data-transition="slideup" href="/posts/1">Split Button List</a></li></ul>
for collections of data that have more than one.
 <% @posts.each do |post|
 <%= split_button_list(post.name, post_path(post)) %>
 <% end %>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 96
 96:     def split_button_list(name,link, options={})
 97:       html_attributes_options(options)
 98:       default_split_options = {'data-icon' => "gear"}
 99:       split_options = {'data-rel' => "dialog", 'data-transition' => "slideup"}
100:       list = content_tag("li", content_tag(:a, name, {:href => link}.merge(split_options)))
101:       #list = content_tag("li", content_tag(:a, data, {:href => link}.merge(split_options)))
102:       content_tag(:ul, list, self.default_options.merge(default_split_options))
103:     end
thumbnail_list(collection, options={}) click to toggle source

To add thumbnails to the left of a list item, the first element in your collection must have a image_tag. The framework will scale the image to 80 pixels square.

Items in your collection must also be constructed inside an array with 3 elements inside

Examples

     <%= thumbnail_list(@posts.collect do |x|
         [image_tag('/images/sample-pic.jpg'), link_to(x.title, post_path(x)), x.title]
       end) %>
     # => <ul data-inset="false" data-role="listview">
            <li>
              <img alt="Album-bb" src="/images/album-bb.jpg" />
              <h3><a href="/posts/1">Title 1</a></h3><p>Title 1</p>
            </li>
          </ul>
     # File lib/jqmobile_helpers/list_views_helper.rb, line 156
156:     def thumbnail_list(collection, options={})
157:       html_attributes_options(options)
158:       list = collection.map do |item|
159:         if item.is_a?(Array)
160:           if item[1].blank?
161:             item[1] = content_tag(:a, "No item description", :href => "")
162:           end
163:           content_tag("li", item[0] + "<h3>#{item[1]}</h3><p>#{item[2]}</p>".html_safe)
164:         else
165:           content_tag("li", item)
166:         end
167:       end
168:       content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
169:     end

Private Instance Methods

html_attributes_options(options) click to toggle source

Default html5 data attributes for list view in jquery-mobile

     # File lib/jqmobile_helpers/list_views_helper.rb, line 295
295:       def html_attributes_options(options)
296:         html_options = options.stringify_keys!
297:         self.default_options = {'data-role' => "listview", 'data-inset' => "true"}
298: 
299:         if html_options.has_key?('data-inset')
300:           self.default_options = default_options.merge({'data-inset' => html_options['data-inset']})
301:         end
302: 
303:         if html_options.has_key?('data-theme')
304:           self.default_options = default_options.merge({'data-theme' => html_options['data-theme']})
305:         end
306: 
307:         if html_options.has_key?('data-rel')
308:           self.default_options = default_options.merge({'data-rel' => html_options['data-rel']})
309:         end
310: 
311:         if html_options.has_key?('data-transition')
312:           self.default_options = default_options.merge({'data-transition' => html_options['data-transition']})
313:         end
314:   
315:       end
html_li_attributes_options(options) click to toggle source
     # File lib/jqmobile_helpers/list_views_helper.rb, line 317
317:       def html_li_attributes_options(options)
318:         html_options = options.stringify_keys!
319:         self.li_options = {'data-role' => "list-divider"}
320: 
321:       end

Disabled; run with --debug to generate this.

[Validate]

Generated with the Darkfish Rdoc Generator 1.1.6.