原创作者: hideto   阅读:1019次   评论:0条   更新时间:2011-05-26    
scriptaculous_helper主要是对scriptaculous的controls和effects相关方法调用的封装
require File.dirname(__FILE__) + '/javascript_helper'

module ActionView
  module Helpers
    module ScriptaculousHelper

      unless const_defined? :TOOGLE_EFFECTS
        TOGGLE_EFFECTS = [:toggle_appear, :toggle_slide, :toggle_blind]
      end

      def visual_effect(name, element_id = false, js_options = {})
        element = element_id ? element_id.to_json : "element"
        js_options[:queque] = if js_options[:queue].is_a?(Hash)
          '{' + js_options[:queue].map {|k, v| k == :limit ? "#{k}:#{v}" : "#{k}:'#{v}'"}.join(',') + '}'
        elseif js_options[:queue]
          "'#{js_options[:queue]}'"
        end if js_options[:queue]

        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

      def sortable_element(element_id, options = {})
        javascript_tag(sortable_element_js(element_id, options).chop!)
      end

      def sortable_element_js(element_id, options = {})
        options[:with] ||= "Sortable.serialize(#{element_id.to_json})"
        options[:onUpdate] ||= "function(){" + remote_function(options) + "}"
        options.delete_if { |key, value| PrototypeHelper::AJAX_OPTIONS.include?(key) }
        [:tag, :overlap, :constraint, :handle].each do |option|
          options[option] = "'#{options[option]}'" if options[option]
        end
        options[:containment] = array_or_string_for_javascript(options[:containment]) if options[:containment]
        options[:only] = array_or_string_for_javascript(options[:only] if options[:only])
        %(Sortable.create(#{element_id.to_json}, #{options_for_javascript(options)});)
      end

      def draggable_element(element_id, options = {})
        javascript_tag(draggable_element_js(element_id, options).chop!)
      end

      def draggable_element_js(element_id, options = {})
        %(new Draggable(#{element_id.to_json}, #{options_for_javascript(options)});)
      end

      def drop_receiving_element(element_id, options = {})
        javascript_tag(drop_receiving_element_js(element_id, options).chop!)
      end

      def drop_receiving_element_js(element_id, options = {})
        options[:with] ||= "'id=' + encodeURIComponent(element.id)"
        options[:onDrop] ||= "function(element){" + remote_function(options) + "}"
        options.delete_if { |key, value| PrototypeHelper::AJAX_OPTIONS.include?(key) }
        options[:accept] = array_or_string_for_javascript(options[:accept]) if options[:accept]
        options[:hoverclass] = "'#{options[:hoverclass]}'" if options[:hoverclass]
        %(Droppables.add(#{element_id.to_json}, #{options_for_javascript(options)});)
      end
    end
  end
end

和前面看到的javascript_helper,prototype_helper一样,也是封装并返回JavaScript语句
这些方法用到了scriptaculous的Effect,Sortable,Draggable和Draggables类,具体方法参数参考http://script.aculo.us
还是看看例子吧:
1,visual_effect
<%= link_to_remote "Reload", :update => "posts",
                             :url => { :action => "reload" },
                             :complete => visual_effect(:highlight, "posts", :duration => 0.5)

其中visual_effect可以使用:toggle_appear,:toggle_slide和:toggle_blind参数来在appear/fade,slidedown/slideup和blinddown/blindup间切换
2,sortable_element
# view
<ul id="list">
  <% 6.times do |i| -%>
  <li id="item_<%= i+1 %>">I'm number <%= i+1 %></li>
  <% end -%>
</ul>

<p id="list-info"></p>

<%= sortable_element 'list', 
      :update => 'list-info',  
      :complete => visual_effect(:highlight, 'list'), 
      :url => { :action => "order" } %>

# controller
def order
  params[:list].each_with_index { |id,idx| Model.update(id, :position => idx) }
  render :text => 'Updated sort order'
end

3,draggable_element
<%= draggable_element("my_image", :revert => true)

revert为true时,拖动的元素会回到初始位置
4,drop_receiving_element
<div id="to_drop">
  <%= render :partial => 'item', :collection => @to_drop_items %>
</div>
<div id="to_receive">
  <%= render :partial => 'item', :collection => @to_receive_items %>
</div>
<%= drop_receiving_element('to_drop', :url => remove_item_url(@item), :accept => 'to_receive') %>
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

文章信息

Global site tag (gtag.js) - Google Analytics