method

visual_effect

v2.2.1 - Show latest stable - 0 notes - Class: ActionView::Helpers::ScriptaculousHelper

1.0.0
1.1.6 (0)
1.2.6 (0)
2.0.3 (0)
2.1.0 (2)
2.2.1 (0)
2.3.8 (0)
3.0.0 (-10)
3.0.9 (-2)
3.1.0
3.2.1
3.2.8
3.2.13
4.0.2
4.1.8
4.2.1
4.2.7
4.2.9
5.0.0.1
5.1.7
5.2.3
6.0.0
6.1.3.1
6.1.7.7
7.0.0
7.1.3.2
7.1.3.4
What's this?

visual_effect(name, element_id = false, js_options = {}) public

Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.

Example:

  <%= link_to_remote "Reload", :update => "posts",
        :url => { :action => "reload" },
        :complete => visual_effect(:highlight, "posts", :duration => 0.5)

If no element_id is given, it assumes "element" which should be a local variable in the generated JavaScript execution context. This can be used for example with drop_receiving_element:

  <%= drop_receiving_element (...), :loading => visual_effect(:fade) %>

This would fade the element that was dropped on the drop receiving element.

For toggling visual effects, you can use :toggle_appear, :toggle_slide, and :toggle_blind which will alternate between appear/fade, slidedown/slideup, and blinddown/blindup respectively.

You can change the behaviour with various options, see http://script.aculo.us for more documentation.

Show source

# File actionpack/lib/action_view/helpers/scriptaculous_helper.rb, line 44
      def visual_effect(name, element_id = false, js_options = {})
        element = element_id ? element_id.to_json : "element"
        
        js_options[:queue] = if js_options[:queue].is_a?(Hash)
          '{' + js_options[:queue].map {|k, v| k == :limit ? "#{k}:#{v}" : "#{k}:'#{v}'" }.join(',') + '}'
        elsif js_options[:queue]
          "'#{js_options[:queue]}'"
        end if js_options[:queue]
        
        [:endcolor, :direction, :startcolor, :scaleMode, :restorecolor].each do |option|
          js_options[option] = "'#{js_options[option]}'" if js_options[option]
        end

        if TOGGLE_EFFECTS.include? name.to_sym
          "Effect.toggle(#{element},'#{name.to_s.gsub(/^toggle_/,'')}',#{options_for_javascript(js_options)});"
        else
          "new Effect.#{name.to_s.camelize}(#{element},#{options_for_javascript(js_options)});"
        end
      end

visual_effect

Related methods