jqmobile_helpers 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.rdoc +34 -0
- data/lib/jqmobile_helpers/list_views_helper.rb +124 -51
- data/lib/jqmobile_helpers/toolbars_helper.rb +31 -7
- data/rdoc/JqmobileHelpers/ToolbarsHelper.html +79 -51
- data/rdoc/created.rid +2 -0
- data/rdoc/lib/jqmobile_helpers/buttons_helper_rb.html +1 -0
- data/rdoc/lib/jqmobile_helpers/list_views_helper_rb.html +2 -0
- data/rdoc/lib/jqmobile_helpers/railtie_rb.html +2 -0
- data/rdoc/lib/jqmobile_helpers/toolbars_helper_rb.html +2 -0
- data/rdoc/lib/jqmobile_helpers_rb.html +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +4 -1
- data/test/dummy/app/views/posts/index.html.erb +11 -4
- data/test/dummy/app/views/toolbars/index.html.erb +2 -0
- data/test/dummy/db/development.sqlite3 +0 -0
- data/test/dummy/log/development.log +432 -0
- data/test/dummy/log/test.log +10 -0
- data/test/dummy/public/javascripts/jquery.mobile-1.0a3.min.js +64 -63
- data/test/list_views_helper_test.rb +6 -1
- data/test/toolbars_helper_test.rb +6 -2
- metadata +2 -3
- data/test/dummy/tmp/pids/server.pid +0 -1
data/README.rdoc
CHANGED
@@ -3,4 +3,38 @@ Copyright (C) 2011 Consoci8 Sdn Bhd
|
|
3
3
|
|
4
4
|
jqmobile_helpers are view helpers for jquery mobile components e.g list view, buttons, form elements, etc
|
5
5
|
|
6
|
+
|
7
|
+
|
8
|
+
To use this in your rails app, add the following line to your gemfile:
|
9
|
+
|
10
|
+
gem "jqmobile_helpers"
|
11
|
+
|
12
|
+
And then run
|
13
|
+
|
14
|
+
bundle install
|
15
|
+
|
16
|
+
|
17
|
+
At the moment, you have to manually include the jquery-mobile stylesheets & javascript at your headers.
|
18
|
+
|
19
|
+
Download jquery-mobile link http://jquerymobile.com/download/
|
20
|
+
|
21
|
+
Copy & paste these snippet at your application.html.erb layout header
|
22
|
+
|
23
|
+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
|
24
|
+
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
|
25
|
+
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
|
26
|
+
|
27
|
+
Documentation
|
28
|
+
|
29
|
+
For further usage of all helper methods:
|
30
|
+
|
31
|
+
1. http://rdoc.info/github/Consoci8/jqmobile_helpers
|
32
|
+
|
33
|
+
2. Clone this project, and run the rails app at test/dummy. Look at http://localhost:3000 and see all jqmobile_helpers examples.
|
34
|
+
|
35
|
+
TODO
|
36
|
+
|
37
|
+
1. Wiki
|
38
|
+
2. Generators to include jquery-mobile javascript and stylesheet in header.
|
39
|
+
|
6
40
|
This project rocks and it uses MIT License.
|
@@ -103,25 +103,18 @@ module JqmobileHelpers
|
|
103
103
|
end
|
104
104
|
|
105
105
|
|
106
|
-
# ======================================
|
107
|
-
#
|
108
|
-
#
|
109
|
-
#
|
110
|
-
#
|
111
|
-
#
|
112
|
-
#
|
113
|
-
#
|
114
|
-
#
|
115
|
-
#
|
116
|
-
#
|
117
|
-
#
|
118
|
-
# # => <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>
|
119
|
-
#
|
120
|
-
# ======for collections of data that have more than one.
|
121
|
-
# <% @posts.each do |post|
|
122
|
-
# <%= split_button_list(post.name, post_path(post)) %>
|
123
|
-
# <% end %>
|
124
|
-
#
|
106
|
+
# ====================================== COUNT-BUBBLE LIST ===========================================================
|
107
|
+
# The framework includes text formatting conventions for common list patterns like header/descriptions,
|
108
|
+
# secondary information, counts through HTML semantic markup.
|
109
|
+
#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
|
110
|
+
#
|
111
|
+
# ====== Examples
|
112
|
+
# <%= count_bubble(@posts.map do |x| [x.title, link_to(x.title, post_path(x))] end)%>
|
113
|
+
# # => <ul data-inset="true" data-role="listview">
|
114
|
+
# <li><a href="/posts/1">First Title</a>
|
115
|
+
# <span class=ui-li-count>2</span>
|
116
|
+
# </li>
|
117
|
+
# </ul>
|
125
118
|
def count_bubble(collection, options = {})
|
126
119
|
html_attributes_options(options)
|
127
120
|
list = collection.map do |item|
|
@@ -137,6 +130,7 @@ module JqmobileHelpers
|
|
137
130
|
content_tag(:ul, list.join.html_safe, self.default_options)
|
138
131
|
end
|
139
132
|
|
133
|
+
# ====================================== THUMBNAIL LIST ===========================================================
|
140
134
|
# To add thumbnails to the left of a list item, the first element in your collection must have a image_tag.
|
141
135
|
# The framework will scale the image to 80 pixels square.
|
142
136
|
#
|
@@ -220,49 +214,128 @@ module JqmobileHelpers
|
|
220
214
|
content_tag(:ul, list.join.html_safe, default_options.update('data-filter' => 'true', 'data-inset' => 'false'))
|
221
215
|
end
|
222
216
|
|
223
|
-
|
217
|
+
|
224
218
|
# ====================================== LIST FORMATTING LIST ===========================================================
|
225
|
-
#
|
226
|
-
# To
|
227
|
-
#
|
228
|
-
#
|
219
|
+
# The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
|
220
|
+
# 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
|
221
|
+
# To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.
|
222
|
+
# 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
|
229
223
|
#
|
230
224
|
# ==== Examples
|
231
|
-
#
|
232
|
-
# #
|
233
|
-
#
|
234
|
-
#
|
235
|
-
#
|
236
|
-
|
225
|
+
# <%= list_formatting(@posts.group_by{|s| s.created_at.strftime("%A, %B %d, %Y")}.sort, 'name', 'title', 'content') %>
|
226
|
+
# # 'name', 'title' and 'content' is a database column name
|
227
|
+
# # Arguments for column_one, column_two and column_three should be a database column name
|
228
|
+
# # => <ul data-role="listview">
|
229
|
+
# <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
230
|
+
# <li>
|
231
|
+
# <h3><a href="/posts/1">Stephen Weber</a></h3>
|
232
|
+
# <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
233
|
+
# <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
234
|
+
# <p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
235
|
+
# </li>
|
236
|
+
# <li>
|
237
|
+
# <h3><a href="/posts/2">jQuery Team</a></h3>
|
238
|
+
# <p><strong>Boston Conference Planning</strong></p>
|
239
|
+
# <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
240
|
+
# <p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
241
|
+
# </li>
|
242
|
+
# </ul>
|
237
243
|
#
|
238
|
-
def list_formatting(collection, options = {})
|
244
|
+
def list_formatting(collection, column_one, column_two, column_three, options = {})
|
245
|
+
|
239
246
|
html_attributes_options(options)
|
240
|
-
|
241
|
-
|
242
|
-
|
247
|
+
li_default_options = {'data-role'=>"list-divider"}
|
248
|
+
|
249
|
+
link = controller.controller_name
|
250
|
+
|
251
|
+
list = collection.collect do |created, post|
|
252
|
+
tags = [content_tag("li", created + "<span class=\"ui-li-count\">#{post.size}</span>".html_safe, li_default_options, false)]
|
253
|
+
tags += post.collect do |p|
|
254
|
+
content_tag("li", "<h3><a href=\"#{link}/#{p.id}\">#{p.send(column_one.to_sym)}</a></h3>
|
255
|
+
<p><strong>#{p.send(column_two.to_sym)}</strong></p>
|
256
|
+
<p>#{p.send(column_three.to_sym)}</p>
|
257
|
+
<p class=\"ui-li-aside\"><strong>#{p.created_at.strftime("%I:%M%p")}</strong></p>".html_safe)
|
258
|
+
end
|
259
|
+
|
260
|
+
tags
|
261
|
+
end
|
262
|
+
|
263
|
+
content_tag(:ul, list.join.html_safe, default_options.update('data-inset' => 'false'))
|
243
264
|
end
|
244
265
|
|
245
|
-
|
266
|
+
|
246
267
|
# ====================================== LIST DIVIDER ===========================================================
|
247
|
-
#
|
248
|
-
#
|
249
|
-
#
|
250
|
-
#
|
268
|
+
# List items can be turned into dividers to organize and group the list items.
|
269
|
+
# This is done by adding the data-role="list-divider" to any list item.
|
270
|
+
# These items are styled with the body swatch "b" by default (light gray in the default theme)
|
271
|
+
# but you can specify a theme for dividers by adding the data-groupingtheme attribute and specifying a theme swatch letter.
|
251
272
|
#
|
252
273
|
# ==== Examples
|
253
|
-
# <%=
|
254
|
-
# # => <ul data-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
274
|
+
# <%= list_divider(@posts.group_by{|x| x.title[0]}.sort, "title")%>
|
275
|
+
# # => <ul data-role="listview">
|
276
|
+
# <li data-role="list-divider">A</li>
|
277
|
+
# <li><a href="index.html">Adam Kinkaid</a></li>
|
278
|
+
# <li><a href="index.html">Alex Wickerham</a></li>
|
279
|
+
# <li><a href="index.html">Avery Johnson</a></li>
|
280
|
+
# <li data-role="list-divider">B</li>
|
281
|
+
# <li><a href="index.html">Bob Cabot</a></li>
|
282
|
+
# </ul>
|
283
|
+
def list_divider(collection, content, options = {})
|
284
|
+
html_attributes_options(options)
|
285
|
+
link = controller.controller_name
|
286
|
+
list = collection.collect do |header, item|
|
287
|
+
tags = [content_tag("li", header, {'data-role' => 'list-divider'})]
|
288
|
+
tags += item.collect do |i|
|
289
|
+
content_tag("li", "<a href=\"#{link}/#{i.id}\">#{i.send(content.to_sym)}</a>".html_safe)
|
290
|
+
end
|
291
|
+
tags
|
292
|
+
end
|
293
|
+
content_tag(:ul, list.join.html_safe, self.default_options)
|
294
|
+
end
|
295
|
+
|
296
|
+
# ======================================SEARCH FILTER WITH LIST DIVIDER ===========================================================
|
297
|
+
# jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature.
|
298
|
+
# To make a list filterable, simply add the data-filter="true" attribute to the list and
|
299
|
+
# The framework will then append a search box above the list
|
300
|
+
# and add the behavior to filter out list items that don't contain the current search string as the user types.
|
301
|
+
# List items can be turned into dividers to organize and group the list items.
|
302
|
+
# This is done by adding the data-role="list-divider" to any list item.
|
303
|
+
# These items are styled with the body swatch "b" by default (light gray in the default theme)
|
304
|
+
# but you can specify a theme for dividers by adding the data-groupingtheme attribute and specifying a theme swatch letter.
|
259
305
|
#
|
260
|
-
|
306
|
+
# ==== Examples
|
307
|
+
#
|
308
|
+
# <%= list_divider(@posts.group_by{|x| x.title[0]}.sort, "title")%>
|
309
|
+
# # => <ul data-filter="true" data-inset="false" data-role="listview">
|
310
|
+
# <li data-role="list-divider">F</li>
|
311
|
+
# <li>
|
312
|
+
# <a href="posts/1">First Title </a>
|
313
|
+
# </li>
|
314
|
+
# <li>
|
315
|
+
# <a href="posts/4">F title</a>
|
316
|
+
# </li>
|
317
|
+
# <li data-role="list-divider">G</li>
|
318
|
+
# <li>
|
319
|
+
# <a href="posts/3">G. Title</a>
|
320
|
+
# </li>
|
321
|
+
# <li>
|
322
|
+
# <a href="posts/5">Gold Title</a>
|
323
|
+
# </li>
|
324
|
+
# </ul>
|
325
|
+
def search_filter_list_with_divider(collection, content, options = {})
|
261
326
|
html_attributes_options(options)
|
262
|
-
#
|
263
|
-
|
264
|
-
|
327
|
+
#list = collection.map{|item| content_tag("li", item)}
|
328
|
+
link = controller.controller_name
|
329
|
+
list = collection.collect do |header, item|
|
330
|
+
tags = [content_tag("li", header, {'data-role' => 'list-divider'})]
|
331
|
+
tags += item.collect do |i|
|
332
|
+
content_tag("li", "<a href=\"#{link}/#{i.id}\">#{i.send(content.to_sym)}</a>".html_safe)
|
333
|
+
end
|
334
|
+
tags
|
335
|
+
end
|
336
|
+
content_tag(:ul, list.join.html_safe, default_options.update('data-filter' => 'true', 'data-inset' => 'false'))
|
265
337
|
end
|
338
|
+
|
266
339
|
|
267
340
|
# ====================================== INSET LIST ===========================================================
|
268
341
|
#
|
@@ -312,9 +385,9 @@ module JqmobileHelpers
|
|
312
385
|
if html_options.has_key?('data-transition')
|
313
386
|
self.default_options = default_options.merge({'data-transition' => html_options['data-transition']})
|
314
387
|
end
|
315
|
-
|
388
|
+
|
316
389
|
end
|
317
|
-
|
390
|
+
|
318
391
|
def html_li_attributes_options(options)
|
319
392
|
html_options = options.stringify_keys!
|
320
393
|
self.li_options = {'data-role' => "list-divider"}
|
@@ -28,7 +28,8 @@ module JqmobileHelpers
|
|
28
28
|
#
|
29
29
|
# === Examples
|
30
30
|
#
|
31
|
-
# => <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">
|
31
|
+
# => <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">
|
32
|
+
# Home</a>
|
32
33
|
|
33
34
|
def header_toolbar_link(link_name,path,options = {})
|
34
35
|
html_options = options.stringify_keys!
|
@@ -51,7 +52,8 @@ module JqmobileHelpers
|
|
51
52
|
|
52
53
|
# navigation bar container
|
53
54
|
#
|
54
|
-
# A navbar is coded as an unordered list of links wrapped in a container element that has
|
55
|
+
# A navbar is coded as an unordered list of links wrapped in a container element that has
|
56
|
+
# the data-role="navbar" attribute
|
55
57
|
# To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor
|
56
58
|
# The navbar maxes out with 5 items, each 1/5 the width of the browser window
|
57
59
|
# Navbar can be in the header/footer.just add the navbar container inside header/footer container
|
@@ -68,7 +70,9 @@ module JqmobileHelpers
|
|
68
70
|
# </div><!-- /navbar -->
|
69
71
|
# Usage :
|
70
72
|
# navbar_link(collection) ** this method is to create the link inside the navbar container
|
71
|
-
# <%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,
|
73
|
+
# <%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,
|
74
|
+
# {'data-icon' => 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' => 'home'}),
|
75
|
+
# navbar_link('kami',toolbars_path,{'data-icon' => 'plus'})]) %>
|
72
76
|
|
73
77
|
|
74
78
|
def navbar_bar(collection)
|
@@ -85,7 +89,20 @@ module JqmobileHelpers
|
|
85
89
|
# # => <a href="a.html" class="ui-btn-active" 'data-icon'="gear">One</a>
|
86
90
|
# Usage :
|
87
91
|
# => navbar_link('saya',root_path,{'data-icon' => 'gear'})
|
88
|
-
|
92
|
+
#
|
93
|
+
# to set active navbar link when user click
|
94
|
+
# => page = request.fullpath **** (will get the current active page fullpath : localhost/posts will generate /posts
|
95
|
+
# => page_url = page.split(/[0-9]/)[0].gsub('/',"")
|
96
|
+
# **** (will ignore the number in the url and remove '/' from the path : localhots/posts/1 will generate 'posts'
|
97
|
+
# => link_path = link.gsub('/',"") (will remove '/' symbol from the string : /posts will become posts
|
98
|
+
#
|
99
|
+
# if link_path == page_url (compare the link pass by user in navbar_link() with current active page path
|
100
|
+
# content_tag('a',name, {'href' => "#{link}", 'class' => 'ui-btn-active'}.merge(default_options))
|
101
|
+
# ***** (if true, will append class=ui-btn-active to the navbar link))
|
102
|
+
# Bug for setting active link for navbar :
|
103
|
+
# => remove this part:
|
104
|
+
# c.delegate("a","click",function(){f.removeClass("ui-btn-active");a(this).addClass("ui-btn-active")})
|
105
|
+
# => from jquery.mobile-1.0a3.min.js line 120
|
89
106
|
|
90
107
|
def navbar_link(name,link, options ={})
|
91
108
|
html_options = options.stringify_keys!
|
@@ -103,11 +120,18 @@ module JqmobileHelpers
|
|
103
120
|
default_options = default_options.merge({'data-theme' => html_options['data-theme']})
|
104
121
|
end
|
105
122
|
|
106
|
-
|
107
|
-
|
123
|
+
|
124
|
+
page = request.fullpath
|
125
|
+
page_url = page.split(/[0-9]/)[0].gsub('/',"")
|
126
|
+
link_path = link.gsub('/',"")
|
127
|
+
|
128
|
+
if link_path == page_url
|
129
|
+
content_tag('a',name, {'href' => "#{link}", 'class' => 'ui-btn-active'}.merge(default_options))
|
130
|
+
else
|
131
|
+
content_tag('a',name, {'href' => "#{link}"}.merge(default_options))
|
108
132
|
end
|
109
133
|
|
110
|
-
|
134
|
+
|
111
135
|
end
|
112
136
|
|
113
137
|
|
@@ -182,32 +182,33 @@ Header Bar Link
|
|
182
182
|
</pre>
|
183
183
|
<h3>Examples</h3>
|
184
184
|
<pre>
|
185
|
-
=> <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">
|
185
|
+
=> <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">
|
186
|
+
Home</a></pre>
|
186
187
|
|
187
188
|
|
188
189
|
|
189
190
|
<div class="method-source-code"
|
190
191
|
id="header-toolbar-link-source">
|
191
192
|
<pre>
|
192
|
-
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
193
|
+
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 34</span>
|
194
|
+
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> = {})
|
195
|
+
35: <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
|
196
|
+
36: <span class="ruby-identifier">default_options</span> = {<span class="ruby-value str">'href'</span> =<span class="ruby-operator">></span> <span class="ruby-node">"#{path}"</span>, <span class="ruby-value str">'data-direction'</span> =<span class="ruby-operator">></span> <span class="ruby-value str">"reverse"</span>}
|
197
|
+
37:
|
198
|
+
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>)
|
199
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
|
200
|
+
40: <span class="ruby-keyword kw">end</span>
|
201
|
+
41:
|
202
|
+
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>)
|
203
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
|
204
|
+
44: <span class="ruby-keyword kw">end</span>
|
205
|
+
45:
|
206
|
+
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>)
|
207
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
|
208
|
+
48: <span class="ruby-keyword kw">end</span>
|
209
|
+
49:
|
210
|
+
50: <span class="ruby-identifier">content_tag</span>(<span class="ruby-value">:a</span>, <span class="ruby-node">"#{link_name}"</span>,<span class="ruby-identifier">default_options</span>)
|
211
|
+
51: <span class="ruby-keyword kw">end</span></pre>
|
211
212
|
</div>
|
212
213
|
|
213
214
|
</div>
|
@@ -275,7 +276,8 @@ Header Bar Title
|
|
275
276
|
navigation bar container
|
276
277
|
</p>
|
277
278
|
<pre>
|
278
|
-
A navbar is coded as an unordered list of links wrapped in a container element that has
|
279
|
+
A navbar is coded as an unordered list of links wrapped in a container element that has
|
280
|
+
the data-role="navbar" attribute
|
279
281
|
To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor
|
280
282
|
The navbar maxes out with 5 items, each 1/5 the width of the browser window
|
281
283
|
Navbar can be in the header/footer.just add the navbar container inside header/footer container
|
@@ -299,18 +301,20 @@ Usage :
|
|
299
301
|
</p>
|
300
302
|
<pre>
|
301
303
|
navbar_link(collection) ** this method is to create the link inside the navbar container
|
302
|
-
<%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,
|
304
|
+
<%= navbar_bar([navbar_link('saya',root_path,{'data-icon' => 'gear'}),navbar_link('saya',root_path,
|
305
|
+
{'data-icon' => 'gear'}),navbar_link('dia',toolbars_path,{'data-icon' => 'home'}),
|
306
|
+
navbar_link('kami',toolbars_path,{'data-icon' => 'plus'})]) %></pre>
|
303
307
|
|
304
308
|
|
305
309
|
|
306
310
|
<div class="method-source-code"
|
307
311
|
id="navbar-bar-source">
|
308
312
|
<pre>
|
309
|
-
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
313
|
+
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 78</span>
|
314
|
+
78: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">navbar_bar</span>(<span class="ruby-identifier">collection</span>)
|
315
|
+
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">"li"</span>,<span class="ruby-identifier">item</span>)}
|
316
|
+
80: <span class="ruby-identifier">content_tag</span>(<span class="ruby-value str">"div"</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">></span> <span class="ruby-value str">'navbar'</span>})
|
317
|
+
81: <span class="ruby-keyword kw">end</span></pre>
|
314
318
|
</div>
|
315
319
|
|
316
320
|
</div>
|
@@ -353,36 +357,60 @@ Example
|
|
353
357
|
Usage :
|
354
358
|
</p>
|
355
359
|
<pre>
|
356
|
-
=> navbar_link('saya',root_path,{'data-icon' => 'gear'})
|
360
|
+
=> navbar_link('saya',root_path,{'data-icon' => 'gear'})
|
361
|
+
</pre>
|
362
|
+
<p>
|
363
|
+
to set active navbar link when user click
|
364
|
+
</p>
|
365
|
+
<pre>
|
366
|
+
=> page = request.fullpath **** (will get the current active page fullpath : localhost/posts will generate /posts
|
367
|
+
=> page_url = page.split(/[0-9]/)[0].gsub('/',"")
|
368
|
+
**** (will ignore the number in the url and remove '/' from the path : localhots/posts/1 will generate 'posts'
|
369
|
+
=> link_path = link.gsub('/',"") (will remove '/' symbol from the string : /posts will become posts
|
370
|
+
|
371
|
+
if link_path == page_url (compare the link pass by user in navbar_link() with current active page path
|
372
|
+
content_tag('a',name, {'href' => "#{link}", 'class' => 'ui-btn-active'}.merge(default_options))
|
373
|
+
***** (if true, will append class=ui-btn-active to the navbar link))
|
374
|
+
Bug for setting active link for navbar :
|
375
|
+
=> remove this part:
|
376
|
+
c.delegate("a","click",function(){f.removeClass("ui-btn-active");a(this).addClass("ui-btn-active")})
|
377
|
+
=> from jquery.mobile-1.0a3.min.js line 120</pre>
|
357
378
|
|
358
379
|
|
359
380
|
|
360
381
|
<div class="method-source-code"
|
361
382
|
id="navbar-link-source">
|
362
383
|
<pre>
|
363
|
-
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
384
|
+
<span class="ruby-comment cmt"># File lib/jqmobile_helpers/toolbars_helper.rb, line 107</span>
|
385
|
+
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> ={})
|
386
|
+
108: <span class="ruby-identifier">html_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">stringify_keys!</span>
|
387
|
+
109: <span class="ruby-identifier">default_options</span> = {}
|
388
|
+
110:
|
389
|
+
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>)
|
390
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-icon'</span>]})
|
391
|
+
113: <span class="ruby-keyword kw">end</span>
|
392
|
+
114:
|
393
|
+
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>)
|
394
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-iconpos'</span>]})
|
395
|
+
117: <span class="ruby-keyword kw">end</span>
|
396
|
+
118:
|
397
|
+
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>)
|
398
|
+
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">></span> <span class="ruby-identifier">html_options</span>[<span class="ruby-value str">'data-theme'</span>]})
|
399
|
+
121: <span class="ruby-keyword kw">end</span>
|
400
|
+
122:
|
401
|
+
123:
|
402
|
+
124: <span class="ruby-identifier">page</span> = <span class="ruby-identifier">request</span>.<span class="ruby-identifier">fullpath</span>
|
403
|
+
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">""</span>)
|
404
|
+
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">""</span>)
|
405
|
+
127:
|
406
|
+
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>
|
407
|
+
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">></span> <span class="ruby-node">"#{link}"</span>, <span class="ruby-value str">'class'</span> =<span class="ruby-operator">></span> <span class="ruby-value str">'ui-btn-active'</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">default_options</span>))
|
408
|
+
130: <span class="ruby-keyword kw">else</span>
|
409
|
+
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">></span> <span class="ruby-node">"#{link}"</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">default_options</span>))
|
410
|
+
132: <span class="ruby-keyword kw">end</span>
|
411
|
+
133:
|
412
|
+
134:
|
413
|
+
135: <span class="ruby-keyword kw">end</span></pre>
|
386
414
|
</div>
|
387
415
|
|
388
416
|
</div>
|