| Class | Mack::JavaScript::Framework::JquerySelector |
| In: |
lib/mack-javascript/helpers/jquery_helper.rb
|
| Parent: | Mack::JavaScript::Selector |
# File lib/mack-javascript/helpers/jquery_helper.rb, line 197
197: def add_class(klass)
198: add "addClass('#{klass}')"
199: end
returns a collection of every parent up the chain to the root of the document for each selected element. This method also takes an optional selector as an argument.
Example:
for the html
<div class=‘big_daddy_kane’>
<div id='long_live'>
<ul class='raw'>
<li id='featuring'>with Kool G Rap</li>
</ul>
</div>
</div>
page.select(‘featuring’).ancestors will give you a collection consisting of both divs and the ul. page.select(‘featuring’).ancestors(‘long_live’) will give you the div with id ‘long_live‘
# File lib/mack-javascript/helpers/jquery_helper.rb, line 157
157: def ancestors(selector = nil)
158: add "parents(#{optional_selector(selector)})"
159: end
Will give you the immediate children underneath the selected elements
Example: say you have the following html:
<div class=‘rakim’>
<ul>
...
</ul>
</div>
<div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
page.select(’.rakim’).children would give you a collection consisting of the ul element, the p element, and the div with id ‘technique‘
# File lib/mack-javascript/helpers/jquery_helper.rb, line 129
129: def children
130: add "children()"
131: end
Makes the selected elements draggable.
options can be a hash or a string. The following strings are supported
| disable: | temporarily disables dragging functionality |
| enable: | re-enables dragging functionality |
| destroy: | disables dragging functionality |
The options hash has many...well, options, the full list of which can be found here: docs.jquery.com/UI/Draggable/draggable#toptions Some usefule ones include:
| :opacity: | opacity of the element once dragging starts |
| :scroll: | if true, container auto-scrolls while dragging. |
| :zIndex: | z-index for the helper while being dragged. |
| :helper: | Possible values: ‘original’, ‘clone’. The ‘clone’ option will produce the ‘ghosting’ effect. |
| :revert: | if set to true, the element will return to its |
start position when dragging stops. Also accepts the
strings "valid" and "invalid": If set to invalid, revert
will only occur if the draggable has not been dropped on
a droppable. For valid, it's the other way around.
# File lib/mack-javascript/helpers/jquery_helper.rb, line 507
507: def draggable(options = nil)
508: add "draggable(#{drag_and_drop_options(options)})"
509: end
Makes the selected elements droppable.
options can be a hash or a string. The following strings are supported
| disable: | temporarily disables dropping functionality |
| enable: | re-enables dropping functionality |
| destroy: | disables dropping functionality |
all options are at docs.jquery.com/UI/Droppables/droppable Some useful ones include:
| :accept: | a css selector that defines what type of draggable |
elements it accepts. For instance, if :accept => '.block',
only draggable objects with the class 'block' will be selected
| :activeClass: | The class that should be added to the droppable while an acceptable draggable is being dragged. |
| :hoverClass: | The class that should be added to the droppable while being hovered by an acceptable draggable. |
| :tolerance: | Specifies which mode to use for testing whether a draggable is ‘over’ a droppable. Possible values: ‘fit’, ‘intersect’, ‘pointer’, ‘touch’. Default value: ‘intersect’. |
| :remote: | takes a hash of ajax options, the same as given to page.ajax if this options is, an ajax call is made using the specified options along. Added to the url is an id parameter which has the id of the element that was dropped |
if a block is given, the blocks code will be executed when a succesful drop is done.
Example
options = {:accept => ’.trash’, :remote => {:url => ’/stuff’}} page.select(‘bucket’).droppable options do |p|
p.alert('you dropped it!')
end
This code will make the element with id ‘bucket’ droppable. If an element with class ‘trash’ is dropped onto it, an ajax call to the url ’/stuff’ will be sent with an id parameter of the id of the dropped element. Then an js alert box with the message ‘you dropped it’ will appear.
# File lib/mack-javascript/helpers/jquery_helper.rb, line 550
550: def droppable(options = nil, &block)
551: remote_options = options.delete(:remote)
552: if remote_options || block_given?
553: func = Mack::JavaScript::Function.new(session_id, 'ev', 'ui')
554: if remote_options
555: remote_options[:with] ||= "'id=' + $(ui.draggable).attr('id')"
556: func << Mack::JavaScript::ScriptGenerator.new(session_id).ajax(remote_options)
557: end
558: func.body(&block) if block_given?
559: options.merge!(:drop => func)
560: end
561: add "droppable(#{drag_and_drop_options(options)})"
562: end
custom effects. ‘name’ corresponds to the keys of the hash above
# File lib/mack-javascript/helpers/jquery_helper.rb, line 416
416: def effect(name, options = nil)
417: effect = @@effects[name]
418: args = [effect[:mode] ? "'#{effect[:mode]}'" : nil,
419: options_for_effects((effect[:options] || {}).merge(options || {}))]
420: add "#{effect[:function]}(#{args.compact.join(',')})"
421: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 435
435: def hide(fx = nil, options = nil)
436: args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
437: add "hide(#{args.compact.join(',')})"
438: end
inserts html into the selected place for the specfied elemets
position may be one of:
| :top: | HTML is inserted inside the element, before the element‘s existing content. |
| :bottom: | HTML is inserted inside the element, after the element‘s existing content. |
| :before: | HTML is inserted immediately preceding the element. |
| :after: | HTML is inserted immediately following the element. |
Example
<div class=‘rakim’>
<ul>
...
</ul>
</div>
<div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
page.select(’.rakim’).insert(:before, "<h1> The R </h1>") would result in:
<h1> The R </h2> <div class=‘rakim’>
<ul>
...
</ul>
</div>
<h1> The R </h2> <div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
Tip: use this with a partial containing your html: page.select(’.rakim’).insert(:before, render(:partial, ‘the_r’, :format => :html))
# File lib/mack-javascript/helpers/jquery_helper.rb, line 267
267: def insert(position, html)
268: position = {:bottom => 'append', :top => 'prepend'}[position.to_sym] || position.to_s
269: add "#{position}('#{escape_javascript(html)}')"
270: end
Takes a hash of css properties you want the selected elements to ‘morph’ into. Say you want all elements with class rakim to transition to only having half the opacity and having a red background, and you want the transition to last 4 seconds page.select(’.rakim’).morph({:opacity => 0.5, :backgroundColor => ‘f00’}, :duration => 4000) You can see a list of css properties here www.w3schools.com/CSS/css_reference.asp The properties in your hash should be camelcase: :backgroundColor instead of background-color
# File lib/mack-javascript/helpers/jquery_helper.rb, line 377
377: def morph(hsh, options = nil)
378: options[:complete] = options.delete(:callback) if options && options[:callback]
379: args = [options_for_javascript(hsh), options_for_effects(options)]
380: add "animate(#{args.compact.join(',')})"
381: end
adds an event listener to the selected elements. If options[:prevent_default] == true the default behavior of the event isn‘t taken
Example
page.select(’.rakim a’).peep ‘click’, :prevent_default => true do |p|
p.select('#sucka_mcs').effect(:fade)
end
After running this code, if you click any a tag under any element with the class ‘rakim’, the element with id "sucka_mcs" will fade. Because of the option :prevent_default => true, the default action when clicking the a tag (the browser goes to its href url) isn‘t done. This can also be used in conjunction with trigger to make and call custom events.
# File lib/mack-javascript/helpers/jquery_helper.rb, line 465
465: def peep(event_name, options = {}, &block)
466: add "bind('#{event_name}', #{event_function(options[:prevent_default], &block)})"
467: end
removes the selected elements from the DOM
# File lib/mack-javascript/helpers/jquery_helper.rb, line 315
315: def remove
316: add "remove()"
317: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 211
211: def remove_attribute(name)
212: add "removeAttr('#{name}')"
213: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 202
202: def remove_class(klass = '')
203: add "removeClass('#{klass}')"
204: end
replaces the selected html.
repace may be:
| :inner: | The inner html of the selected elements are replaced |
| :outer: | the selected elements themselves are replaced |
Example
<div class=‘rakim’>
<p>Dont Sweat the Techinique</p>
</div> <div class=‘rakim’>
<p>Follow the Leader</p>
</div>
page.select(’.rakim’).replace(:inner, "<p>Paid in Full</p>") would result in
<div class=‘rakim’>
<p>Paid in Full</p>
</div> <div class=‘rakim’>
<p>Paid in Full</p>
</div>
if we then did: page.select(’.rakim’).replace(:outer, "<div class=‘schoolyD’><p>SaturdayNight</p></div>") the result would be
<div class=‘schoolyD’>
<p>SaturdayNight</p>
</div> <div class=‘schoolyD’>
<p>SaturdayNight</p>
</div>
# File lib/mack-javascript/helpers/jquery_helper.rb, line 309
309: def replace(replace, html)
310: function = {:inner =>"html",:outer => 'replaceWith'}[replace.to_sym]
311: add "#{function}('#{escape_javascript(html)}')"
312: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 99
99: def select
100: "$(#{@selector})"
101: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 206
206: def set_attribute(name, value)
207: value = "'#{value}'" if value.is_a? String
208: add "attr('#{name}', #{value})"
209: end
show() shows an element, hide() hides it, and toggle() shows a hidden and hides a shown.
The first parameter, fx, can be any one of the following: blind, bounce, clip, core, drop, explode, fold, highlight, pulsate, scale, shake, slide. You can see above that the majority of the custom effects are built using either show or hide paired with an fx Note: the arguments for the following three methods are unique to jquery
# File lib/mack-javascript/helpers/jquery_helper.rb, line 430
430: def show(fx = nil, options = nil)
431: args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
432: add "show(#{args.compact.join(',')})"
433: end
takes away any event listeners on the ‘event_name’ event fot the selected elements
# File lib/mack-javascript/helpers/jquery_helper.rb, line 470
470: def stop_peeping(event_name)
471: add "unbind('#{event_name}')"
472: end
# File lib/mack-javascript/helpers/jquery_helper.rb, line 440
440: def toggle(fx = nil, options = nil)
441: args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
442: add "toggle(#{args.compact.join(',')})"
443: end