jqmobile_helpers 0.0.1 → 0.0.2

data/README.rdoc

@@ -3,4 +3,38 @@ Copyright (C) 2011 Consoci8 Sdn Bhd
 
 jqmobile_helpers are view helpers for jquery mobile components e.g list view, buttons, form elements, etc
 
+
+
+To use this in your rails app, add the following line to your gemfile:
+
+  gem "jqmobile_helpers"
+
+And then run
+  
+  bundle install
+
+
+At the moment, you have to manually include the jquery-mobile stylesheets & javascript at your headers.
+
+Download jquery-mobile link http://jquerymobile.com/download/
+
+Copy & paste these snippet at your application.html.erb layout header
+
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
+  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
+  <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
+
+Documentation
+
+For further usage of all helper methods:
+
+1.  http://rdoc.info/github/Consoci8/jqmobile_helpers
+
+2. Clone this project, and run the rails app at test/dummy. Look at http://localhost:3000 and see all jqmobile_helpers examples.
+
+TODO
+
+1. Wiki
+2. Generators to include jquery-mobile javascript and stylesheet in header.
+
 This project rocks and it uses MIT License.

data/lib/jqmobile_helpers/list_views_helper.rb

@@ -103,25 +103,18 @@ module JqmobileHelpers
     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 %>
-    #
+    # ====================================== COUNT-BUBBLE LIST ===========================================================
+    # The framework includes text formatting conventions for common list patterns like header/descriptions, 
+    # secondary information, counts through HTML semantic markup.
+    #To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count
+    #
+    # ====== Examples
+    #      <%= count_bubble(@posts.map do |x| [x.title, link_to(x.title, post_path(x))] end)%>
+    #      # => <ul data-inset="true" data-role="listview">
+    #              <li><a href="/posts/1">First Title</a>
+    #              <span class=ui-li-count>2</span>
+    #              </li>
+    #           </ul>
     def count_bubble(collection, options = {})
       html_attributes_options(options)
       list = collection.map do |item|
@@ -137,6 +130,7 @@ module JqmobileHelpers
       content_tag(:ul, list.join.html_safe, self.default_options)
     end
 
+    # ====================================== THUMBNAIL 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.
     #
@@ -220,49 +214,128 @@ module JqmobileHelpers
         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.
+      # The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
+      # To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count
+      # To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.
+      # Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside
       #
       # ==== 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> 
+      #     <%= list_formatting(@posts.group_by{|s| s.created_at.strftime("%A, %B %d, %Y")}.sort, 'name', 'title', 'content') %>
+      #      # 'name', 'title' and 'content' is a database column name
+      #      # Arguments for column_one, column_two and column_three should be a database column name
+      #      # => <ul data-role="listview">
+      #            <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
+			#            <li>
+			#            	 <h3><a href="/posts/1">Stephen Weber</a></h3>
+			#            	 <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+			#            	 <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+			#            	 <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+			#            </li>
+			#            <li>
+			#            	 <h3><a href="/posts/2">jQuery Team</a></h3>
+			#            	 <p><strong>Boston Conference Planning</strong></p>
+			#            	 <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+			#            	 <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+			#            </li>
+			#           </ul>
       #
-      def list_formatting(collection, options = {})
+      def list_formatting(collection, column_one, column_two, column_three, 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)
+        li_default_options = {'data-role'=>"list-divider"}
+
+        link = controller.controller_name
+
+        list = collection.collect do |created, post|
+         tags = [content_tag("li", created + "<span class=\"ui-li-count\">#{post.size}</span>".html_safe, li_default_options, false)]
+           tags += post.collect do |p|
+             content_tag("li", "<h3><a href=\"#{link}/#{p.id}\">#{p.send(column_one.to_sym)}</a></h3>
+                         <p><strong>#{p.send(column_two.to_sym)}</strong></p>
+                         <p>#{p.send(column_three.to_sym)}</p>
+                         <p class=\"ui-li-aside\"><strong>#{p.created_at.strftime("%I:%M%p")}</strong></p>".html_safe)
+           end
+
+            tags
+         end
+
+        content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
       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.
+      # List items can be turned into dividers to organize and group the list items. 
+      # This is done by adding the data-role="list-divider" to any list item. 
+      # These items are styled with the body swatch "b" by default (light gray in the default theme) 
+      # but you can specify a theme for dividers by adding the data-groupingtheme attribute and specifying a theme swatch letter.
       #
       # ==== 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> 
