KAWWA Markup Pattern Library


Forms

Input Help Component Information

  • Class name: (k-field-help)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry 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.

[ Help ]

Here goes a detailed explanation of the field...

HTML5 Plain Code

COPY
  1. <p><label for="field1">Enter something:</label>
  2. 	<input type="text" id="field1" name="field1" />
  3. 	<a href="#field-info-example" class="k-field-help" title="About the field Enter something">
  4. 		<img src="../img/k-theme0/pic_help.png" alt="[ Help ]" /></a></p>
  5. 
                                
  6. <!-- MODAL / place in the end file -->
  7. <div id="field-info-example" class="k-modal">
  8. 	<h3 class="modal-header">About Enter something</h3>
  9. 	<div class="content">
  10. 		<p>Here goes a detailed explanation of the field...</p>
  11. 	</div>
  12. </div>

CSS Code

COPY
  1. .k-field-help {
  2.     display: inline-block;
  3.     width: 18px;
  4.     height: 18px;
  5.     margin: 0 0.5em;
  6.     vertical-align: -3px;
  7. }
  8. 	label + .k-field-help {padding-left: 0; margin-left: -12px;}
  9. 
                                

How to apply

COPY
  1. (function($){
  2.     'use strict';
  3. 
                                
  4.     function fieldHelp(window, trigger) {
  5.         $(window).dialog({
  6.             minHeight: 350,
  7.             minWidth: 270,
  8.             close: function(e){
  9.                 $(trigger).prev('input').focus();
  10.             },
  11.             autoOpen: false
  12.         });
  13. 
                                
  14. 
                                
  15.         $(trigger).click(function(){
  16.             $(window).dialog('open');
  17.             return false;
  18.         });
  19.     }
  20. 
                                
  21.     $(document).ready(function(){
  22.         if ($.ui && $.ui.dialog) {
  23.             var theValue = '';
  24.             $('a.k-field-help').each(function(){
  25.                 theValue = $(this).attr('href');
  26.                 fieldHelp(theValue, '.k-field-help');
  27.             });
  28.         }
  29.     });
  30. })(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
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3.  	
  4.  	
  5.  	<t:jquery.dialog t:clientId="myDialog" class="k-modal">
  6. 	<h3 class="modal-header">Dialog test!</h3>
  7. 		Modal Window		
  8. 	</t:jquery.dialog>
  9. 				
  10. 	<p>
  11. 		<label t:type="label" t:for="field1">Enter Something</label>
  12. 		<input t:type="textField" t:id="field1" />
  13. 		<t:jquery.dialoglink t:dialog="myDialog" class="k-field-help"
  14. 			title="About the Field Enter something">
  15. 			
  16. 			<img src="${asset:classpath:net/atos/kawwaportal/components/theme/img/k-theme1/pic_help.png}" 
  17. 			alt="[ Help ]"/>
  18. 			
  19. 		</t:jquery.dialoglink>
  20. 	</p>
  21. 	
  22. </html>

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