Wednesday, 18 October 2017

Using Bringins in XPages for Animated Info Pages


In my continuous search for modern plugins for my XPages applications I came across Bringins. Bringins is a jQuery plugin to show contents on a webpage as an animated page. These page will be positioned 'fixed' with scrollable data. You can have your custom CSS content to appear in the bringins pages. This plugin allows you to choose from three intoduction animations for the page whether to animate the page on the left, right or center of the webpage. The plugin also provides options to specify the color of the page, width, z-index, margin and color of the close button for the page.

Features
Specify an intoduction animation for the bringins pages
Specify the width of the bringins page
Choose background color for the bringins page
Define margin for the content in the page
Choose a color for the close button of the page
Choose the z-index for the page, so that you can define whether a particular bringins page should always appear above an other bringins page or other elements on that webpage
Define your custom style for the contents which will be included in the plugin element

In order to use Bringins, 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 Bringins 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 bringins has been added in the WebContent Folder.
Next the JavaScript bringins.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="bringins/bringins.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:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive and customizable webpage as an animated (info)page 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="bringins/bringins.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="More information" id="button1"></xp:button>
<div id="page1" class="bringins-content">
<h2>jQuery</h2>
<h4>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
<br></br><br></br>
jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.</h4>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bringins 

No comments:

Post a Comment