About Enter something
Here goes a detailed explanation of the field...
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.
<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>
<!-- MODAL / place in the end file -->
<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>
.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;}
(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.
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:
There are a few components you can use to create a dialog in your pages.
NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.
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. |
Name | Required | Java Type | Default Prefix | Default Value | Description |
---|---|---|---|---|---|
dialog | true | String | literal | The id of the dialog to open. |
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. |
<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>