Wednesday, 18 October 2017

Using infoBox a Tooltip Style jQuery Plugin in XPages


In my continuous search for modern plugins for my XPages applications I came across infoBox. infoBox is a tooltip style jQuery plugin to create information signs/icons on your XPage which will show information boxes on mouseover. The created information boxes will resemble the conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless a larger width for the box is specified.

Options
width: specify a width for the information Box. The default width will be 200, but the width will be adjusted for 1 or 2 word content
position: specify whether you want to see the information box over the information sign or below. The default position will be below.
bg_color: specify a background color for the information box.
text_color: specify the text color for the text in the information box.

In order to use infoBox, the JavaScript file needs to be included on the XPage / Custom Control. The latest version can be downloaded from from the website AJARUNTHOMAS.COM
Below a basic example using infoBox in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder infobox has been added in the WebContent Folder.
Next the JavaScript infobox.js must be included on the XPage or Custom Control. In this example I added the file to an XPage.

<script type="text/javascript" src="infobox/infobox.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is perfectly aligned and customizable info box on mouseover a with some additional options in the initial setup.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="infobox/infobox.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:information}" ).infoBox();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<p>
For more information check the infobox icon.
<a id="information">
The information displayed when checking the info icon.
</a>
</p>
<xp:br></xp:br>
<p>
More information: check the infobox icon.
<a id="helptext">
Useful information for the user(s) with some additional options.
</a>
</p>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: infoBox

No comments:

Post a Comment