Rails源码研究之ActionView:四,javascript_helper

跟模板中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的修饰,非常简单,却又非常实用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值