[ KAWWA PORTAL ] Components : Actions dropdown

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.

Demo
Snippets
Tapestry Integration

HTML5 Plain Code

COPY

<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>
```

How to apply

COPY

```
(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.

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

<!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

COPY

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);

```
    }
```
```
}
```

Top

KAWWA Markup Pattern Library

Site Utilities

Actions dropdown

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce