KAWWA Markup Pattern Library


Site Utilities

Action Buttons Component Information

  • Class name: (k-actions)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

Action buttons may be used for all kind of actions that happen outside a form.

Here below we present some optional buttons with icons, but you may create action buttons with only text by not specifying a class for the button.

For a series of actions, you may want to put the list of buttons inside an "action buttons bar" component.

HTML5 Plain Code

COPY
  1. <ul class="k-actions">
  2. 	<li><a href="#" role="button">empty</a></li>
  3. 	<li><a href="#" class="bt-print" role="button">print</a></li>
  4. 	<li><a href="#" class="bt-download" role="button">download</a></li>
  5. 	<li><a href="#" class="bt-edit" role="button">edit</a></li>
  6. 	<li><a href="#" class="bt-view" role="button">view</a></li>
  7. 	<li><a href="#" class="bt-email" role="button">email</a></li>
  8. </ul>

CSS Code

COPY
  1. ul.k-actions {text-align: right; padding: 0; margin-bottom: 2em;}
  2. 
                                
  3. 	ul.k-actions li {
  4. 		display: inline;
  5. 		list-style-type: none;
  6. 		font: 0.9em open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  7. 		text-transform: uppercase;
  8. 	}
  9. 
                                
  10. 	ul.k-actions a, ul.k-actions a:link, ul.k-actions a:visited {
  11. 		overflow: hidden;
  12. 		display: inline-block;
  13. 		height: 2em;
  14. 		line-height: 2em;
  15. 		text-decoration: none;
  16. 		color: #000;
  17. 		background: #ECECEC url(../img/k-theme0/sprites-trans.png) no-repeat 4px 30px;
  18. 		margin: 0.5em;
  19. 		padding: 0 10px;
  20. 		border: 1px solid #CCC;
  21. 		border-radius: 3px;
  22. 		box-shadow: 0 1px 1px rgba(0,0,0,.5);
  23. 	}
  24. 	/*hover*/
  25. 	ul.k-actions a:hover, ul.k-actions a:focus {
  26. 		color: #000;
  27. 		background-color: #FFF;
  28. 	}
  29. 
                                
  30. 	/* active */
  31. 	ul.k-actions strong {
  32. 		display: inline-block;
  33. 		height: 2em;
  34. 		line-height: 2em;
  35. 		text-decoration: none;
  36. 		color: #000;
  37. 		background: #FFF url(../img/k-theme0/sprites-trans.png) no-repeat 4px 30px;
  38. 		margin: 0.5em;
  39. 		padding: 0 10px;
  40. 		border: 1px #000 solid;
  41. 	}
  42. 
                                
  43. 
                                
  44. 	/* Icons sprite */
  45. 	ul.k-actions a.bt-print {background-position: 6px -741px; padding-left: 35px;}
  46. 	ul.k-actions a.bt-download {background-position: 6px -619px; padding-left: 35px;}
  47. 	ul.k-actions a.bt-edit {background-position: 6px -378px; padding-left: 35px;}
  48. 	ul.k-actions a.bt-view {background-position: 6px -510px; padding-left: 35px;}
  49. 	ul.k-actions a.bt-email {background-position: 6px 5px; padding-left: 35px;}
  50. 	ul.k-actions a.bt-search {background-position: 6px -79px; padding-left: 35px;}
  51. 	ul.k-actions a.bt-new {background-position: 6px -277px; padding-left: 35px;}
  52. 	ul.k-actions a.bt-del {background-position: 6px -175px; padding-left: 35px;}
  53. 
                                
  54. 	/* Exceptions */
  55. 	#sidebar ul.k-actions {text-align: center; margin-bottom: 1em;}
  56. 
                                
  57. 
                                

How to apply

COPY
  1. (function($){
  2.     'use strict';
  3.     $(document).ready(function(){
  4.         $('a.bt-print').click(function(){
  5.             window.print();
  6.             return false;
  7.         });
  8.     });
  9. })(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>

ProductGallery parameters
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

COPY
  1. <t:kawwa2.listOfActions t:items="items" withBar="false" onlyIcon="false"/>

Java Implementation

COPY
  1. import java.util.ArrayList;
  2. import java.util.List;
  3. 
                                
  4. import net.atos.kawwaportal.components.data.ListOfActionsItem;
  5. 
                                
  6. public class ListOfActions {
  7. 	
  8. 	public List<ListOfActionsItem> getItems(){
  9. 		List<ListOfActionsItem> items = new ArrayList<ListOfActionsItem>();
  10. 		
  11. 		items.add(new ListOfActionsItem("print", "#", "bt-print", false));
  12. 		items.add(new ListOfActionsItem("download", "#", "bt-download", false));
  13. 		items.add(new ListOfActionsItem("edit", "#", "bt-edit", false));
  14. 		items.add(new ListOfActionsItem("view", "#", "bt-view", false));
  15. 		items.add(new ListOfActionsItem("email", "#", "bt-email", false));
  16. 		return items;
  17. 	}
  18. }
  19. 
                                
  20. 
                                

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce