Provides a set of methods for making list views for jquery-mobile markup
Creates a simple unordered list containing linked list items with a data-role=“listview” attribute
# => 'data-inset' => 'true' (Default data-inset is set to true) # => 'data-theme' => 'c' (Default data-theme is set to c)
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
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.
# => 'data-inset' => 'true' (Default data-inset is set to true) # => 'data-theme' => 'c' (Default data-theme is set to c)
<%= 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>
<% @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
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
<%= 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
# => 'data-inset' => 'true' (Default data-inset is set to true) # => 'data-theme' => 'c' (Default data-theme is set to c)
inset_list(@posts.map{|x| x.title}) # => <ul data-role="listview" data-inset="true"><li>Title 1</li><li>test2</li></ul>
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
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.
<%= 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
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.
<%= 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
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.
# => 'data-inset' => 'true' (Default data-inset is set to true) # => 'data-theme' => 'c' (Default data-theme is set to c)
<%= 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
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
# => 'data-inset' => 'true' (Default data-inset is set to true) # => 'data-theme' => 'c' (Default data-theme is set to c)
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
# 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
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.
<%= 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
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
<%= 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
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
Disabled; run with --debug to generate this.
Generated with the Darkfish Rdoc Generator 1.1.6.