html_ruby 链接lehtede vahe

link.html.erb
<%= link_to 'Page', lehe_aadress_path %>
# selleks, et ruby code'i kuvaks lehel, peab esitag'is olema võrdusmärk

html_ruby 页面之间的链接

Selleks,et rakendada html模板的红宝石koodi在vaja paigutada上看到<br/> <%kood%> vahele <br/> Selleks,et leht ka seda koodi ka kuvaks peavad need tag'id olema soldised <br/> <%= kood %>ehkvõrdusmärgiga

home.html.erb
# link etween pages 
<h1>This is about page</h1>
        <%=
            link_to 'Home', welcome_home_path
        %>

html_ruby ドロップダウン选択时に形式送信

表示件数などのドロップダウン选択时

somehtml.erb
<%= form_for @user do |f| %>
  <%= f.select :age, onchange: "this.form.submit()") %>
<% end %>

html_ruby 条件に応じたリンク生成

sample.html.erb
<%= link_to_if @user.present, "MY PAGE", user_path(@user) %>
<%= link_to_unless_current "HOME", root_path %>

html_ruby リンククリック时に确认ダイアログを表示

`link_to`に`data-confrim`オプションを指定する

sample.html.erb
<%= link_to '削除', book, method: :delete, data: {confirm: '本当によろしいですか?'} %>

html_ruby 图标设定

轨での图标设定

application.html.erb
# app/assets/images/favicon.ico
<%= favicon_link_tag('favicon.ico') %>

# iOSアイコン
# app/assets/images/apple-touch-icon-180x180.png
<%= favicon_link_tag('apple-touch-icon-180x180.png',
                     {:rel => 'apple-touch-icon',
                      :sizes => '180x180',
                      :type => 'image/png'}) %>

html_ruby アイコン付き的link_toボタン

的link_toヘルパーにアイコンを埋め込む

_form.html.erb
<% link_to root_path do %>
  <i class="icon-home"></i> ホーム
<% end %>

html_ruby 查看示例代码

查看示例代码

view.erb
<!-- 链接 -->
<%= link_to 'Ad details', magazine_ad_path(@magazine, @ad) %>
<%= link_to 'Ad details', url_for([@magazine, @ad]) %>
<%= link_to 'Ad details', [@magazine, @ad] %>
<%= link_to 'Magazine details', @magazine %>
<%= link_to 'Edit Ad', [:edit, @magazine, @ad] %>
<!-- 转换html片段 -->
<%= raw @cms.current_template %>
<%=truncate(string, length: 2)%>

<!-- 静态资源标签帮助方法 -->
<!-- javascript_include_tag 和 stylesheet_link_tag:如果启用了 Asset Pipeline,这个帮助方法生成的链接指向 /assets/javascripts/和/assets/stylesheets/。Rails 程序或引擎中的 JavaScript和Stylesheet 文件可存放在三个位置:app/assets,lib/assets 或 vendor/assets文件下的文件夹中名为 javascripts和stylesheets的子文件夹中的文件。

image_tag、video_tag和audio_tag:默认情况下,文件存放在 public/images、public/videos、public/audio文件夹中。
 -->
<!--  js引用,app/assets/javascripts/ -->
<%= javascript_include_tag "main" %>
<%= javascript_include_tag "main", "columns" %>
<!-- 指定路径,app/assets/javascripts/photos -->
<%= javascript_include_tag "main", "/photos/columns" %>
<!-- css引用,app/assets/stylesheets/ -->
<%= stylesheet_link_tag "main", "columns" %>
<!-- 指定路径,app/assets/stylesheets/photos -->
<%= stylesheet_link_tag "main", "photos/columns" %>
<%= stylesheet_link_tag "http://example.com/main.css" %>
<%= stylesheet_link_tag "main_print", media: "print" %>
<!-- img引用,public/images -->
<%= image_tag "header.png" %>
<!-- 指定路径,public/icons -->
<%= image_tag "icons/delete.gif" %>
<%= image_tag "home.gif", alt: "Go Home",id: "HomeImage",class: "nav_bar" %>
<!-- video_tag 帮助方法为指定的文件生成 HTML5 <video> 标签。默认情况下,视频文件存放在 public/videos 文件夹中 -->
<%= video_tag "movie.ogg" %>
<%= video_tag ["trailer.ogg", "movie.ogg"] %>
<!-- audio_tag 帮助方法为指定的文件生成 HTML5 <audio> 标签。默认情况下,音频文件存放在 public/audio 文件夹中 -->
<%= audio_tag "music.mp3" %>
<!-- 指定路径,public/music -->
<%= audio_tag "music/first_song.mp3" %>

