I had to tweak it a bit for IE. Try this example as a starting point...
[Save] [Password...][Refresh][Cancel]
<div class="buttons">
<table>
<tr>
<td><input type="submit" value="Save" class="positive"/></td>
<td><a t:type="pagelink" t:page="security/UserPasswordChange"
t:context="user.id" title="Change Password" href="#">Password...</a></
td>
<td><a t:type="pagelink" t:page="security/UserEdit"
t:context="user.id" title="Refresh">Refresh</a></td>
<td><a t:type="actionlink" t:id="Cancel" href="#">Cancel</a></td>
</tr>
</table>
</div>
/*
Button styling based on
http://particletree.com/features/rediscovering-the-button-element/
*/
.buttons { float: right; }
.buttons td { text-align: center; }
.buttons a, .buttons input { font-family: Verdana, Arial, Helvetica,
sans-serif; font-weight: bold;
width: 7em; border: 2px solid #8cacbb; display:
block; }
.buttons a { padding: 4px 0; text-decoration: none; background:
#e9f3f6; }
.buttons input { padding: 3px 10px; margin: 0; cursor:
pointer; }
.buttons input[type] { /* Safari */ line-height: 17px; }
*:first-child+html .buttons input[type] { /* IE 7 */ line-height:
13px; }
/* Standard */
.buttons a, .buttons input { background-color:#d5f5f5; color:#529214; }
.buttons a:hover, .buttons input:hover
{ background-color:#dff4ff; color:#336699; }
.buttons a:active { background-color:#6299c5; color:#fff; }
/* Positive */
.buttons a.positive, .buttons input.positive
{ color:#4d798e; }
.buttons a.positive:hover, .buttons input.positive:hover
{ background-color:#E6EFC2; color:#529214; }
.buttons a.positive:active { background-color:#529214; color:#fff; }
/* Negative */
.buttons a.negative, .buttons input.negative
{ color:#d12f19; }
.buttons a.negative:hover, .buttons input.negative:hover
{ background:#fbe3e4; color:#d12f19; }
.buttons a.negative:active { background-color:#d12f19; color:#fff; }
Cheers,
Geoff
On 01/02/2008, at 2:00 AM, Mark Horn wrote:
Geoff, or others :)
I found the posting below suggesting making links/buttons/submits look
the same as described at
http://particletree.com/features/rediscovering-the-button-element/
and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/)
I tried this out and all looks/works great in FireFox but does not
work correctly in IE. Any ideas on how to tweak these for IE? or any
other Best Practice on how to support this type of thing?
The original question was Best Practice for cancel an edit page. ie.
have a Submit button that is 'Save' a link that is 'Cancel' (don't
want validation) and want to have them together and look good.
[Save] [Cancel]
Thanks,
Mark
-------------------------------------
Re: [T5] best practice to cancel edit page
from Tapestry User by jeffrey ai <[EMAIL PROTECTED]>
That's great to know!
Thanks for your tips, Geoff.
Cheers,
Jeffrey Ai
Geoff Callender-2 wrote:
Hi Jeffrey,
What you do is change the submits and the links to look the same,
which is not quite the same as the browser-generated button, but on
the plus-side they'll look the same in any browser. This approach is
used in many commercial sites eg. banking sites. One place that
describes button-styling is
http://particletree.com/features/rediscovering-the-button-element/
.
eg. Here are 3 "buttons" on a UserEdit page:
<div class="buttons">
<input type="submit" value="Save"/>
Refresh
Cancel
</div>
and here's some css to style them to look the same:
.buttons a, .buttons input { margin:0 7px 0 0; background-
color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee;
border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma,
Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-
decoration:none; font-weight:bold; color:#565656; cursor:pointer;
padding:5px 10px 6px 7px; /* Links and submits */ }
.buttons input { width:auto; overflow:visible; padding:4px 10px 3px
7px; /* IE6 */ }
.buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line-
height:17px; /* Safari */ }
*:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7
*/ }
.buttons input img, .buttons a img { margin:0 3px -3px 0 !important;
padding:0; border:none; width:16px; height:16px; }
A fuller example is in the code of JumpStart.
Cheers,
Geoff
http://files.doublenegative.com.au/jumpstart/
On 22/12/2007, at 4:40 AM, jeffrey ai wrote:
Geoff,
I am not quite familiar with CSS.
I think ActionLink or PageLink could only be rendered to an Anchor
Link.
I doubt CSS can change its look like to a button.
Cheers,
Jeffrey Ai
Geoff Callender-2 wrote:
Another technique is to use an ActionLink or PageLink for cancel
and
refresh functions. To make the submit button and ActionLink share
the
same styling use css. I think Howard recommends this approach.
Cheers,
Geoff
On 21/12/2007, at 4:37 AM, jeffrey ai wrote:
Homburg,
I noticed the same problem too. If you have a normal cancel
button
in a T5
form as your save button, a post request will be sent back to the
page to
go through the validation method and even onSuccess() method.
My solution to this problem is to create an ActionLinkButton
component. It's
almost the same with the ActionLink component, Instead of create a
normal
link, it creates a button link like below:
<input type="button" value="cancel"
onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/>
In your page, you could have an onActionFromCancel() method to do
whatever
redirection you want.
Cheers,
Jeffrey Ai
Sven Homburg-2 wrote:
hi there,
who can me explain the best practice to cancel edit page?
i have a save- and cancel button (both submit components)
surrounded by
a form component.
if user press the cancel button, the edit form should make
nothing
than
leave the page.
without prepare, validation, etc
is this possible?
--
best regards
S.Homburg
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
View this message in context:
http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14441353.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
View this message in context:
http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14459523.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
View this message in context:
http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14464072.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
Add starShareEmailAdd tags
View more items from "Tapestry User"
Or go
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
