我正在尝试为 simple_navigation rails gem 创建一个自定义渲染器。到目前为止,在阅读了为 gem 的引导版本所做的调整之后,我已经能够对我的导航进行一些小的图标更改,但我完全被卡住了。
我正在尝试添加一些设置我的渲染器以适应在此 JSfiddle 中找到的标记:http: //jsfiddle.net/v5Yhc/
<ul class="nav navbar-collapse collapse navbar-collapse-primary"> <li class="active"> <span class="glow"></span> <a href="dashboard.html"> <i class="icon-dashboard icon-2x"></i> <span>Dashboard</span> </a> </li> <li class="dark-nav "> <span class="glow"></span> <a class="accordion-toggle collapsed " data-toggle="collapse" href="#yJ6h3Npe7C"> <i class="icon-beaker icon-2x"></i> <span> UI Lab <i class="icon-caret-down"></i> </span> </a> <ul id="yJ6h3Npe7C" class="collapse "> <li class=""> <a href="../ui_lab/buttons.html"> <i class="icon-hand-up"></i> Buttons </a> </li> <li class=""> <a href="../ui_lab/general.html"> <i class="icon-beaker"></i> General elements </a> </li> <li class=""> <a href="../ui_lab/icons.html"> <i class="icon-info-sign"></i> Icons </a> </li> <li class=""> <a href="../ui_lab/grid.html"> <i class="icon-th-large"></i> Grid </a> </li> <li class=""> <a href="../ui_lab/tables.html"> <i class="icon-table"></i> Tables </a> </li> <li class=""> <a href="../ui_lab/widgets.html"> <i class="icon-plus-sign-alt"></i> Widgets </a> </li> </ul> </li> <li class=""> <span class="glow"></span> <a href="../forms/forms.html"> <i class="icon-edit icon-2x"></i> <span>Forms</span> </a> </li> <li class=""> <span class="glow"></span> <a href="../charts/charts.html"> <i class="icon-bar-chart icon-2x"></i> <span>Charts</span> </a> </li> <li class="dark-nav "> <span class="glow"></span> <a class="accordion-toggle" data-toggle="collapse" href="#WLGsdJPav9"> <i class="icon-link icon-2x"></i> <span> Others <i class="icon-caret-down"></i> </span> </a> <ul id="WLGsdJPav9" class="in" style="height: auto;"> <li class=""> <a href="../other/wizard.html"> <i class="icon-magic"></i> Wizard </a> </li> <li class=""> <a href="../other/login.html"> <i class="icon-user"></i> Login Page </a> </li> <li class=""> <a href="../other/sign_up.html"> <i class="icon-user"></i> Sign Up Page </a> </li> </ul> </li> </ul>
我不知道如何布置 ruby/rails 代码,以便它反映小提琴中标记的行为?
这里的关键是子 UL/LI 元素必须在页面加载时呈现,但简单的导航 GEM 会隐藏它们,直到它们的父 UL/LI 元素处于活动状态......令人沮丧......没有失败。
这是我的自定义渲染器代码:
class Admin < SimpleNavigation::Renderer::Base
def render(item_container)
config_selected_class = SimpleNavigation.config.selected_class
SimpleNavigation.config.selected_class = 'active'
list_content = item_container.items.inject([]) do |list, item|
li_options = item.html_options.reject {|k, v| k == :link}
icon = li_options.delete(:icon)
split = (include_sub_navigation?(item) and li_options.delete(:split))
li_content = content_tag(:span, '', class: 'glow')
li_content << tag_for(item, item.name, icon, split)
if include_sub_navigation?(item)
if split
lio = li_options.dup
lio[:class] = [li_options[:class], 'dropdown-split-left'].flatten.compact.join(' ')
list << content_tag(:li, li_content, lio)
item.html_options[:link] = nil
li_options[:id] = nil
li_content = tag_for(item)
end
item.sub_navigation.dom_class = [item.sub_navigation.dom_class, 'dropdown-menu', split ? 'pull-right' : nil].flatten.compact.join(' ')
li_content << render_sub_navigation_for(item)
li_options[:class] = [li_options[:class], 'dropdown', split ? 'dropdown-split-right' : nil].flatten.compact.join(' ')
end
list << content_tag(:li, li_content, li_options)
end.join
SimpleNavigation.config.selected_class = config_selected_class
if skip_if_empty? && item_container.empty?
''
else
content_tag(:ul, list_content, {:id => item_container.dom_id, :class => item_container.dom_class})
end
end
protected
def tag_for(item, name = '', icon = nil, split = false)
unless item.url or include_sub_navigation?(item)
return item.name
end
url = item.url
link = Array.new
link << content_tag(:i, '', :class => [icon].flatten.compact.join(' ') + ' icon-2x') unless icon.nil?
link << name
if include_sub_navigation?(item)
item_options = item.html_options
item_options[:link] = Hash.new if item_options[:link].nil?
item_options[:link][:class] = Array.new if item_options[:link][:class].nil?
unless split
#item_options[:link][:class] << 'dropdown-toggle'
item_options[:link][:class] << 'in'
#item_options[:link][:'data-toggle'] = 'dropdown'
item_options[:link][:'data-toggle'] = 'collapse'
item_options[:link][:'data-target'] = '#'
#link << content_tag(:b, '', :class => 'caret')
link << content_tag(:b, '', :class => 'icon-caret-down')
end
item.html_options = item_options
end
link_to(link.join(" ").html_safe, url, options_for(item))
end
end
有人是 simple_navigation 高手吗?
谢谢!