<!-- 使用局部视图 -->
<!-- _menu.html.erb -->
<%= render "menu" %>
<%= render "shared/menu" %>
<%= render partial: "link_area", layout: "graybar" %>
<!-- 传递本地变量,都是渲染_customer.html.erb局部视图 -->
<%= render partial: "form", locals: {zone: @zone} %>
<%= render partial: "customer", object: @new_customer %>
<!--  _customer.html.erb -->
<%= render @customer %>

<!-- 渲染集合 -->
<!-- _product.erb -->
<%= render partial: "product", collection: @products %>
<%= render @products %>
<!-- 模板product -->
<p>Product Name: <%= product.name %></p>

<!-- Rails 根据集合中各元素的模型名决定使用哪个局部视图。其实,集合中的元素可以来自不同的模型,Rails 会选择正确的局部视图进行渲染。 -->
<%= render [customer1, employee1, customer2, employee2] %>
<!-- 要在局部视图中自定义本地变量的名字,调用局部视图时可通过 :as 选项指定 -->
<%= render partial: "product", collection: @products, as: :item %>
<%= render partial: "product", collection: @products,
           as: :item, locals: {title: "Products Page"} %>

<!-- 渲染集合,将集合传给局部视图,会把集合中每个元素套入局部视图渲染。在局部视图中可以使用和局部视图同名的变量引用集合中的成员。如果集合为空,render 方法会返回 nil,所以最好提供替代文本 -->
<%= render partial: "product", collection: @products %>
<%= render(@products) || "There are no products available." %>

<!-- 间隔模板:Rails 会在两次渲染 _product 局部视图之间渲染 _product_ruler 局部视图(不传入任何数据) -->
<%= render partial: @products, spacer_template: "product_ruler" %>
<!-- 局部视图使用局部布局,局部布局名字也以下划线开头和局部视图保存在同文件夹中(不在layouts里) -->
<%= render partial: "product", collection: @products, layout: "special_layout" %>
<%= render partial: "link_area", layout: "graybar" %>

<!-- 嵌套模板:使用子模板news.html.erb -->
<%= render template: "layouts/news" %>


<!-- 表单帮助方法 -->
<!-- 表单帮助方法有form_tag和form_for方法,生成的html会多了一个 div 元素,其中有两个隐藏的 input 元素。这个 div 元素很重要,没有就无法提交表单。第一个 input 元素的 name 属性值为 utf8,其作用是强制浏览器使用指定的编码处理表单,不管是 GET 还是 POST。第二个 input 元素的 name 属性值为 authenticity_token,这是 Rails 的一项安全措施,称为“跨站请求伪造保护”。 -->
<!-- form_tag表单控件都以_tag结尾。form_tag表单想传什么参数都行,没有约束,基本上method是put,post方式用于数据的添加和更新,如果不指定action会跳到controller的update或者create方法里(具体进入哪个action要看提交什么样的路由)。 -->
<%= form_tag(controller: "people", action: "search", method: "get", class: "nifty_form" do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
<!--   复选框 -->
  <%= check_box_tag(:pet_dog) %>
  <%= label_tag(:pet_dog, "I own a dog") %>
  <%= check_box_tag(:pet_cat) %>
  <%= label_tag(:pet_cat, "I own a cat") %>
<!--   单选框 -->
  <%= radio_button_tag(:age, "child") %>
  <%= label_tag(:age_child, "I am younger than 21") %>
  <%= radio_button_tag(:age, "adult") %>
  <%= label_tag(:age_adult, "I'm over 21") %>

  <%= text_area_tag(:message, "Hi, nice site", size: "24x6") %>
  <%= password_field_tag(:password) %>
  <%= hidden_field_tag(:parent_id, "5") %>
  <%= search_field(:user, :name) %>
  <%= telephone_field(:user, :phone) %>
  <%= date_field(:user, :born_on) %>
  <%= datetime_field(:user, :meeting_time) %>
  <%= datetime_local_field(:user, :graduation_day) %>
  <%= month_field(:user, :birthday_month) %>
  <%= week_field(:user, :birthday_week) %>
  <%= url_field(:user, :homepage) %>
  <%= email_field(:user, :address) %>
  <%= color_field(:user, :favorite_color) %>
  <%= time_field(:task, :started_at) %>
  <%= number_field(:product, :price, in: 1.0..20.0, step: 0.5) %>
  <%= range_field(:product, :discount, in: 1..100) %>
  <%= select_tag(:city_id,  options_for_select([['Lisbon', 1], ['Madrid', 2], ...])) %>
  <%= select_tag(:city_id,  options_from_collection_for_select(City.all, :id, :name)) %>
  <%= submit_tag("Search") %>
<% end %>
<!-- 模型对象表单帮助方法:form_for表单里的控件不需要加 _tag后缀。form_for表单是Model层的对象绑定,表单传递的值必须是Model中有的字段,基本上method是put,post方式用于数据的添加和更新,如果不指定action会跳到controller的update或者create方法里(具体进入哪个action要看提交什么样的路由) -->
<%= form_for @article, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :body, size: "60x12" %>
  <%= f.submit "Create" %>
<% end %>

<!-- 上传文件 -->
<%= form_tag({action: :upload}, multipart: true) do %>
  <%= file_field_tag 'picture' %>
<% end %>
 
<%= form_for @person do |f| %>
  <%= f.file_field :picture %>
<% end %>

<!-- {'person' => {'address' => {'city' => 'New York'}}} -->
<input id="person_address_city" name="person[address][city]" type="text" value="New York"/>
<!--  params[:person][:phone_number]是数组 -->
<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>
<!--  params[:addresses] 值是一个由 Hash 组成的数组[{line1 =>,line2 =>,city =>},{line1 =>,line2 =>,city =>}] -->
<input name="addresses[][line1]" type="text"/>
<input name="addresses[][line2]" type="text"/>
<input name="addresses[][city]" type="text"/>

<!-- 删除 -->
<%= form_for @person do |f| %>
  Addresses:
  <ul>
    <%= f.fields_for :addresses do |addresses_form| %>
      <li>
        <%= addresses_form.check_box :_destroy%>
        <%= addresses_form.label :kind %>
        <%= addresses_form.text_field :kind %>
        ...
      </li>
    <% end %>
  </ul>
<% end %>

<!-- 处理外部资源表单:有时需要为这些资源创建 authenticity_token -->
<%= form_tag 'http://farfar.away/form', authenticity_token: 'external_token') do %>
  Form contents
