Wednesday, 4 November 2015

Bootstrap in XPages: Using the Bootstrap Popover Extended Plugin in XPages (2) - Using Popover Color Styles

In my previous blog post on SocialBizUG, Using the Bootstrap Popover Extended Plugin in XPages (1) - Introduction and Setup Using Data Attributes, I showed the basic setup and usage of the Bootstrap Popover Extended Plugin in XPages. In this blog post I will show how to use PopoverX Color Styles whereby the popover arrow matches the heading color style.

Setup Color Styles
The Color Style setup is quite simple. For the button(s) the familiar styleClasses can be applied such as btn-success or btn-info.
For the Popover Extended class the same class must be applied, class="popover popover-success".

<xp:button id="button1" styleClass="btn btn-success btn-lg" value="Popover Extended">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover-x"></xp:attr>
<xp:attr name="data-target" value="#demo"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
</xp:button>
<div id="demo" class="popover popover-success">
<div class="arrow"></div>
<div class="popover-title"><span class="close pull-right" data-dismiss="popover-x"></span>Popover Extended</div>
<div class="popover-content">
<p>Extend the Bootstrap Popover.js plugin with Color Style Success.</p>
</div>
</div>

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="bootstrappopoverx/js/bootstrap-popover-x.js"></script>
<link rel="stylesheet" href="bootstrappopoverx/css/bootstrap-popover-x.css" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:button id="button1" styleClass="btn btn-success btn-lg" value="Popover Extended">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover-x"></xp:attr>
<xp:attr name="data-target" value="#demo"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
</xp:button>
<div id="demo" class="popover popover-success">
<div class="arrow"></div>
<div class="popover-title"><span class="close pull-right" data-dismiss="popover-x"></span>Popover Extended</div>
<div class="popover-content">
<p>Extend the Bootstrap Popover.js plugin with Color Style Success.</p>
</div>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:button id="button2" styleClass="btn btn-info btn-lg"value="Popover Extended">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover-x"></xp:attr>
<xp:attr name="data-target" value="#demo1"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
</xp:button>
<div id="demo1" class="popover popover-info">
<div class="arrow"></div>
<div class="popover-title"><span class="close pull-right" data-dismiss="popover-x"></span>Popover Extended</div>
<div class="popover-content">
<p>Extend the Bootstrap Popover.js plugin with Color Style Info.</p>
</div>
</div>
<xp:br></xp:br>
<xp:button id="button3" styleClass="btn btn-danger btn-lg" value="Popover Extended">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover-x"></xp:attr>
<xp:attr name="data-target" value="#demo2"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
</xp:button>
<div id="demo2" class="popover popover-danger">
<div class="arrow"></div>
<div class="popover-title"><span class="close pull-right" data-dismiss="popover-x"></span>Popover Extended</div>
<div class="popover-content">
<p>Extend the Bootstrap Popover.js plugin with Color Style Danger.</p>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

No comments:

Post a Comment