0

我正在尝试为 simple_navigation rails gem 创建一个自定义渲染器。到目前为止,在阅读了为 gem 的引导版本所做的调整之后,我已经能够对我的导航进行一些小的图标更改,但我完全被卡住了。

  1. 我正在尝试添加一些设置我的渲染器以适应在此 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>
    
    1. 我不知道如何布置 ruby​​/rails 代码,以便它反映小提琴中标记的行为?

    2. 这里的关键是子 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 高手吗?

谢谢!

4

1 回答 1

1

关于你的两个具体问题:

我不知道如何布置 ruby​​/rails 代码,以便它反映小提琴中标记的行为?

目标 html 结构对我来说似乎相当复杂。有没有办法简化这个?此外,如果您分叉简单导航引导渲染器,可能会更容易提供帮助,这样您所做的更改就会更加明显。

这里的关键是子 UL/LI 元素必须在页面加载时呈现,但简单的导航 GEM 会隐藏它们,直到它们的父 UL/LI 元素处于活动状态......令人沮丧......没有失败。

simple-navigation - 默认情况下 - 配置为仅呈现所有主要项目和活动主要项目的子导航,因此这是一项功能,而不是错误:-)。如果需要独立于活动项渲染完整的导航,则需要将:expand_all => true选项传递给render_navigation调用,该选项又用于确定SimpleNavigation::Rendering::Renderer::Base#include_sub_navigation 的返回值?.

于 2013-10-17T19:59:08.547 回答