-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial_8.html.erb
114 lines (93 loc) · 5.1 KB
/
tutorial_8.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<h1>Fire.app Feature Tutorial</h1>
<h2>Getting Current Page Path and Understanding Its Usage (Advanced)</h2>
<p>In this step, we'll add some highlight effect on the link corresponding to the current page in the main menu. We offer a simple way for beginners and for intermediates we include a more detailed explaination.</p>
<h3>For Beginners</h3>
<p>You can use this helper to add "active" class to the corresponding links. Please add the new file <code>view_helpers.rb</code> in the project folder. The content of this file is shown below: </p>
<pre class="prettyprint linenums lang-ruby">
module ViewHelpers
def new_link_to(name, href, options={})
if href == request.path
options[:class] ||=''
options[:class] += "active"
end
link_to name, href, options
end
end
</pre>
<p>When using the helper <code>new_link_to</code>, we need to pass two arguments. The first one is the content we want to wrap with the <code><a></code> tag. The second one is the url which the `href` attribute needs. For example, if we want to use this helper to add an <code><a></code> tag link to <code>/index.html</code> and with the text <code>Home</code>, it should look like this: </p>
<pre class="prettyprint linenums lang-html">
<%= new_link_to("Home","/index.html") %>
</pre>
<p>This helper detects if the current page path is the same as the link url. When the current page is not <code>/index.html</code>, the output result is:</p>
<pre class="prettyprint linenums lang-html">
<a href="/index.html">Home</a>
</pre>
<p>If the current page is <code>/index.html</code>, the output result is: </p>
<pre class="prettyprint linenums lang-html">
<a href="/index.html" class="active">Home</a>
</pre>
<p>In this project, we must change the content of <code>_main_menu.html.erb</code> to: </p>
<pre class="prettyprint linenums lang-html">
<div class="main-menu">
<ul>
<li>
<%= new_link_to('<span class="icons-home">Home</span>',"/index.html") %>
</li>
<li>
<%= new_link_to('<span class="icons-features">Features</span>',"/features/index.html") %>
</li>
<li>
<%= new_link_to('<span class="icons-documents">Documents</span>',"/documents.html") %>
</li>
<li>
<%= new_link_to('<span class="icons-screenshots">Screenshots</span>',"/screenshots.html") %>
</li>
</ul>
</div>
</pre>
<p>In CSS, we already defined the style for main menu links which have "active" class. After changing the content of <code>_main_menu.html.erb</code>, you'll immediately see the effect in your browser.</p>
<p class="sp-point">Note: In the code above, we use a whole span tag with class like <code><span class="icons-home">Home</span></code> as the first argument for <code>new_link_to</code>. Because this argument has double quotes <code>"</code> inside, we need to use single quotes <code>'</code> to wrap them to avoid an error. </p>
<h3>For Intermediates</h3>
<p>Actually we need to use <code>request.path</code> to get current page path and achieve our goal with <code>if</code> conditionals. Let's see this version's <code>_main_menu.html.erb</code> which uses `if` conditionals instead of the helper, it's easier for understanding the mechanism: </p>
<pre class="prettyprint linenums lang-html">
<div class="main-menu">
<ul>
<li>
<a href="/index.html" <%= 'class="active"' if request.path == "/index.html" || request.path == "/" %>>
<span class="icons-home">Home</span>
</a>
</li>
<li>
<a href="/features/index.html" <%= 'class="active"' if request.path =~ /^\/features\// %>>
<span class="icons-features">Features</span>
</a>
</li>
<li>
<a href="/documents.html" <%= 'class="active"' if request.path == "/documents.html" %>>
<span class="icons-documents">Documents</span>
</a>
</li>
<li>
<a href="/screenshots.html" <%= 'class="active"' if request.path == "/screenshots.html" %>>
<span class="icons-screenshots">Screenshots</span>
</a>
</li>
</ul>
</div>
</pre>
<p>After finding <code>request.path</code>, we can see that the helper we've seen previously uses <code>request.path</code> too. </p>
<pre class="prettyprint linenums lang-ruby">
module ViewHelpers
def new_link_to(name, href, options={})
if href == request.path
options[:class] ||=''
options[:class] += "active"
end
link_to name, href, options
end
end
</pre>
<p>To learn more about custom helpers, please see <a href="template_helper.html">Template Helper</a>.</p>
<div class="page-footer">
Next: <a href="tutorial_9.html">Building Projects <i class="lsf-icon arrow"></i></a>
</div>