+      #      <%= list_divider(@posts.group_by{|x| x.title[0]}.sort, "title")%>
+      #      # => <ul data-role="listview">
+			#             <li data-role="list-divider">A</li>
+			#               <li><a href="index.html">Adam Kinkaid</a></li>
+			#               <li><a href="index.html">Alex Wickerham</a></li>
+			#               <li><a href="index.html">Avery Johnson</a></li>
+			#             <li data-role="list-divider">B</li>
+			#               <li><a href="index.html">Bob Cabot</a></li>
+			#           </ul>
+      def list_divider(collection, content, options = {})
+        html_attributes_options(options)
+        link = controller.controller_name
+        list = collection.collect do |header, item|
+          tags = [content_tag("li", header, {'data-role' => 'list-divider'})]
+            tags += item.collect do |i|
+              content_tag("li", "<a href=\"#{link}/#{i.id}\">#{i.send(content.to_sym)}</a>".html_safe)
+            end
+            tags
+          end
+          content_tag(:ul, list.join.html_safe, self.default_options)
+        end
+
+      # ======================================SEARCH FILTER WITH 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 and
+      # 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.
+      # List items can be turned into dividers to organize and group the list items. 
+      # This is done by adding the data-role="list-divider" to any list item. 
+      # These items are styled with the body swatch "b" by default (light gray in the default theme) 
+      # but you can specify a theme for dividers by adding the data-groupingtheme attribute and specifying a theme swatch letter.
       #
-      def list_divider(collection, collection1, options = {})
+      # ==== Examples
+      # 
+      #      <%= list_divider(@posts.group_by{|x| x.title[0]}.sort, "title")%>
+      #      # => <ul data-filter="true" data-inset="false" data-role="listview">
+      #             <li data-role="list-divider">F</li>
+      #               <li>
+      #                 <a href="posts/1">First Title </a>
+      #               </li>
+      #               <li>
+      #                 <a href="posts/4">F title</a>
+      #               </li>
+      #             <li data-role="list-divider">G</li>
+      #               <li>
+      #                 <a href="posts/3">G. Title</a>
+      #               </li>
+      #               <li>
+      #                 <a href="posts/5">Gold Title</a>
+      #               </li>
+      #           </ul>
+      def search_filter_list_with_divider(collection, content, 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)
+        #list = collection.map{|item| content_tag("li", item)}
+        link = controller.controller_name
+        list = collection.collect do |header, item|
+          tags = [content_tag("li", header, {'data-role' => 'list-divider'})]
+            tags += item.collect do |i|
+              content_tag("li", "<a href=\"#{link}/#{i.id}\">#{i.send(content.to_sym)}</a>".html_safe)
+            end
+            tags
+          end
+        content_tag(:ul, list.join.html_safe, default_options.update('data-filter' => 'true', 'data-inset' => 'false'))
       end
+          
 
     # ====================================== INSET LIST ===========================================================
     #
@@ -312,9 +385,9 @@ module JqmobileHelpers
         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"}

data/lib/jqmobile_helpers/toolbars_helper.rb

@@ -28,7 +28,8 @@ module JqmobileHelpers
     #
     # === Examples
     #
-    #  => <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+    #  => <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">
+    #  Home</a>
     
     def header_toolbar_link(link_name,path,options = {})
       html_options = options.stringify_keys!
@@ -51,7 +52,8 @@ module JqmobileHelpers
 
     # navigation bar container
     #
-    #  A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute
+    #  A navbar is coded as an unordered list of links wrapped in a container element that has
+    #  the data-role="navbar" attribute
     #  To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor
     #  The navbar maxes out with 5 items, each 1/5 the width of the browser window
     #  Navbar can be in the header/footer.just add the navbar container inside header/footer container
@@ -68,7 +70,9 @@ module JqmobileHelpers
     #	</div><!-- /navbar -->
     # Usage :
     #  navbar_link(collection)  ** this method is to create the link inside the navbar container
-    #  <%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' => 'home'}), navbar_link('kami',toolbars_path,{'data-icon' => 'plus'})]) %>
+    #  <%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,
+    #  {'data-icon' => 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' => 'home'}),
+    #  navbar_link('kami',toolbars_path,{'data-icon' => 'plus'})]) %>
 
 
     def navbar_bar(collection)
@@ -85,7 +89,20 @@ module JqmobileHelpers
     #  # => <a href="a.html" class="ui-btn-active" 'data-icon'="gear">One</a>
     # Usage :
     #  => navbar_link('saya',root_path,{'data-icon' => 'gear'})
