Site Utilities
Icon Buttons 
- Class name: (actions)
- Version: 1.0
-
Tapestry Integration
Icon buttons may be used for general or common actions that don't need to be directly explained by text. They're also handy for actions that are specific to a table row item, for example.
HTML5 Plain Code
-
<!-- The text for the "title" attributes are just examples. Adapt them to your own context -->
-
<ul class="actions">
-
<li><a href="#" class="bt-new" title="Create new item" role="button">New</a></li>
-
<li><a href="#" class="bt-search" title="Search for..." role="button">Search</a></li>
-
<li><a href="#" class="bt-email" title="Email a friend" role="button">Email</a></li>
-
<li><a href="#" class="bt-print" title="Print page" role="button">Print</a></li>
-
<li><a href="#" class="bt-download" title="Download data" role="button">Download</a></li>
-
<li><a href="#" class="bt-edit" title="Edit account" role="button">Edit</a></li>
-
<li><a href="#" class="bt-view" title="View details" role="button">View</a></li>
-
<li><a href="#" class="bt-del" title="Delete item" role="button">Delete</a></li>
-
</ul>
CSS Code
-
ul.actions {}
-
ul.actions li {
-
display: inline-block;
-
list-style-type: none;
-
}
-
ul.actions a, ul.actions a:link, ul.actions a:visited {
-
overflow: hidden;
-
display: inline-block;
-
width: 1px;
-
height: 2em;
-
line-height: 2em;
-
text-decoration: none;
-
color: #ECECEC;
-
background: #ECECEC url(../img/k-theme0/sprites-trans.png) no-repeat 4px 30px;
-
padding: 0 10px;
-
margin: 0 0.5em;
-
border: 1px solid #CCC;
-
border-radius: 3px;
-
box-shadow: 0 1px 1px rgba(0,0,0,.5);
-
}
-
ul.actions a:hover {color: #FFF; background-color: #FFF;}
-
/* Icons sprite */
-
ul.actions a.bt-print {background-position: 11px -740px; padding-left: 35px;}
-
ul.actions a.bt-download {background-position: 11px -618px; padding-left: 35px;}
-
ul.actions a.bt-edit {background-position: 11px -377px; padding-left: 35px;}
-
ul.actions a.bt-view {background-position: 11px -508px; padding-left: 35px;}
-
ul.actions a.bt-email {background-position: 11px 6px; padding-left: 35px;}
-
ul.actions a.bt-search {background-position: 11px -77px; padding-left: 35px;}
-
ul.actions a.bt-new {background-position: 11px -275px; padding-left: 35px;}
-
ul.actions a.bt-del {background-position: 11px -172px; padding-left: 35px;}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
$('a.bt-print').click(function(){
-
window.print();
-
return false;
-
});
-
});
-
})(jQuery);
Clicking the "print" button will open the print dialog window.
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:
Tapestry Integration
Components used to display a list of links. It will implement 3 Kawwa components : ActionButtons, ActionButtonsBar and iconButtons
By default, the component will render a link for each item of your list. But you can override the rendering, by providing block parameters. If you want to override the rendering of the item with an id="i1", you should define a block parameter <p:i1>...</p:i1>
Name | Required | Java Type | Default Prefix | Default Value | Description |
---|---|---|---|---|---|
items | true | Map<ListOfActionsItem> | prop | Actions | Actions you want to display with this component. You will need to create a List of ListOfActionsItem. If the onlyIcon parameter is set to true, every ListOfActionsItem item should have a value for its classe attribute. |
items | false | Boolean | prop | false | If set to true, the list of actions will be surround by a bar. |
items | false | Boolean | prop | false | If set to true, your list will display only the icon of each item. The label associated to your link will be hidden. |
The Template
-
<t:kawwa2.listOfActions t:items="items" withBar="false" onlyIcon="true"/>
Java Implementation
-
import java.util.ArrayList;
-
import java.util.List;
-
import net.atos.kawwaportal.components.data.ListOfActionsItem;
-
public class ListOfActions {
-
-
public List<ListOfActionsItem> getItems(){
-
List<ListOfActionsItem> items = new ArrayList<ListOfActionsItem>();
-
-
items.add(new ListOfActionsItem("print", "#", "bt-print", false));
-
items.add(new ListOfActionsItem("download", "#", "bt-download", false));
-
items.add(new ListOfActionsItem("edit", "#", "bt-edit", false));
-
items.add(new ListOfActionsItem("view", "#", "bt-view", false));
-
items.add(new ListOfActionsItem("email", "#", "bt-email", false));
-
return items;
-
}
-
}