跟模板中JavaScript相关的helper方法定义文件有javascript_helper.rb/prototype_helper.rb/scriptaculous_helper.rb
其中javascript_helper与基本的JavaScript功能有关,prototype_helper与Ajax有关,而scriptaculous_helper与controls和visual effects有关
先看看javascript_helper.rb中定义的一些helper方法:
1,[color=red]link_to_function[/color]方法为a标签触发onclick事件提供helper方法,可以直接写JavaScript语句或者给出代码block
[code]
def link_to_function(name, *args, &block)
html_options = args.last.is_a?(Hash) ? args.pop : {}
function = args[0] || ''
html_options.symbolize_keys!
function = update_page(&block) if block_given?
content_tag(
"a", name,
html_options.merge({
:href => html_options[:href] || "#",
: onclick => (html_options[: onclick] ? "#{html_options[: onclick]}; " : "") + "#{function}; return false;"
})
)
end
[/code]
例子:
[code]
link_to_function "Greeting", "alert('Hello world!')"
# <a οnclick="alert('Hello world!'); return false;" href="#">Greeting</a>
link_to_function(image_tag("delete"), "if (confirm('Really?')) do_delete()")
# <a οnclick="if (confirm('Really?')) do_delete(); return false;" href="#">
# <img src="/images/delete.png?" alt="Delete"/>
# </a>
link_to_function("Show me more", nil, :id => "more_link") do |page|
page[:details].visual_effect :toggle_blind
page[:more_link].replace_html "Show me less"
end
# <a href="#" id="more_link" οnclick="try {
# $("details").visualEffect("toggle_blind");
# $("more_link").update("Show me less");
# }
# catch (e) {
# alert('RJS error:\n\n' + e.toString());
# alert('$(\"details\").visualEffect(\"toggle_blind\");
# \n$(\"more_link\").update(\"Show me less\");');
# throw e
# };
# return false;">Show me more</a>
[/code]
2,[color=red]button_to_function[/color]方法为button触发onclick事件提供helper方法,可以直接写JavaScript语句或者给出代码block
[code]
def button_to_function(name, *args, &block)
html_options = args.last.is_a?(Hash) ? args.pop : {}
function = args[0] || ''
html_options.symbolize_keys!
function = update_page(&block) if block_given?
tag(:input, html_options.merge({
:type => "button", :value => name,
: onclick => (html_options[: onclick] ? "#{html_options[: onclick]}; " : "") + "#{function};"
}))
end
[/code]
例子:
[code]
button_to_function "Greeting", "alert('Hello world!')"
button_to_function "Delete", "if (confirm('Really?')) do_delete()"
button_to_function "Details" do |page|
page[:details].visual_effect :toggle_slide
end
button_to_function "Details", :class => "details_button" do |page|
page[:details].visual_effect :toggle_slide
end
[/code]
3,[color=red]javascript_tag[/color]方法返回一个JavaScript标签
[code]
def javascript_tag(content, html_options = {})
content_tag("script", javascript_cdata_section(content), html_options.merge(:type => "text/javascript"))
end
[/code]
例子:
[code]
javascript_tag "alert('All is good')"
# <script type="text/javascript">
# //<![CDATA[
# alert('All is good')
# //]]>
# </script>
[/code]
本质上都是使用content_tag或tag方法来生成html标签,然后加上一些html_options的修饰,非常简单,却又非常实用
其中javascript_helper与基本的JavaScript功能有关,prototype_helper与Ajax有关,而scriptaculous_helper与controls和visual effects有关
先看看javascript_helper.rb中定义的一些helper方法:
1,[color=red]link_to_function[/color]方法为a标签触发onclick事件提供helper方法,可以直接写JavaScript语句或者给出代码block
[code]
def link_to_function(name, *args, &block)
html_options = args.last.is_a?(Hash) ? args.pop : {}
function = args[0] || ''
html_options.symbolize_keys!
function = update_page(&block) if block_given?
content_tag(
"a", name,
html_options.merge({
:href => html_options[:href] || "#",
: onclick => (html_options[: onclick] ? "#{html_options[: onclick]}; " : "") + "#{function}; return false;"
})
)
end
[/code]
例子:
[code]
link_to_function "Greeting", "alert('Hello world!')"
# <a οnclick="alert('Hello world!'); return false;" href="#">Greeting</a>
link_to_function(image_tag("delete"), "if (confirm('Really?')) do_delete()")
# <a οnclick="if (confirm('Really?')) do_delete(); return false;" href="#">
# <img src="/images/delete.png?" alt="Delete"/>
# </a>
link_to_function("Show me more", nil, :id => "more_link") do |page|
page[:details].visual_effect :toggle_blind
page[:more_link].replace_html "Show me less"
end
# <a href="#" id="more_link" οnclick="try {
# $("details").visualEffect("toggle_blind");
# $("more_link").update("Show me less");
# }
# catch (e) {
# alert('RJS error:\n\n' + e.toString());
# alert('$(\"details\").visualEffect(\"toggle_blind\");
# \n$(\"more_link\").update(\"Show me less\");');
# throw e
# };
# return false;">Show me more</a>
[/code]
2,[color=red]button_to_function[/color]方法为button触发onclick事件提供helper方法,可以直接写JavaScript语句或者给出代码block
[code]
def button_to_function(name, *args, &block)
html_options = args.last.is_a?(Hash) ? args.pop : {}
function = args[0] || ''
html_options.symbolize_keys!
function = update_page(&block) if block_given?
tag(:input, html_options.merge({
:type => "button", :value => name,
: onclick => (html_options[: onclick] ? "#{html_options[: onclick]}; " : "") + "#{function};"
}))
end
[/code]
例子:
[code]
button_to_function "Greeting", "alert('Hello world!')"
button_to_function "Delete", "if (confirm('Really?')) do_delete()"
button_to_function "Details" do |page|
page[:details].visual_effect :toggle_slide
end
button_to_function "Details", :class => "details_button" do |page|
page[:details].visual_effect :toggle_slide
end
[/code]
3,[color=red]javascript_tag[/color]方法返回一个JavaScript标签
[code]
def javascript_tag(content, html_options = {})
content_tag("script", javascript_cdata_section(content), html_options.merge(:type => "text/javascript"))
end
[/code]
例子:
[code]
javascript_tag "alert('All is good')"
# <script type="text/javascript">
# //<![CDATA[
# alert('All is good')
# //]]>
# </script>
[/code]
本质上都是使用content_tag或tag方法来生成html标签,然后加上一些html_options的修饰,非常简单,却又非常实用