<% end %>


<!-- 使用 url_for 方法生成 URL -->
<%= url_for(controller: 'welcome',
            action: 'greeting',
            only_path: false) %>

<%= url_for(host: 'example.com',
            controller: 'welcome',
            action: 'greeting') %>

<!-- 在布局中,yield 标明一个区域,渲染的视图会插入这里。最简单的情况是只有一个 yield,此时渲染的整个视图都会插入这个区域 -->
 <html>
  <head>
  <%= yield :head %>
  </head>
  <body>
  <%= yield %>
  </body>
</html>

<!--  content_for 方法在布局的具名 yield 区域插入内容。如果布局不同的区域需要不同的内容,例如侧边栏和底部,就可以使用 content_for 方法。content_for 方法还可用来在通用布局中引入特定页面使用的 JavaScript 文件或 CSS 文件 -->
<% content_for :head do %>
  <title>A simple page</title>
<% end %>
 
<p>Hello, Rails!</p>

<%= form_for([@article, @article.comments.build]) do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>

删除资源时使用 DELETE 请求:
<a href='http://example.com/articles/1/destroy'>look at this cat!</a>
<%= link_to 'Destroy', article_path(article),method: :delete, data: { confirm: 'Are you sure?' } %>
(:method 和 :'data-confirm' 选项设置链接的 HTML5 属性,点击链接后,首先会显示一个对话框,然后发起 DELETE 请求。这两个操作通过 jquery_ujs 这个 JavaScript 脚本实现。生成程序骨架时,会自动把 jquery_ujs 加入程序的布局中(app/views/layouts/application.html.erb)。没有这个脚本,就不会显示确认对话框。)

html_ruby 应用程序/视图/父母/ new.html.erb

应用程序/视图/父母/ new.html.erb

new.html.erb
<%= form_for(@parent) do |f| %>
	… parent attributes go here …
	<ul>
	<%= f.nested_fields_for :terms do |kids_form| %>
		<li>
			<%= kids_form.text_field :name %>
			<%= kids_form.remove_nested_fields_link %> # Delete link
		</li>
	<% end %>
	</ul>
	
	<%= f.add_nested_fields_link :kids do %>
      <span>New Term</span>
    <% end %>
    
	<%= f.submit "Create Parent" %>
<% end %>

html_ruby 应用程序/视图/父母/ new.html.erb

应用程序/视图/父母/ new.html.erb

new.html.erb
<%= form_for(@parent) do |f| %>
	…
	<%= f.add_nested_fields_link :kids do %>
      <span>New Term</span>
    <% end %>
	...
<% end %>