HTML5 button_tag helper

This tag is similar in nature to submit_tag, but allows more control.
It also doesn't submit if submit type isn't used, allowing JavaScript to
control the flow where required.

For more information: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element
This commit is contained in:
Rizwan Reza 2010-12-23 22:43:46 +03:30 committed by Jeremy Kemper
parent 2b2b50660b
commit 18605adec3
3 changed files with 83 additions and 0 deletions

@ -1,5 +1,7 @@
*Rails 3.1.0 (unreleased)*
* HTML5 button_tag helper. [Rizwan Reza]
* Template lookup now searches further up in the inheritance chain. [Artemave]
* Brought back config.action_view.cache_template_loading, which allows to decide whether templates should be cached or not. [Piotr Sarnacki]
@ -33,14 +35,17 @@
* Add Rack::Cache to the default stack. Create a Rails store that delegates to the Rails cache, so by default, whatever caching layer you are using will be used for HTTP caching. Note that Rack::Cache will be used if you use #expires_in, #fresh_when or #stale with :public => true. Otherwise, the caching rules will apply to the browser only. [Yehuda Katz, Carl Lerche]
*Rails 3.0.2 (unreleased)*
* The helper number_to_currency accepts a new :negative_format option to be able to configure how to render negative amounts. [Don Wilson]
*Rails 3.0.1 (October 15, 2010)*
* No Changes, just a version bump.
*Rails 3.0.0 (August 29, 2010)*
* password_field renders with nil value by default making the use of passwords secure by default, if you want to render you should do for instance f.password_field(:password, :value => @user.password) [Santiago Pastorino]

@ -401,6 +401,56 @@ def submit_tag(value = "Save changes", options = {})
tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options.stringify_keys)
end
# Creates a button element that defines a <tt>submit</tt> button,
# <tt>reset</tt>button or a generic button which can be used in
# JavaScript, for example. You can use the button tag as a regular
# submit tag but it isn't supported in legacy browsers. However,
# button tag allows richer labels such as images and emphasis.
#
# ==== Options
# * <tt>:confirm => 'question?'</tt> - If present, the
# unobtrusive JavaScript drivers will provide a prompt with
# the question specified. If the user accepts, the form is
# processed normally, otherwise no action is taken.
# * <tt>:disabled</tt> - If true, the user will not be able to
# use this input.
# * <tt>:disable_with</tt> - Value of this parameter will be
# used as the value for a disabled version of the submit
# button when the form is submitted. This feature is provided
# by the unobtrusive JavaScript driver.
# * Any other key creates standard HTML options for the tag.
#
# ==== Examples
# button_tag
# # => <button name="button" type="button">Button</button>
#
# button_tag "<strong>Ask me!</strong>"
# # => <button name="button" type="button">
# <strong>Ask me!</strong>
# </button>
#
# button_tag "Checkout", :disable_with => "Please wait..."
# # => <button data-disable-with="Please wait..." name="button"
# type="button">Checkout</button>
#
def button_tag(label = "Button", options = {})
options.stringify_keys!
if disable_with = options.delete("disable_with")
options["data-disable-with"] = disable_with
end
if confirm = options.delete("confirm")
options["data-confirm"] = confirm
end
["type", "name"].each do |option|
options[option] = "button" unless options[option]
end
content_tag :button, label.to_s.html_safe, { "type" => options.delete("type") }.update(options)
end
# Displays an image which when clicked will submit the form.
#
# <tt>source</tt> is passed to AssetTagHelper#path_to_image

@ -385,6 +385,34 @@ def test_submit_tag_with_confirmation_and_with_disable_with
)
end
def test_button_tag
assert_dom_equal(
%(<button name="button" type="button">Button</button>),
button_tag
)
end
def test_button_tag_with_submit_type
assert_dom_equal(
%(<button name="button" type="submit">Save</button>),
button_tag("Save", :type => "submit")
)
end
def test_button_tag_with_reset_type
assert_dom_equal(
%(<button name="button" type="reset">Reset</button>),
button_tag("Reset", :type => "reset")
)
end
def test_button_tag_with_disabled_option
assert_dom_equal(
%(<button name="button" type="reset" disabled="disabled">Reset</button>),
button_tag("Reset", :type => "reset", :disabled => true)
)
end
def test_image_submit_tag_with_confirmation
assert_dom_equal(
%(<input type="image" src="/images/save.gif" data-confirm="Are you sure?" />),