Wednesday, 19 August 2015

Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Effects built in to jQuery

In my previous blog post, Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages, I showed how PNotify can be used in XPages.
In this blog post I will show how some jQuery effects can be used in PNotify. This involves the Fade, Slide and Show effect. In the example below, I use a button to trigger the PNotify notice.

Effects built in to jQuery

Setup Fade Effect in XPages
$(function(){
new PNotify({
title: 'Fade Effect',
text: 'Effects built in to jQuery - Fade Effect.',
animation: 'fade'
});
});

Setup Show Effect in XPages
$(function(){
new PNotify({
title: 'Show Effect',
text: 'Effects built in to jQuery - Show Effect.',
animation: 'show'
})
});

Setup Slide Effect in XPages
$(function(){
new PNotify({
title: 'Slide Effect',
text: 'Effects built in to jQuery - Slide Effect.',
animation: 'slide'
})
});

Setup two different effects together in XPages
$(function(){
new PNotify({
title: 'Show and Slide Effect',
text: 'I use a different effect.',
animation: {
effect_in: 'show',
effect_out: 'slide'
}
})
});

Remark: You need to use CSJS (Client-Side JavaScript) in this case to make it work.

The final result in XPages


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="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div>
<xp:button id="button1" value="Fade Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Fade Effect',
text: 'Effects built in to jQuery - Fade Effect.',
animation: 'fade'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button id="button2" value="Show Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Show Effect',
text: 'Effects built in to jQuery - Show Effect.',
animation: 'show'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button id="button3" value="Slide Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Slide Effect',
text: 'Effects built in to jQuery - Slide Effect.',
animation: 'slide'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<xp:button id="button4" value="Show and Slide Effect'">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Show and Slide Effect',
text: 'I use a different effect.',
animation: {
effect_in: 'show',
effect_out: 'slide'
}
})
});]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

No comments:

Post a Comment