-
+    #
+    # to set active navbar link when user click
+    #  => page = request.fullpath **** (will get the current active page fullpath : localhost/posts will generate /posts
+    #  => page_url = page.split(/[0-9]/)[0].gsub('/',"")
+    #  **** (will ignore the number in the url and remove '/' from the path : localhots/posts/1 will generate 'posts'
+    #  => link_path = link.gsub('/',"")  (will remove '/' symbol from the string : /posts will become posts
+    #
+    #  if link_path == page_url   (compare the link pass by user in navbar_link() with current active page path
+    #    content_tag('a',name, {'href' => "#{link}", 'class' => 'ui-btn-active'}.merge(default_options))
+    #    ***** (if true, will append class=ui-btn-active to the navbar link))
+    #  Bug for setting active link for navbar :
+    #   => remove this part:
+    #    c.delegate("a","click",function(){f.removeClass("ui-btn-active");a(this).addClass("ui-btn-active")})
+    #   => from jquery.mobile-1.0a3.min.js line 120
 
     def navbar_link(name,link, options ={})
       html_options = options.stringify_keys!
@@ -103,11 +120,18 @@ module JqmobileHelpers
         default_options = default_options.merge({'data-theme' => html_options['data-theme']})
       end
 
-      if html_options.has_key?('class')
-        default_options = default_options.merge({'class' => html_options['class']})
+
+      page = request.fullpath
+      page_url = page.split(/[0-9]/)[0].gsub('/',"")
+      link_path = link.gsub('/',"")
+
+      if link_path == page_url
+        content_tag('a',name, {'href' => "#{link}", 'class' => 'ui-btn-active'}.merge(default_options))
+      else
+        content_tag('a',name, {'href' => "#{link}"}.merge(default_options))
       end
 
-      content_tag('a',name, {'href' => "#{link}"}.merge(default_options))
+      
     end
 
 

data/rdoc/JqmobileHelpers/ToolbarsHelper.html

@@ -182,32 +182,33 @@ Header Bar Link
 </pre>
 <h3>Examples</h3>
 <pre>
- =&gt; &lt;a href=&quot;../../&quot; data-icon=&quot;home&quot; data-iconpos=&quot;notext&quot; data-direction=&quot;reverse&quot; class=&quot;ui-btn-right jqm-home&quot;&gt;Home&lt;/a&gt;</pre>
+ =&gt; &lt;a href=&quot;../../&quot; data-icon=&quot;home&quot; data-iconpos=&quot;notext&quot; data-direction=&quot;reverse&quot; class=&quot;ui-btn-right jqm-home&quot;&gt;
+ Home&lt;/a&gt;</pre>
 					
 
 					
 					<div class="method-source-code"
 						id="header-toolbar-link-source">
 <pre>
-    <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 33</span>
-33:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">header_toolbar_link</span>(<span class="ruby-identifier">link_name</span>,<span class="ruby-identifier">path</span>,<span class="ruby-identifier">options</span> = {})
-34:       <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
-35:       <span class="ruby-identifier">default_options</span> = {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-node">&quot;#{path}&quot;</span>, <span class="ruby-value str">'data-direction'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">&quot;reverse&quot;</span>}
-36: 
-37:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-iconpos'</span>)
-38:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-iconpos'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
-39:       <span class="ruby-keyword kw">end</span>
-40: 
-41:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-icon'</span>)
-42:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-icon'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
-43:       <span class="ruby-keyword kw">end</span>
-44: 
-45:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-theme'</span>)
-46:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-theme'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
-47:       <span class="ruby-keyword kw">end</span>
-48: 
-49:       <span class="ruby-identifier">content_tag</span>(<span class="ruby-value">:a</span>, <span class="ruby-node">&quot;#{link_name}&quot;</span>,<span class="ruby-identifier">default_options</span>)
-50:     <span class="ruby-keyword kw">end</span></pre>
+    <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 34</span>
+34:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">header_toolbar_link</span>(<span class="ruby-identifier">link_name</span>,<span class="ruby-identifier">path</span>,<span class="ruby-identifier">options</span> = {})
+35:       <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
+36:       <span class="ruby-identifier">default_options</span> = {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-node">&quot;#{path}&quot;</span>, <span class="ruby-value str">'data-direction'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">&quot;reverse&quot;</span>}
+37: 
+38:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-iconpos'</span>)
+39:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-iconpos'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
+40:       <span class="ruby-keyword kw">end</span>
+41: 
+42:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-icon'</span>)
+43:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-icon'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
+44:       <span class="ruby-keyword kw">end</span>
+45: 
+46:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-theme'</span>)
+47:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-theme'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
+48:       <span class="ruby-keyword kw">end</span>
+49: 
+50:       <span class="ruby-identifier">content_tag</span>(<span class="ruby-value">:a</span>, <span class="ruby-node">&quot;#{link_name}&quot;</span>,<span class="ruby-identifier">default_options</span>)
+51:     <span class="ruby-keyword kw">end</span></pre>
 					</div>
 					
 				</div>
@@ -275,7 +276,8 @@ Header Bar Title
 navigation bar container
 </p>
 <pre>
- A navbar is coded as an unordered list of links wrapped in a container element that has the data-role=&quot;navbar&quot; attribute
+ A navbar is coded as an unordered list of links wrapped in a container element that has
+ the data-role=&quot;navbar&quot; attribute
  To set one of links to the active (selected) state, add class=&quot;ui-btn-active&quot; to the anchor
  The navbar maxes out with 5 items, each 1/5 the width of the browser window
  Navbar can be in the header/footer.just add the navbar container inside header/footer container
@@ -299,18 +301,20 @@ Usage :
 </p>
 <pre>
  navbar_link(collection)  ** this method is to create the link inside the navbar container
- &lt;%= navbar_bar([navbar_link('saya',root_path,{'data-icon' =&gt; 'gear'}),navbar_link('saya',root_path,{'data-icon' =&gt; 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' =&gt; 'home'}), navbar_link('kami',toolbars_path,{'data-icon' =&gt; 'plus'})]) %&gt;</pre>
+ &lt;%= navbar_bar([navbar_link('saya',root_path,{'data-icon' =&gt; 'gear'}),navbar_link('saya',root_path,
+ {'data-icon' =&gt; 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' =&gt; 'home'}),
+ navbar_link('kami',toolbars_path,{'data-icon' =&gt; 'plus'})]) %&gt;</pre>
 					
 
 					
 					<div class="method-source-code"
 						id="navbar-bar-source">
 <pre>
-    <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 74</span>
-74:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">navbar_bar</span>(<span class="ruby-identifier">collection</span>)
-75:       <span class="ruby-identifier">listing</span> = <span class="ruby-identifier">collection</span>.<span class="ruby-identifier">map</span> {<span class="ruby-operator">|</span><span class="ruby-identifier">item</span><span class="ruby-operator">|</span> <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">&quot;li&quot;</span>,<span class="ruby-identifier">item</span>)}
-76:       <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">&quot;div&quot;</span>,<span class="ruby-identifier">content_tag</span>(<span class="ruby-value">:ul</span>, <span class="ruby-identifier">listing</span>.<span class="ruby-identifier">join</span>.<span class="ruby-identifier">html_safe</span>), {<span class="ruby-value str">'data-role'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">'navbar'</span>})
-77:     <span class="ruby-keyword kw">end</span></pre>
+    <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 78</span>
+78:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">navbar_bar</span>(<span class="ruby-identifier">collection</span>)
+79:       <span class="ruby-identifier">listing</span> = <span class="ruby-identifier">collection</span>.<span class="ruby-identifier">map</span> {<span class="ruby-operator">|</span><span class="ruby-identifier">item</span><span class="ruby-operator">|</span> <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">&quot;li&quot;</span>,<span class="ruby-identifier">item</span>)}
+80:       <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">&quot;div&quot;</span>,<span class="ruby-identifier">content_tag</span>(<span class="ruby-value">:ul</span>, <span class="ruby-identifier">listing</span>.<span class="ruby-identifier">join</span>.<span class="ruby-identifier">html_safe</span>), {<span class="ruby-value str">'data-role'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">'navbar'</span>})
+81:     <span class="ruby-keyword kw">end</span></pre>
 					</div>
 					
 				</div>
@@ -353,36 +357,60 @@ Example
 Usage :
 </p>
 <pre>
- =&gt; navbar_link('saya',root_path,{'data-icon' =&gt; 'gear'})</pre>
+ =&gt; navbar_link('saya',root_path,{'data-icon' =&gt; 'gear'})
+</pre>
+<p>
+to set active navbar link when user click
+</p>
+<pre>
+ =&gt; page = request.fullpath **** (will get the current active page fullpath : localhost/posts will generate /posts
+ =&gt; page_url = page.split(/[0-9]/)[0].gsub('/',&quot;&quot;)
+ **** (will ignore the number in the url and remove '/' from the path : localhots/posts/1 will generate 'posts'
+ =&gt; link_path = link.gsub('/',&quot;&quot;)  (will remove '/' symbol from the string : /posts will become posts
+
+ if link_path == page_url   (compare the link pass by user in navbar_link() with current active page path
+   content_tag('a',name, {'href' =&gt; &quot;#{link}&quot;, 'class' =&gt; 'ui-btn-active'}.merge(default_options))
+   ***** (if true, will append class=ui-btn-active to the navbar link))
+ Bug for setting active link for navbar :
+  =&gt; remove this part:
+   c.delegate(&quot;a&quot;,&quot;click&quot;,function(){f.removeClass(&quot;ui-btn-active&quot;);a(this).addClass(&quot;ui-btn-active&quot;)})
+  =&gt; from jquery.mobile-1.0a3.min.js line 120</pre>
 					
 
 					
 					<div class="method-source-code"
 						id="navbar-link-source">
 <pre>
-     <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 90</span>
- 90:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">navbar_link</span>(<span class="ruby-identifier">name</span>,<span class="ruby-identifier">link</span>, <span class="ruby-identifier">options</span> ={})
- 91:       <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
- 92:       <span class="ruby-identifier">default_options</span> = {}
- 93: 
- 94:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-icon'</span>)
- 95:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-icon'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
- 96:       <span class="ruby-keyword kw">end</span>
- 97: 
- 98:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-iconpos'</span>)
- 99:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-iconpos'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
-100:       <span class="ruby-keyword kw">end</span>
-101: 
-102:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-theme'</span>)
-103:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-theme'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
-104:       <span class="ruby-keyword kw">end</span>
-105: 
-106:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'class'</span>)
-107:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'class'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'class'</span>]})
-108:       <span class="ruby-keyword kw">end</span>
-109: 
-110:       <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">'a'</span>,<span class="ruby-identifier">name</span>, {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-node">&quot;#{link}&quot;</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">default_options</span>))
-111:     <span class="ruby-keyword kw">end</span></pre>
+     <span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 107</span>
+107:     <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">navbar_link</span>(<span class="ruby-identifier">name</span>,<span class="ruby-identifier">link</span>, <span class="ruby-identifier">options</span> ={})
+108:       <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
+109:       <span class="ruby-identifier">default_options</span> = {}
+110: 
+111:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-icon'</span>)
+112:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-icon'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
+113:       <span class="ruby-keyword kw">end</span>
+114: 
+115:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-iconpos'</span>)
+116:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-iconpos'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
+117:       <span class="ruby-keyword kw">end</span>
+118: 
+119:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">html_options</span>.<span class="ruby-identifier">has_key?</span>(<span class="ruby-value str">'data-theme'</span>)
+120:         <span class="ruby-identifier">default_options</span> = <span class="ruby-identifier">default_options</span>.<span class="ruby-identifier">merge</span>({<span class="ruby-value str">'data-theme'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
+121:       <span class="ruby-keyword kw">end</span>
+122: 
+123: 
+124:       <span class="ruby-identifier">page</span> = <span class="ruby-identifier">request</span>.<span class="ruby-identifier">fullpath</span>
+125:       <span class="ruby-identifier">page_url</span> = <span class="ruby-identifier">page</span>.<span class="ruby-identifier">split</span>(<span class="ruby-regexp re">/[0-9]/</span>)[<span class="ruby-value">0</span>].<span class="ruby-identifier">gsub</span>(<span class="ruby-value str">'/'</span>,<span class="ruby-value str">&quot;&quot;</span>)
+126:       <span class="ruby-identifier">link_path</span> = <span class="ruby-identifier">link</span>.<span class="ruby-identifier">gsub</span>(<span class="ruby-value str">'/'</span>,<span class="ruby-value str">&quot;&quot;</span>)
+127: 
+128:       <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">link_path</span> <span class="ruby-operator">==</span> <span class="ruby-identifier">page_url</span>
+129:         <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">'a'</span>,<span class="ruby-identifier">name</span>, {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-node">&quot;#{link}&quot;</span>, <span class="ruby-value str">'class'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">'ui-btn-active'</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">default_options</span>))
+130:       <span class="ruby-keyword kw">else</span>
+131:         <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">'a'</span>,<span class="ruby-identifier">name</span>, {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-node">&quot;#{link}&quot;</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">default_options</span>))
+132:       <span class="ruby-keyword kw">end</span>
+133: 
+134:       
+135:     <span class="ruby-keyword kw">end</span></pre>
 					</div>
 					
 				</div>