[ KAWWA PORTAL ] Components : Input Help

Forms

Input Help

Class name: (k-field-help)
Version: 1.1
jQuery Interactive feature
Tapestry Integration

Add to list

Use this component to give the user a more detailed explaination about an input field. Text opens in a modal window.

NOTE: To design the modal window you must copy the CSS declarations for the modal component.

Demo
Snippets
Tapestry Integration

Enter something:

HTML5 Plain Code

COPY

<p><label for="field1">Enter something:</label>

	<input type="text" id="field1" name="field1" />

	<a href="#field-info-example" class="k-field-help" title="About the field Enter something">

		<img src="../img/k-theme0/pic_help.png" alt="[ Help ]" /></a></p>

```

```

<div id="field-info-example" class="k-modal">

	<h3 class="modal-header">About Enter something</h3>

```
	<div class="content">
```

		<p>Here goes a detailed explanation of the field...</p>

```
	</div>
```
```
</div>
```

CSS Code

COPY

```
.k-field-help {
```
```
    display: inline-block;
```
```
    width: 18px;
```
```
    height: 18px;
```
```
    margin: 0 0.5em;
```
```
    vertical-align: -3px;
```
```
}
```

	label + .k-field-help {padding-left: 0; margin-left: -12px;}

How to apply

COPY

```
(function($){
```
```
    'use strict';
```

    function fieldHelp(window, trigger) {

```
        $(window).dialog({
```
```
            minHeight: 350,
```
```
            minWidth: 270,
```
```
            close: function(e){
```

                $(trigger).prev('input').focus();

```
            },
```
```
            autoOpen: false
```
```
        });
```
```
        $(trigger).click(function(){
```
```
            $(window).dialog('open');
```
```
            return false;
```
```
        });
```
```
    }
```
```
    $(document).ready(function(){
```
```
        if ($.ui && $.ui.dialog) {
```
```
            var theValue = '';
```

            $('a.k-field-help').each(function(){

                theValue = $(this).attr('href');

                fieldHelp(theValue, '.k-field-help');

```
            });
```
```
        }
```
```
    });
```
```
})(jQuery);
```

For more information about how to apply this plug-in, its options, events and methods, see the jQuery Dialog page.

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

There are a few components you can use to create a dialog in your pages.

Dialog, this is the base of your Dialog, just put the content of your dialog inside.
DialogLink, clicking a DialogLink will make the associated Dialog to open.
DialogAjaxLink, clicking a DialogAjaxLink will open the associated Dialog and refresh the zone you've set inside the Dalog.

NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.

Dialog parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
params	false	JSONObject	prop		The Dialog parameters (please refer to jquery-ui documentation).
initMethod	false	String	prop		The Tapestry.Initializer method to call to initialize the dialog.

Dialoglink parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
dialog	true	String	literal		The id of the dialog to open.

DialogAjaxLink parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
zone	true	String	literal		The id of the zone to refresh.
context	false	Object[]	prop		The activation context.

The Template

COPY

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```
```
 	
```
```
 	
```

 	<t:jquery.dialog t:clientId="myDialog" class="k-modal">

	<h3 class="modal-header">Dialog test!</h3>

```
		Modal Window		
```
```
	</t:jquery.dialog>
```
```
				
```
```
	<p>
```

		<label t:type="label" t:for="field1">Enter Something</label>

		<input t:type="textField" t:id="field1" />

		<t:jquery.dialoglink t:dialog="myDialog" class="k-field-help"

			title="About the Field Enter something">

```
			
```

			<img src="${asset:classpath:net/atos/kawwaportal/components/theme/img/k-theme1/pic_help.png}"

```
			alt="[ Help ]"/>
```
```
			
```
```
		</t:jquery.dialoglink>
```
```
	</p>
```
```
	
```
```
</html>
```

Top

KAWWA Markup Pattern Library

Forms

Input Help

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce