3

Zurb Foundation フレームワークを使用して通常のデスクトップ サイトをレスポンシブにするために、Moovweb/Tritium を使用しています。

この一環として、すでに Moovweb にあるUranium 統合のような Foundation ウィジェットを有効にするためのヘルパー関数を作成したいと考えています。しかし、トップ バーのような一部の Foundation コンポーネントは複雑なレイアウトを持っているため、1 回の関数呼び出しで妥当と思われる以上の構成が必要になります。

たとえば、トップ バーを有効にするには、次のような構造が必要です。

# Use the foundation topbar
insert_top("nav", class: "top-bar") {

  # Create the title area
  insert("ul", class: "title-area") {
    inject("<li class='name'><h1><a href='/'>Website Name</a></h1></li>")
    inject("<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>")
  }

  # Grab the header links and put them in the top bar
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {

      # Move the original header links here
      move_here("//span[@class='pagetop']//a"){
        wrap("li")
      }
    }
  }
}

これを再利用可能なトリチウム関数に抽象化して、ボイラープレートを最小限に抑えながら柔軟性を可能にする正しい方法は何ですか?

4

1 に答える 1

3

私のユースケースでは、レイアウトを関連する関数に分割し、相互にネストすることでこれを処理しました。したがって、上記の元のコードは次のようになります。

# enable the foundation top bar
zurb_topbar() {    
  zurb_topbar_title("Website Name", "Menu", "menu-icon")
  zurb_topbar_left() {
    move_here("//span[@class='pagetop']//a"){
      wrap("li")
    }        
  }
}

関数は次のように定義されます。

@func XMLNode.zurb_topbar() {   
    insert_top("nav", class: "top-bar") {
      yield()
    }
}

@func XMLNode.zurb_topbar_title(Text %name, Text %menu_btn_name, Text %menu_icon) {
    insert("ul", class: "title-area") {
      inject("<li class='name'><h1><a href='/'>" +%name +"</a></h1></li>")
      inject("<li class='toggle-topbar "+%menu_icon+"'><a href='#'><span>"+%menu_btn_name+"</span></a></li>")
    }
}

@func XMLNode.zurb_topbar_left() {
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {
     yield()
    }
  }
}

zurb_topbar_rightトップバーの右側のセクションを定義するためにオプションで使用できる関数を想像できます。

通常、ルート以外の場所で href を指すことはほとんどないためzurb_topbar_title、href と の構造はハードコードされていることに注意してください。<LI>代わりに、トップバーのタイトル、メニュー ボタンのタイトル、およびメニュー バー アイコンの存在をカスタマイズする可能性が高い部分です。

一方zurb_topbar_left、<LI>コンテンツはおそらくプログラマーによって埋められるため、歩留まりが向上します。

トレードオフは、関数の適切な組み合わせが適切な方法で使用されることを自動的に強制することが、よりトリッキーになることです。

  • との両方を使用する必要がありzurb_topbarますzurb_topbar_title
  • ただし、またはのzurb_topbar_leftいずれかのみzurb_topbar_right
  • zurb_topbar を含める必要がありますzurb_topbar_left
  • などなど
于 2013-06-20T05:20:11.683 に答える