Hi,
After many tries and questions (also in this user group) I manged to create
a nice button that I want to share.
First, I used the example from:
http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php?foo=we%2C
As you can see in this link, the <button> markup is surrounded with <span> .
That was my problem.
I wanted that when a user puts in the html <button> ... </button> , it will
be changed to be inside <span> .
I used Behavior for this purpose.
Another problem I encountered was changing enable / disable dynamically.
According to the example, disabled button should be inside <del> tag.
I am attaching the files (classes and CSSs) that I created.
Here's the usage:
StyledButton result = new StyledButton("okBtn", new Model(LocalizationHelper
.getMessage("text.buttons.next"))) {
private static final long serialVersionUID = 1L;
@Override
public void onSubmit() {
...
}
};
And in the markup:
<button wicket:id="okBtn" type="submit"></button>
It was tested on IE7 and FF.
Hope this will be helpful for someone.
--
Eyal Golan
[EMAIL PROTECTED]
Visit: http://jvdrums.sourceforge.net/
a.styledButton,span.styledButton,del.styledButton {
display: -moz-inline-box;
display: inline-block;
cursor: pointer;
border: none;
font-size: 0;
line-height: 0;
/*
for Safari, read this first
http://creativebits.org/webdev/safari_background_repeat_bug_fix
*/
background-position: 0 0;
background-repeat: no-repeat;
height: 25px;
text-decoration: none;
color: #2E523B;
font-style: normal;
margin: 2px 6px 2px 0;
padding: 0 10px 0 0;
vertical-align: middle;
padding-top: -2px;
_position: relative;
_width: 10px;
_overflow-y: hidden;
}
a.styledButton,span.styledButton,del.styledButton,a.styledButton span,span.styledButton button,span.styledButton input,del.styledButton span
{
_background-image: url("/com/img/form_buttons.png");
background-image: url("/com/img/button-enabled.gif");
}
a.styledButton span,span.styledButton button,span.styledButton input,del.styledButton span
{
white-space: nowrap;
cursor: pointer;
color: #023860;
display: -moz-inline-box;
display: inline-block;
line-height: 1;
letter-spacing: 0 !important;
font-family: "Verdana" !important;
font-size: 12px !important;
font-style: normal;
font-weight: lighter;
background-color: transparent;
background-position: 100% 0;
background-repeat: no-repeat;
height: 30px;
padding: 8px 20px 0 8px;
margin: 0 -16px 0 8px;
border: none;
vertical-align: text-top;
zoom: 1;
_position: relative;
_padding-left: 0px;
_padding-right: 12px;
_margin-right: -10px;
_display: block;
_top: 0;
_right: -5px;
}
span.styledButton button {
line-height: 2.5; /*Opera need this*/
}
html.safari a.styledButton span,html.safari del.styledButton span {
line-height: 1.3;
}
html.safari span.styledButton button {
line-height: 2.6;
}
html.safari a.styledButton:focus,html.safari span.styledButton button:focus
{
outline: none;
}
del.styledButton { /* cursor:not-allowed; */
background-image: url("/com/img/button-disabled.gif");
/*background-position: 0 -120px;*/
}
del.styledButton span {
cursor: default;
color: #aaa !important;
background-image: url("/styled/img/button-disabled.gif");
/*background-position: 100% -120px;*/
}
span.styledButton button,span.styledButton input {
padding-top: 0px;
line-height: 2.5; /*Opera need this*/
}
/** optional **/ /*
a.styledButton:visited{
color:#aaa;
}
*/ /*Hover Style*/
a.styledButton:hover,span.styledButton:hover,a.styledButton:focus,a.dom-button-focus,span.styledButton-behavior-hover
{
background-image: url("/styled/img/button-enabled-hover.gif");
/*background-position: 0 -60px;*/
color: #222;
text-decoration: none;
}
a.styledButton:hover span,span.styledButton:hover button,a.styledButton:focus span,span.styledButton-behavior-hover button,span.styledButton-behavior-hover input
{
background-image: url("/styled/img/button-enabled-hover.gif");
/*background-position: 100% -60px;*/
}
a.styledButton:active,a.styledButton:focus span {
color: #444;
}
del.styledButton-behavior-hover,del.styledButton:hover {
/*background-position: 0 -180px;*/
/* cursor:not-allowed; */
}
del.styledButton-behavior-hover span,del.styledButton:hover span {
/*background-position: 100% -180px;*/
/* cursor:not-allowed; */
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
