jqmobile_helpers 0.0.1

data/lib/jqmobile_helpers/form_builder.rb

@@ -0,0 +1,301 @@
+module JqmobileHelpers
+  # = JqmobileHelpers Form Helper
+  # 
+  # Credits to https://github.com/alexreisner for his Informant formbuilder
+  # 
+  # Provides a set of helper methods for jquery-mobile form elements
+  # 
+  # Displays rails helpers fields within a div tag, label on one line, field below it.
+  # Simplify your form code by encapsulating all
+  # aspects of a field (label, description, etc) in a single method call. 
+  #
+  # All field methods accept an options hash like the standard Rails FormBuilder methods
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # Declare some options as custom (don't pass to built-in form helpers).
+    @@custom_field_options = [:label, :required, :description, :decoration]
+    @@custom_label_options = [:required, :colon, :label_for]
+
+    @@custom_options = @@custom_field_options + @@custom_label_options
+
+    # Run already-defined helpers through our "shell".
+    # See ActionView::Helpers::FormBuilder.field_helpers
+    helpers = field_helpers +
+      %w(select time_zone_select date_select) -
+      %w(hidden_field fields_for label)
+    helpers.each do |h|
+      define_method h do |field, *args|
+        options = args.detect { |a| a.is_a?(Hash) } || {}
+        case h 
+        when 'check_box'
+          template = "check_box_field"
+          options[:colon] = false
+        when 'radio_button'
+          template = "radio_button_choice"
+          options[:colon] = false
+        else
+          template = "default_field"
+        end
+        build_shell(field, options, template) { super(field, *args) }
+      end
+    end
+
+    # Render a set of radio buttons. Takes a method name, an array of
+    # choices (just like a +select+ field), and an options hash.
+    #
+    def radio_buttons(method, choices, options = {})
+      choices.map!{ |i| i.is_a?(Array) ? i : [i] }
+      build_shell(method, options, "radio_buttons_field") do
+        choices.map{ |c| radio_button method, c[1], :label => c[0],
+          :label_for => [object_name, method, c[1].to_s.downcase].join('_') }
+      end
+    end
+
+    # Render a set of check boxes for selecting HABTM-associated objects.
+    # Takes a method name (eg, category_ids), an array of
+    # choices (just like a +select+ field), and an options hash.
+    # In the default template the check boxes are enclosed in a <div> with
+    # CSS class <tt>habtm_check_boxes</tt> which can be styled thusly to
+    # achieve a scrolling list:
+    # 
+    #   .habtm_check_boxes {
+    #     overflow: auto;
+    #     height: 150px;
+    #   }
+    # 
+    # A hidden field is included which eliminates the need to handle the
+    # no-boxes-checked case in the controller, for example:
+    # 
+    #   <input type="hidden" name="article[categories][]" value="" />
+    # 
+    # This ensures that un-checking all boxes will work as expected.
+    # Unfortunately the check_box template is not applied to each check box
+    # (because the standard method of querying the @object for the field's
+    # value does not work--ie, there is no "categories[]" method).
+    # 
+    # ==== Examples
+    # <%= f.habtm_check_boxes :feature_ids,Feature.all.map{ |m| [m.name, m.id] } %>
+    #
+    def habtm_check_boxes(method, choices, options = {}) #:nodoc:
+      choices.map!{ |i| i.is_a?(Array) ? i : [i] }
+      base_id   = "#{object_name}_#{method}"
+      base_name = "#{object_name}[#{method}]"
+
+      @template.hidden_field_tag(
+        "#{base_name}[]", "", :id => "#{base_id}_empty") +
+      build_shell(method, options, "habtm_check_boxes_field") do
+        choices.map do |c|
+          field_id = "#{base_id}_#{c[1].to_s.downcase}"
+          @template.content_tag(:div, :class => "field") do
+            @template.check_box_tag(
+              "#{base_name}[]", c[1],
+              @object.send(method).include?(c[1]),
+              :id => field_id
+            ) + @template.label_tag(field_id, c[0])
+          end
+        end
+      end
+    end
+
+    # Standard Rails date selector.
+    #
+    def date_select(method, options = {})
+      options[:include_blank] ||= false
+      options[:start_year]    ||= 1801
+      options[:end_year]      ||= Time.now.year
+      options[:label_for]       = "#{object_name}_#{method}_1i"
+		  build_shell(method, options) { super }
+    end
+
+    ##
+    # This differs from the Rails-default date_select in that it
+    # submits three distinct fields for storage in three separate attributes.
+    # This allows for partial dates (eg, "1984" or "October 1984").
+    # See {FlexDate}[http://github.com/alexreisner/flex_date] for
+    # storing and manipulating partial dates.
+    #
+    def multipart_date_select(method, options = {})
+      options[:include_blank] ||= false
+      options[:start_year]    ||= 1801
+      options[:end_year]      ||= Time.now.year
+      options[:prefix]          = object_name # for date helpers
+      options[:label_for]       = "#{object_name}_#{method}_y"
+		  build_shell(method, options) do
+        [['y', 'year'], ['m', 'month'], ['d', 'day']].map{ |p|
+          i,j = p
+          value = @object.send(method.to_s + '_' + i)
+          options[:field_name] = method.to_s + '_' + i
+          eval("@template.select_#{j}(#{value.inspect}, options)")
+        }.join(' ')
+		  end
+    end
+
+    # Year select field. Takes options <tt>:start_year</tt> and
+    # <tt>:end_year</tt>, and <tt>:step</tt>.
+    #
+    def year_select(method, options = {})
+      options[:first] = options[:start_year] || 1801
+      options[:last]  = options[:end_year] || Date.today.year
+      integer_select(method, options)
+    end
+
+    # Integer select field.
+    # Takes options <tt>:first</tt>, <tt>:last</tt>, and <tt>:step</tt>.
+    #
+    def integer_select(method, options = {})
+      options[:step] ||= 1
+      choices = []; i = 0
+      (options[:first]..options[:last]).each do |n|
+        choices << n if i % options[:step] == 0
+        i += 1
+      end
+		  select method, choices, options
+    end
+
+    # Submit button with smart default text (if +value+ is nil uses "Create"
+    # for new record or "Update" for old record).
+    #
+    def submit(value = nil, options = {})
+      value = (@object.new_record?? "Create" : "Update") if value.nil?
+      build_shell(value, options, 'submit_button') { super }
+    end
+
+    # Render a field label.
+    #
+    def label(method, text = nil, options = {})
+      colon = false if options[:colon].nil?
+      options[:for] = options[:label_for]
+      required = options[:required]
+
+      # remove special options
+      options.delete :colon
+      options.delete :label_for
+      options.delete :required
+
+      text = @template.send(:h, text.blank?? method.to_s.humanize : text.to_s)
+      text << ':'.html_safe if colon
+      text << @template.content_tag(:span, "*", :class => "required") if required
+      super
+    end
+
+    # Render a field set (HTML fieldset tag). Takes the legend (optional), an
+    # options hash, and a block in which fields are rendered.
+    #
+    def field_set(legend = nil, options = nil, &block)
+      @template.content_tag(:fieldset, options) do
+        (legend.blank?? "" : @template.content_tag(:legend, legend)) +
+        @template.capture(&block)
+      end
+    end
+    
+    private # ---------------------------------------------------------------
+
+    # Insert a field into its HTML "shell".
+    #
+    def build_shell(method, options, template = 'default_field') #:nodoc:
+
+      # Build new options hash for custom label options.
+      label_options = options.reject{ |i,j| !@@custom_label_options.include? i }
+
+      # Build new options hash for custom field options.
+      field_options = options.reject{ |i,j| !@@custom_field_options.include? i }
+
+      # Remove custom options from options hash so things like
+      # <tt>include_blank</tt> aren't added as HTML attributes.
+      options.reject!{ |i,j| @@custom_options.include? i }
+
+      locals = {
+        :element     => yield,
+        :label       => label(method, field_options[:label], label_options),
+        :description => field_options[:description],
+        :div_id      => "#{@object_name}_#{method}_field",
+        :required    => field_options[:required],
+        :decoration  => field_options[:decoration] || nil
+      }
+      send("#{template}_template", locals).html_safe
+    end
+
+    # Render default field template for all the following field methods:
+    # "fields_for", "label", "text_field", "password_field", "hidden_field", "file_field", "text_area", 
+    # "search_field", "telephone_field", "phone_field", "url_field", 
+    # "email_field", "number_field", "range_field"
+    # 
+    # ==== Examples
+    #   <%= jq_form_for(@post) do |f| %>
+    #     <%= f.text_field :name %>
+    #   <% end %>
+    #
+    #   #  =>(Ommiting form_for results)
+    #   <div data-role="fieldcontain" id="post_name_field" class="field"> 
+    #	    label for="post_name">Name</label><br /> 
+    #     <input id="post_name" name="post[name]" size="30" type="text" /> 
+    #	  </div>
+    #  
+    # You can pass a few other options for your input fields.
+    # 
+    # ==== Examples
+    #   <%= f.text_field :name, :description => "Fill in your name", :required => true,
+    #       :label => "Your Name", :decoration => 'basically a field' %>
+    #   # => <div data-role="fieldcontain" id="post_name_field" class="field"> 
+    #	    label for="post_name">Your Name<span class="required">*</span></label><br /> 
+    #     <input id="post_name" name="post[name]" size="30" type="text" />basically a field
+    #	  </div>
+    #
+    def default_field_template(l = {})
+      <<-END
+      <div data-role="fieldcontain" id="#{l[:div_id]}" class="field">
+	      #{l[:label]}<br />
+        #{l[:element]}#{l[:decoration]}
+        #{"<p class=\"field_description\">#{l[:description]}</p>" unless l[:description].blank?}
+	    </div>
+	    END
+    end
+
+    # Render check box field template.
+    #
+    def check_box_field_template(l = {})
+      <<-END
+      <div data-role="fieldcontain" id="#{l[:div_id]}" class="field">
+	      #{l[:element]} #{l[:label]} #{l[:decoration]}<br />
+	      #{"<p class=\"field_description\">#{l[:description]}</p>" unless l[:description].blank?}
+	    </div>
+	    END
+    end
+
+    # Render single radio button. Note that this is the only field
+    # template without an enclosing <tt><div class="field"></tt> because it
+    # is intended for use only within the radio_buttons_template (plural).
+    #
+    def radio_button_choice_template(l = {})
+      <<-END
+      #{l[:element]} #{l[:label]}
+	    END
+    end
+
+    # Render a group of radio buttons.
+    #
+    def radio_buttons_field_template(l = {})
+      default_field_template(l)
+    end
+
+    # Render a group of HABTM check boxes.
+    #
+    def habtm_check_boxes_field_template(l = {})
+      <<-END
+      <div data-role="fieldcontain" id="#{l[:div_id]}" class="field">
+	      #{l[:label]}<br />
+        <div class="habtm_check_boxes">#{l[:element]}</div>#{l[:decoration]}
+        #{"<p class=\"field_description\">#{l[:description]}</p>" unless l[:description].blank?}
+	    </div>
+	    END
+    end
+
+    # Render submit button template.
+    #
+    def submit_button_template(l = {})
+      <<-END
+      <div class="button">#{l[:element]}</div>
+	    END
+    end
+    
+  end
+end

