Wednesday, 8 July 2015

Amazing Bootstrap Buttons Effects in XPages Part II - Using Rippler

In my previous post I showed how a 3D effect can be added to a Bootstrap button, Amazing Bootstrap 3D Buttons Effects in XPages. In this blog post I show how you can use Rippler to create a nice button effect. Rippler is an effect that spreads like a wave in touch or click.
In order to use Rippler, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Rippler.


Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder rippler has been added in the WebContent Folder.


Next the JavaScript and CSS files, jquery.rippler.js and rippler.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="rippler/js/jquery.rippler.js"></script>
<link rel="stylesheet" href="rippler/css/rippler.css" type="text/css" />

Call the Rippler Plugin
To initialize the Rippler plugin the following script must be added to the XPage.
<script>
$(document).ready(function() {
$(".rippler").rippler({
effectClass :  'rippler-effect',
effectSize :  16 ,
addElement :  'div',
duration :  400
});
});
</script>

Basic Setup Button in XPages
<xp:button value="Rippler" id="button1" styleClass="btn btn-primary btn-lg rippler rippler-default"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>

The final result looks like this example below.


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">
<script type="text/javascript" src="rippler/js/jquery.rippler.js"></script>
<link rel="stylesheet" href="rippler/css/rippler.css" type="text/css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="container">
<div class="row">
<xp:button value="Default" id="button1" 
styleClass="btn btn-primary btn-lg rippler rippler-default"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>
<xp:button value="Success" id="button2"
styleClass="btn btn-success btn-lg rippler rippler-inverse"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-ok"></span>
</xp:button>        
<xp:button value="Warning" id="button3"
styleClass="btn btn-warning btn-lg rippler rippler-default"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-warning-sign"></span>
</xp:button>
<br></br><br></br>
<xp:button value="Info" id="button4"
styleClass="btn btn-info btn-lg rippler rippler-inverse"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-info-sign"></span>
</xp:button> 
<xp:button value="Danger" id="button5"
styleClass="btn btn-danger btn-lg rippler rippler-inverse"
style="color:rgb(255,255,255)">
<span class="glyphicon glyphicon-ban-circle"></span>
</xp:button> 
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$(document).ready(function() {
$(".rippler").rippler({
effectClass :  'rippler-effect',
effectSize :  16 ,
addElement  :  'div' ,
duration        :  400
});
});
</script>
</xp:view>

For more information and examples: Rippler

No comments:

Post a Comment