I'm using awesome_nested_set in my rails app...in my view I'm displaying my nested categories using each_with_level. How do I determine if the category I'm displaying in the loop is the first in the level.
My list displays like this:
<ul>
<li>Gifts
<ul>
<li>Kitchen
<ul>
<li>Mugs</li>
<li>Plates</li>
</ul>
<li>Bath</li>
<li>Home
<ul>
<li>Canvas Prints</li>
<li>Framed Prints</li>
</ul>
</li>
</ul>
</li>
<li>Blankets
<ul>
<li>Fleece</li>
<li>Cotton</li>
</ul>
</li>
</ul>
In this example I would like to tag the "Gifts", "Kitchen", "Mugs", "Canvas Prints", and "Fleece" entries. It seems that there should be a method to determine this, but I couldn't find any documentation on it online. Thanks for any help!
If you don't need the code to know which is first, a CSS selector should be able to do the trick: li:first-child.
Related
I have a list, with 2 levels, being displayed like this in my vbhtml page:
<li>Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings">
<label>{{key}}</label>
<ul>
<li ng-repeat="setting in val">{{setting.settingname}}</li>
</ul>
</li>
<li>
Line 3 represents an org, and multiple settings will be listed underneath (the ng-repeat in line 5).
I'd like to turn this display into a collapsible/expandable treeview at the Org level, so that the settings hide away and can be expanded to show underneath a specific org in the list if the user clicks on a the plus sign next to it.
Help please?
Simplest way I can think of it is:
<li ng-init="visible = {}">Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings" ng-init="visible[key]=true" ng-click="visible[key]=!visible[key]" >
<label>{{key}}</label>
<ul ng-show="visible[key]">
<li ng-repeat="setting in val" >{{setting.settingname}}</li>
</ul>
</li>
<li>
See this plunker: http://plnkr.co/edit/vge0wqV590cCsofUZU05?p=preview
I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html
I have this code that is my navigation bar on my site, it is in my _layout.cshtml page at the top...
<div id="nav">
<ul>
<li id="current">Home</li>
<li>Code Stuff</li>
<li>Music Stuff</li>
<li>Blog</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
Im using a razor view page and I need to be able to inject id="current" into the block for the page that im on. My solution was to do something like
<div id="nav">
<ul>
<li id="#Model.PageName">Home</li>
<li id="#Model.PageName">Code Stuff</li>
<li id="#Model.PageName">Music Stuff</li>
<li id="#Model.PageName">Blog</li>
<li id="#Model.PageName">Links</li>
<li id="#Model.PageName">Contact</li>
</ul>
</div>
But of course that wont work because all of the li items will have the pagename in. So without using burly if statements how can I do this dynamically?
First, you really should be using class (as indicated in your title) rather than id (as indicated in your question text). Second, I would define a function that takes an argument differentiated your link and outputs either the empty string or current depending on whether it matches the page name.
#functions
{
public string MenuClass( string menuItem )
{
return string.Equals( Model.PageName, menuItem, StringComparison.OrdinalIgnoreCase )
? "current"
: "";
}
}
<div id="nav">
<ul>
<li class="#MenuClass("Home")">Home</li>
<li class="#MenuClass("Code")">Code Stuff</li>
...
</ul>
</div>
What is the easiest way in rails to create a tabbed menu?
I was thinking about creating some if statements example:
<li class="<% if current.page = root_url %>currentpage<% end %>">Frontpage</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 45 </li>
</ul>
Here is my HTML for my menu:
<li>Frontpage</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 45 </li>
</ul>
<li>Frontpage 2</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 3 </li>
</ul>
<li>Frontpage 3</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 3 </li>
</ul>
I just want to style the current li element for the page. Example if a user is on Frontpage 2 the class currentpage is added to the li element for Frontpage 2 or if the user visit a subpage of Frontpage 2 it still have the class.
The easiest way would be using one gem instead of building it all from the ground up.
Take a look at this section of the ruby toolbox.
If your question is "how do I apply style to the menu", I suggest you create a different question, and tag it "CSS". You will probably get a lot of good answers. I particularly like how the twitter bootstrap css lib does its navigation/tabs.
I'm creating a menu for my web site. It's got a hierarchical structure.
Here's what I want:
Great Grandparent
Grandparent
Parent
Sibling1
Sibling2
Sibling3
Self
Child1
Child2
Child3
HTML:
<ul>
<li>Great Grandparent
<ul>
<li>Grandparent
<ul>
<li>Parent
<ul>
<li>Sibling1</li>
<li>Sibling2</li>
<li>Sibling3</li>
<li><strong>Self</strong>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Here's the code from my ASPX page. This works:
<% For Each Ancestor As Node In ViewData("Ancestors")%>
<ul>
<li><%=Html.RouteLink(Html.Encode(Ancestor.Name), "IdOnly", New With {.id = Ancestor.Id})%>
<% Next%>
<ul>
<% For Each Sibling As Node In ViewData("Siblings")%>
<li><%=Html.RouteLink(Html.Encode(Sibling.Name), "IdOnly", New With {.id = Sibling.Id})%></li>
<% Next%>
<li><strong><%=Html.Encode(Model.Name)%></strong>
<% If Model.Children.Count > 0 Then%>
<ul>
<% For Each Child As Node In ViewData("Children")%>
<li><%=Html.RouteLink(Html.Encode(Child.Name), "IdOnly", New With {.id = Child.Id})%></li>
<% Next%>
</ul>
<% End If%>
</li>
</ul>
<% For Each Ancestor As Node In ViewData("Ancestors")%>
</li>
</ul>
<% Next%>
That ASPX page seems pretty hard to read. How can I clean that up?
The better solution would be to create a html helper if it doesn't already exist.
Take a look at this question to get ideas on how to do this
ASP.NET MVC HtmlHelper extensions for YUI controls (Yahoo User Interfaces)?
One thing I would recommend is checking the count of items supposed to be in "li" tags before you write the parent tags, other wise you could end up with empty "ul" tags which will not validate. If that doesn't make sense I'll elaborate later when I have some more time. As far as the formatting goes, perhaps some more indentation might make it easier to read.