data/lib/jqmobile_helpers/list_views_helper.rb

@@ -0,0 +1,326 @@
+module JqmobileHelpers
+  # = JqmobileHelpers List View Helpers
+  # Provides a set of methods for making list views
+  # for jquery-mobile markup
+  module ListViewsHelper
+    # html5 data attributes options value
+    mattr_accessor :default_options
+
+
+    # ====================================== 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>
+    #
+    def basic_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map {|item| content_tag("li", item)}
+      content_tag(:ul, list.join.html_safe, default_options)
+    end
+
+    # ====================================== 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>
+    #
+    def numbered_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map {|item| content_tag("li", item)}
+      content_tag(:ol, list.join.html_safe, self.default_options)
+    end
+
+
+    # ======================================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>
+    #
+    #
+    def nested_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map {|item| content_tag("li", content_tag("ul", content_tag("li", item)))}
+      content_tag :ul, list.join.html_safe, self.default_options
+    end
+
+    # ====================================== 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 %>
+    #
+    def split_button_list(name,link, options={})
+      html_attributes_options(options)
+      default_split_options = {'data-icon' => "gear"}
+      split_options = {'data-rel' => "dialog", 'data-transition' => "slideup"}
+      list = content_tag("li", content_tag(:a, name, {:href => link}.merge(split_options)))
+      #list = content_tag("li", content_tag(:a, data, {:href => link}.merge(split_options)))
+      content_tag(:ul, list, self.default_options.merge(default_split_options))
+    end
+
+
+    # ====================================== 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 %>
+    #
+    def count_bubble(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map do |item|
+        if item.is_a?(Array)
+          if item[1].blank?
+            item[1] = content_tag(:a, "No item description", :href => "")
+          end
+          content_tag("li", "#{item[1]}<span class=ui-li-count>#{item.size}</span>".html_safe)
+        else
+          content_tag("li", item)
+        end
+      end
+      content_tag(:ul, list.join.html_safe, self.default_options)
+    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
+    #
+    # ==== 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>
+    #
+    def thumbnail_list(collection, options={})
+      html_attributes_options(options)
+      list = collection.map do |item|
+        if item.is_a?(Array)
+          if item[1].blank?
+            item[1] = content_tag(:a, "No item description", :href => "")
+          end
+          content_tag("li", item[0] + "<h3>#{item[1]}</h3><p>#{item[2]}</p>".html_safe)
+        else
+          content_tag("li", item)
+        end
+      end
+      content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
+    end
+
+    # ====================================== 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>
+    #
+    def icon_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map do |item|
+        if item.is_a?(Array)
+          if item[1].blank?
+            item[1] = content_tag(:a, "No item description", :href => "")
+          end
+          content_tag("li", item[0] + "#{item[1]}<span class=ui-li-count>#{item.size}</span>".html_safe)
+        else
+          content_tag("li", item)
+        end
+      end
+      content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
+    end
+
+      # ====================================== 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>
+      #
+      def search_filter_list(collection, options = {})
+        html_attributes_options(options)
+        list = collection.map{|item| content_tag("li", item)}
+        content_tag(:ul, list.join.html_safe, default_options.update('data-filter' => 'true', 'data-inset' => 'false'))
+      end
+
+    
+      # ====================================== 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> 
+      #
+      def list_formatting(collection, options = {})
+        html_attributes_options(options)
+        #html_li_attributes_options(options)
+        divider =collection.map{|item| content_tag(:li, item, {'data-role' => 'list-divider'}) << collection.map{|item| content_tag("li",item)}}  
+        content_tag(:ul, divider.join.html_safe, self.default_options)
+      end
+
+      
+      # ====================================== 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> 
+      #
+      def list_divider(collection, collection1, options = {})
+        html_attributes_options(options)
+        #html_li_attributes_options(options)
+        list = collection.map{|item| content_tag(:li, item, {'data-role' => 'list-divider'}) << content_tag("li", collection1.map{|x| x})} 
+        content_tag(:ul, list.join.html_safe, self.default_options)
+      end
+
+    # ====================================== 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>
+    #
+    def inset_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map {|item| content_tag("li", item)}
+      content_tag(:ul, list.join.html_safe, default_options)
+    end
+
+    def ol_inset_list(collection, options = {})
+      html_attributes_options(options)
+      list = collection.map {|item| content_tag("li", item)}
+      content_tag(:ol, list.join.html_safe, default_options)
+    end
+
+    private
+
+      # Default html5 data attributes for list view in jquery-mobile
+      def html_attributes_options(options)
+        html_options = options.stringify_keys!
+        self.default_options = {'data-role' => "listview", 'data-inset' => "true"}
+
+        if html_options.has_key?('data-inset')
+          self.default_options = default_options.merge({'data-inset' => html_options['data-inset']})
+        end
+
+        if html_options.has_key?('data-theme')
+          self.default_options = default_options.merge({'data-theme' => html_options['data-theme']})
+        end
+
+        if html_options.has_key?('data-rel')
+          self.default_options = default_options.merge({'data-rel' => html_options['data-rel']})
+        end
+
+        if html_options.has_key?('data-transition')
+          self.default_options = default_options.merge({'data-transition' => html_options['data-transition']})
+        end
+  
+      end
+      
+      def html_li_attributes_options(options)
+        html_options = options.stringify_keys!
+        self.li_options = {'data-role' => "list-divider"}
+
+      end
+
+  end
+end
+