Search and Top Navigation
#7573 closed feature (notabug)
Opened July 21, 2011 02:31PM UTC
Closed October 15, 2012 09:12PM UTC
Button should support enhancing submit button input with icons
Reported by: | michael.lang@xquisoft.com | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.11.0 |
Component: | ui.button | Version: | 1.8.14 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
The documentation for the button widget says: "When using an input of type button, submit or reset, support is limited to plain text labels with no icons."
I see no good reason for this. I have a hack to make it work, but this should really be rolled into the button widget. here is the code I have to make it work:
function createInputButton(inputButton, buttonOptions) {
var $facade = $("<a id='" + $(inputButton).attr('id') + "-facade'></a>").html($(inputButton).val()).button(buttonOptions).click(function () {
$(inputButton).click();
});
$(inputButton).hide().after($facade);
}
usage:
createInputButton($("#Search"), { icons: { primary: "ui-icon-search"} });
This creates a new anchor tag and turns it into a button with the desired options, puts it after the original input, hides the original input, and passes the click event of the anchor tag to the button (to submit the form).
Please consider including this in the next release.
Attachments (0)
Change History (4)
Changed July 21, 2011 02:49PM UTC by comment:1
Changed June 26, 2012 01:22AM UTC by comment:2
type: | enhancement → feature |
---|
Changed October 11, 2012 02:43PM UTC by comment:3
milestone: | 1.9.0 → 1.11.0 |
---|
Changed October 15, 2012 09:12PM UTC by comment:4
resolution: | → invalid |
---|---|
status: | new → closed |
The HTML specification does not permit nested content for input elements and the ui icons are applied via nested content.
http://www.w3.org/TR/html-markup/input.button.html
http://www.w3.org/TR/html-markup/input.submit.html
http://dev.w3.org/html5/spec/single-page.html#the-input-element
We might completely change the approach for buttons to always create a proxy element, which would solve this.