跳到內容 跳到搜尋

Action View 標籤輔助工具

提供方法以使用程式碼產生 HTML 標籤，同時支援現代 HTML5 相容的建立器樣式和舊版 XHTML 相容的標籤。

方法
B
C
E
T
包含的模組

常數

ARIA_PREFIXES = ["aria", :aria].to_set.freeze
 
BOOLEAN_ATTRIBUTES = %w(allowfullscreen allowpaymentrequest async autofocus autoplay checked compact controls declare default defaultchecked defaultmuted defaultselected defer disabled enabled formnovalidate hidden indeterminate inert ismap itemscope loop multiple muted nohref nomodule noresize noshade novalidate nowrap open pauseonexit playsinline readonly required reversed scoped seamless selected sortable truespeed typemustmatch visible).to_set
 
DATA_PREFIXES = ["data", :data].to_set.freeze
 
PRE_CONTENT_STRINGS = Hash.new { "" }
 
TAG_TYPES = {}
 

類別公開方法

build_tag_values(*args)

原始碼：顯示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 580
def build_tag_values(*args)
  tag_values = []

  args.each do |tag_value|
    case tag_value
    when Hash
      tag_value.each do |key, val|
        tag_values << key.to_s if val && key.present?
      end
    when Array
      tag_values.concat build_tag_values(*tag_value)
    else
      tag_values << tag_value.to_s if tag_value.present?
    end
  end

  tag_values
end

ensure_valid_html5_tag_name(name)

原始碼：顯示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 575
def ensure_valid_html5_tag_name(name)
  raise ArgumentError, "Invalid HTML5 tag name: #{name.inspect}" unless /\A[a-zA-Z][^\s\/>]*\z/.match?(name)
end

實例公開方法

cdata_section(content)

傳回包含已給定 content 的 CDATA 區段。CDATA 區段用來跳脫包含會被辨認為標記的字元區塊。CDATA 區段以字串 <![CDATA[ 開頭，並以字串 ]]> 作結尾 (而且不能包含這個字串)。

cdata_section("<hello world>")
# => <![CDATA[<hello world>]]>

cdata_section(File.read("hello_world.txt"))
# => <![CDATA[<hello from a text file]]>

cdata_section("hello]]>world")
# => <![CDATA[hello]]]]><![CDATA[>world]]>

原始碼：顯示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 558
def cdata_section(content)
  splitted = content.to_s.gsub(/\]\]>/, "]]]]><![CDATA[>")
  "<![CDATA[#{splitted}]]>".html_safe
end

class_names(*args)

別名為：token_list

content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)

傳回一個型別為 name 且圍繞在 content 周圍的 HTML 區塊標籤。透過傳遞屬性雜湊至 options，以新增 HTML 屬性。您也可以使用區塊來傳遞 content 作為參數，這種情況下，您會將 options 傳遞為第二個參數。設定 escape 為 false 以停用跳脫。注意：這是舊版語法，有關詳細資訊，請參閱 tag 方法描述。

選項

對於沒有值 (例如 (disabled 和 readonly)) 的屬性，可以使用 options hash，你可以在 options hash 中提供值為 true。你可以使用符號或字串作為屬性名稱。

範例

content_tag(:p, "Hello world!")
 # => <p>Hello world!</p>
content_tag(:div, content_tag(:p, "Hello world!"), class: "strong")
 # => <div class="strong"><p>Hello world!</p></div>
content_tag(:div, "Hello world!", class: ["strong", "highlight"])
 # => <div class="strong highlight">Hello world!</div>
content_tag(:div, "Hello world!", class: ["strong", { highlight: current_user.admin? }])
 # => <div class="strong highlight">Hello world!</div>
content_tag("select", options, multiple: true)
 # => <select multiple="multiple">...options...</select>

<%= content_tag :div, class: "strong" do -%>
  Hello world!
<% end -%>
 # => <div class="strong">Hello world!</div>

來源： 顯示 | 在 GitHub

# File actionview/lib/action_view/helpers/tag_helper.rb, line 516
def content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)
  ensure_valid_html5_tag_name(name)

  if block_given?
    options = content_or_options_with_block if content_or_options_with_block.is_a?(Hash)
    tag_builder.content_tag_string(name, capture(&block), options, escape)
  else
    tag_builder.content_tag_string(name, content_or_options_with_block, options, escape)
  end
end

escape_once(html)

傳回已逃逸版本的 html，不會影響現有的已逃逸實體。

escape_once("1 < 2 &amp; 3")
# => "1 &lt; 2 &amp; 3"

escape_once("&lt;&lt; Accept & Checkout")
# => "&lt;&lt; Accept &amp; Checkout"

來源： 顯示 | 在 GitHub

# File actionview/lib/action_view/helpers/tag_helper.rb, line 570
def escape_once(html)
  ERB::Util.html_escape_once(html)
end

tag(name = nil, options = nil, open = false, escape = true)

傳回 HTML 標籤。

建立 HTML 標籤

使用標籤代理建立符合 HTML5 的標籤。每個標籤都可以使用以下方法建立：

tag.<tag name>(optional content, options)

而標籤名稱可以是 br、div、section、article 或任何標籤。

傳遞內容

Tags 可以傳遞內容到標籤中

tag.h1 'All titles fit to print' # => <h1>All titles fit to print</h1>

tag.div tag.p('Hello world!')  # => <div><p>Hello world!</p></div>

也可以使用區塊擷取內容，這在範本中非常有用

<%= tag.p do %>
  The next great American novel starts here.
<% end %>
# => <p>The next great American novel starts here.</p>

選項

使用符號為對應鍵的選項來為產生的標籤新增屬性。

tag.section class: %w( kitties puppies )
# => <section class="kitties puppies"></section>

tag.section id: dom_id(@post)
# => <section id="<generated dom id>"></section>

對於可以不渲染值的任何屬性（例如 disabled 和 readonly），傳遞 true。

tag.input type: 'text', disabled: true
# => <input type="text" disabled="disabled">

可以使用單一的 data 或 aria 鍵指向子屬性雜湊，來設定 HTML5 data-* 和 aria-* 屬性。

為了與 JavaScript 慣例協調一致，子屬性以破折號分隔。

tag.article data: { user_id: 123 }
# => <article data-user-id="123"></article>

因此 data-user-id 可以存取為 dataset.userId。

資料屬性值會編碼為 JSON，字串、符號和 BigDecimals 除外。這在使用 jQuery 從 1.4.3 版開始的 HTML5 感知 .data() 時，可能會派上用場。

tag.div data: { city_state: %w( Chicago IL ) }
# => <div data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]"></div>

預設會將產生的標籤名稱和屬性進行逃逸。可以使用 escape 來停用這個功能。

tag.img src: 'open & shut.png'
# => <img src="open &amp; shut.png">

tag.img src: 'open & shut.png', escape: false
# => <img src="open & shut.png">

如果沒有傳遞內容，標籤產生器會尊重 HTML5 無效元素，並省略那些元素的關閉標籤。

# A standard element:
tag.div # => <div></div>

# A void element:
tag.br  # => <br>

請注意，當使用區塊範本時，選項應該包含在括號中。

<%= tag.a(href: "/about", class: "font-bold") do %>
  About the author
<% end %>
# => <a href="/about" class="font-bold">About the author</a>

建立 HTML 屬性

將 Hash 轉換為 HTML 屬性，以便插補到 ERB 中。包含或省略布林屬性會根據其真值。將巢狀在 aria: 或 data: 物件中的鍵轉換為前綴有 aria- 和 data- 的屬性

<input <%= tag.attributes(type: :text, aria: { label: "Search" }) %>>
# => <input type="text" aria-label="Search">

<button <%= tag.attributes id: "call-to-action", disabled: false, aria: { expanded: false } %> class="primary">Get Started!</button>
# => <button id="call-to-action" aria-expanded="false" class="primary">Get Started!</button>

舊語法

以下格式是用於支援舊語法的。它會在 Rails 未來的版本中棄用。

tag(name, options = nil, open = false, escape = true)

它會傳回一個空的 HTML 標籤類型 name，預設符合 XHTML。將 open 設定為 true，以建立適用於 HTML 4.0 及以下版本的開啟標籤。將屬性雜湊傳遞給 options 來新增 HTML 屬性。將 escape 設定為 false 以停用屬性值的逃逸。

選項

你可以使用符號或字串作為屬性名稱。

對於可以不渲染值的布林屬性（例如 disabled 和 readonly），請使用 true。

可以使用單一的 data 鍵指向子屬性雜湊，來設定 HTML5 data-* 屬性。

範例

tag("br")
# => <br />

tag("br", nil, true)
# => <br>

tag("input", type: 'text', disabled: true)
# => <input type="text" disabled="disabled" />

tag("input", type: 'text', class: ["strong", "highlight"])
# => <input class="strong highlight" type="text" />

tag("img", src: "open & shut.png")
# => <img src="open &amp; shut.png" />

tag("img", { src: "open &amp; shut.png" }, false, false)
# => <img src="open &amp; shut.png" />

tag("div", data: { name: 'Stephen', city_state: %w(Chicago IL) })
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

tag("div", class: { highlight: current_user.admin? })
# => <div class="highlight" />

來源： 顯示 | 在 GitHub

# File actionview/lib/action_view/helpers/tag_helper.rb, line 479
def tag(name = nil, options = nil, open = false, escape = true)
  if name.nil?
    tag_builder
  else
    ensure_valid_html5_tag_name(name)
    "<#{name}#{tag_builder.tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe
  end
end

token_list(*args)

傳回從 args 建立的 token 字串。

範例

token_list("foo", "bar")
 # => "foo bar"
token_list("foo", "foo bar")
 # => "foo bar"
token_list({ foo: true, bar: false })
 # => "foo"
token_list(nil, false, 123, "", "foo", { bar: true })
 # => "123 foo bar"
別名：class_names

來源：顯示 | 位於 GitHub

# File actionview/lib/action_view/helpers/tag_helper.rb, line 538
def token_list(*args)
  tokens = build_tag_values(*args).flat_map { |value| CGI.unescape_html(value.to_s).split(/\s+/) }.uniq

  safe_join(tokens, " ")
end