KAWWA Markup Pattern Library


Site Utilities

Actions dropdown Component Information

  • Class name:
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

This component allows you to create a simple list of actions - or links - which will be presented in a dropdown menu triggered by a button.

It may appear outside a form.

HTML5 Plain Code

COPY
  1. <div class="k-actions-dropdown" role="listbox">
  2. 	<button aria-haspopup="true">Actions</button>
  3. 	<div class="content">
  4. 		<p>Cardholder</p>
  5. 		<ul>
  6. 			<li role="option"><a href="#">Option 1</a></li>
  7. 			<li role="option"><a href="#">Option 2</a></li>
  8. 			<li role="option"><a href="#">Option 3</a></li>
  9. 		</ul>
  10. 		<p>Card Account</p>
  11. 		<ul>
  12. 			<li role="option"><a href="#">Option 1</a></li>
  13. 			<li role="option"><a href="#">Option 2</a></li>
  14. 			<li role="option"><a href="#">Option 3</a></li>
  15. 		</ul>
  16. 		<p>Plastic</p>
  17. 		<ul>
  18. 			<li role="option"><a href="#">Option 1</a></li>
  19. 			<li role="option"><a href="#">Option 2</a></li>
  20. 			<li role="option"><a href="#">Option 3</a></li>
  21. 		</ul>
  22. 	</div>
  23. </div>

CSS Code

COPY
  1. /* Width of k-actions-dropdown must be locally defined */
  2. .k-actions-dropdown {position: relative; width: 10em;}
  3. 
                                
  4. 
                                
  5. 	.k-actions-dropdown button {
  6. 		position: relative;
  7. 		color: #FFF;
  8. 		background: #000;
  9. 		padding-right: 25px;
  10. 		border: none;
  11. 		cursor: pointer;
  12. 	}
  13. 	.k-actions-dropdown button:after {
  14. 		position: absolute;
  15. 		top: 0;
  16. 		right: 0;
  17. 		width: 20px;
  18. 		content: "\25BC";
  19. 		color: #FFF;
  20. 		background: #000;
  21. 		z-index: 50;
  22. 	}
  23. 
                                
  24. 	.k-actions-dropdown div.content {
  25. 		top: 1.5em;
  26. 		left: 0;
  27. 		width: 100%;
  28. 		color: #000;
  29. 		background: #FFF;
  30. 		padding: 0;
  31. 		border: 1px solid #000;
  32. 		z-index: 50;
  33. 	}
  34. 
                                
  35. 	.k-actions-dropdown li { }
  36. 	.k-actions-dropdown p {
  37. 		color: #FFF;
  38. 		background: #808080;
  39. 		padding: 0.2em 0 0.2em 0.8em;
  40. 	}
  41. 
                                
  42. 	.k-actions-dropdown ul {padding: 0;}
  43. 
                                
  44. 	.k-actions-dropdown li {
  45. 		list-style-type: none;
  46. 		margin: 0.2em 0;
  47. 		border-bottom: 1px dashed #000;
  48. 	}
  49. 
                                
  50. 	.k-actions-dropdown a, .k-actions-dropdown a:link, .k-actions-dropdown a:visited {
  51. 		display: block;
  52. 		text-decoration: none;
  53. 		padding: 0.2em 0 0.2em 0.8em;
  54. 	}
  55. 	.k-actions-dropdown a:hover, .k-actions-dropdown a:focus {
  56. 		background: #DFEFF6;
  57. 	}
  58. 
                                
  59. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 
                                
  6. 		if($.fn.actionsDd) {
  7. 
                                
  8. 			$('.k-actions-dropdown').actionsDd();
  9. 		}
  10. 	});
  11. })(jQuery);

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

The Actions dropDown component is an easy way to create a drop down list of actions. You just need to give a list of ActionsDropDownItem objects to this component.

By default, an eventLink will be displayed, triggering a KawwaEventsConstants.ACTIONSDROPDOWN_SELECT event. You can catch this event, and the corresponding method will have one or two parameters : the category (if setted) and the selected item (formatted in a camel-case way).

You can override the rendering of each item, by defining a block parameter. The name of block should follow this rule : (category formatted in a camel-case way)_(item formatted in a camel-case way) or (item formatted in a camel-case way) if the category is null.

Actions dropdown parameters
Name Required Java Type Default Prefix Default Value Description
title false String literal Actions The title of your dropdown menu
items true List<ActionsDropDownItem> prop The List of items your dropdown menu should display.

The Template

COPY
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
  4.       xmlns:p="tapestry:parameter">
  5. <body>
  6. 
                                
  7. <t:kawwa2.actionsDropDown t:items="items">
  8.     <p:CardHolder_Option1>
  9.         Test
  10.     </p:CardHolder_Option1>
  11. </t:kawwa2.actionsDropDown>
  12. </body>
  13. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import java.util.*;
  4. 
                                
  5. import net.atos.kawwaportal.components.KawwaEventsConstants;
  6. 
                                
  7. import net.atos.kawwaportal.components.data.ActionsDropDownItem;
  8. import org.apache.tapestry5.annotations.OnEvent;
  9. 
                                
  10. public class ActionsDropDown {
  11.     public List<ActionsDropDownItem> getItems(){
  12.         List<ActionsDropDownItem> item = new ArrayList<ActionsDropDownItem>();
  13.         item.add(new ActionsDropDownItem("Option1", "CardHolder"));
  14.         item.add(new ActionsDropDownItem("Option2", "CardHolder"));
  15.         item.add(new ActionsDropDownItem("Option3", "CardHolder"));
  16. 
                                
  17.         item.add(new ActionsDropDownItem("Option1", "Card Account"));
  18.         item.add(new ActionsDropDownItem("Option2", "Card Account"));
  19.         item.add(new ActionsDropDownItem("Option3", "Card Account"));
  20. 
                                
  21.         item.add(new ActionsDropDownItem("Option1", "Plastic"));
  22.         item.add(new ActionsDropDownItem("Option2", "Plastic"));
  23.         item.add(new ActionsDropDownItem("Option3", "Plastic"));
  24.         return item;
  25.     }
  26. 
                                
  27. 
                                
  28.     @OnEvent(value = KawwaEventsConstants.ACTIONSDROPDOWN_SELECT)
  29.     public void getEvent(String parent, String child){
  30.         System.out.println(parent + " "  + child);
  31.     }
  32. }

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