Site Utilities
Actions dropdown 
- Class name:
- Version: 1.0
-
jQuery Interactive feature
-
Tapestry Integration
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
-
<div class="k-actions-dropdown" role="listbox">
-
<button aria-haspopup="true">Actions</button>
-
<div class="content">
-
<p>Cardholder</p>
-
<ul>
-
<li role="option"><a href="#">Option 1</a></li>
-
<li role="option"><a href="#">Option 2</a></li>
-
<li role="option"><a href="#">Option 3</a></li>
-
</ul>
-
<p>Card Account</p>
-
<ul>
-
<li role="option"><a href="#">Option 1</a></li>
-
<li role="option"><a href="#">Option 2</a></li>
-
<li role="option"><a href="#">Option 3</a></li>
-
</ul>
-
<p>Plastic</p>
-
<ul>
-
<li role="option"><a href="#">Option 1</a></li>
-
<li role="option"><a href="#">Option 2</a></li>
-
<li role="option"><a href="#">Option 3</a></li>
-
</ul>
-
</div>
-
</div>
CSS Code
-
/* Width of k-actions-dropdown must be locally defined */
-
.k-actions-dropdown {position: relative; width: 10em;}
-
.k-actions-dropdown button {
-
position: relative;
-
color: #FFF;
-
background: #000;
-
padding-right: 25px;
-
border: none;
-
cursor: pointer;
-
}
-
.k-actions-dropdown button:after {
-
position: absolute;
-
top: 0;
-
right: 0;
-
width: 20px;
-
content: "\25BC";
-
color: #FFF;
-
background: #000;
-
z-index: 50;
-
}
-
.k-actions-dropdown div.content {
-
top: 1.5em;
-
left: 0;
-
width: 100%;
-
color: #000;
-
background: #FFF;
-
padding: 0;
-
border: 1px solid #000;
-
z-index: 50;
-
}
-
.k-actions-dropdown li { }
-
.k-actions-dropdown p {
-
color: #FFF;
-
background: #808080;
-
padding: 0.2em 0 0.2em 0.8em;
-
}
-
.k-actions-dropdown ul {padding: 0;}
-
.k-actions-dropdown li {
-
list-style-type: none;
-
margin: 0.2em 0;
-
border-bottom: 1px dashed #000;
-
}
-
.k-actions-dropdown a, .k-actions-dropdown a:link, .k-actions-dropdown a:visited {
-
display: block;
-
text-decoration: none;
-
padding: 0.2em 0 0.2em 0.8em;
-
}
-
.k-actions-dropdown a:hover, .k-actions-dropdown a:focus {
-
background: #DFEFF6;
-
}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if($.fn.actionsDd) {
-
$('.k-actions-dropdown').actionsDd();
-
}
-
});
-
})(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.
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
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
-
xmlns:p="tapestry:parameter">
-
<body>
-
<t:kawwa2.actionsDropDown t:items="items">
-
<p:CardHolder_Option1>
-
Test
-
</p:CardHolder_Option1>
-
</t:kawwa2.actionsDropDown>
-
</body>
-
</html>
Java Implementation
-
package net.atos.kawwaportal.components.test.pages;
-
import java.util.*;
-
import net.atos.kawwaportal.components.KawwaEventsConstants;
-
import net.atos.kawwaportal.components.data.ActionsDropDownItem;
-
import org.apache.tapestry5.annotations.OnEvent;
-
public class ActionsDropDown {
-
public List<ActionsDropDownItem> getItems(){
-
List<ActionsDropDownItem> item = new ArrayList<ActionsDropDownItem>();
-
item.add(new ActionsDropDownItem("Option1", "CardHolder"));
-
item.add(new ActionsDropDownItem("Option2", "CardHolder"));
-
item.add(new ActionsDropDownItem("Option3", "CardHolder"));
-
item.add(new ActionsDropDownItem("Option1", "Card Account"));
-
item.add(new ActionsDropDownItem("Option2", "Card Account"));
-
item.add(new ActionsDropDownItem("Option3", "Card Account"));
-
item.add(new ActionsDropDownItem("Option1", "Plastic"));
-
item.add(new ActionsDropDownItem("Option2", "Plastic"));
-
item.add(new ActionsDropDownItem("Option3", "Plastic"));
-
return item;
-
}
-
@OnEvent(value = KawwaEventsConstants.ACTIONSDROPDOWN_SELECT)
-
public void getEvent(String parent, String child){
-
System.out.println(parent + " " + child);
-
}
-
}