Using Bootstrap Touchspin a Mobile and Touch Friendly Input Spinner Component for Bootstrap...

Datetime:2016-08-22 22:20:26          Topic: Bootstrap           Share

After some time a new blog post on Bootstrap Plugins in XPages. In this blog post I will show how to use Bootstrap Touchspin, a mobile and touch friendly input spinner component for Bootstrap 3, in XPages. Bootstrap Touchspin supports the mousewheel and the up/down keys. A nice addition to any XPages Application. Bootstrap Touchspin is very easy to implement using the jQuery Selector for XPages. Bootsrap Touchspin can be downloaded on GitHub . Below a description of the setup in XPages of the Bootstrap Touchspin Plugin.

1. 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 'touchspin' has been added in the WebContent Folder.

Next the JavaScript and CSS files, jquery.bootstrap-touchspin.js and jquery.bootstrap-touchspin.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage. There is no AMD Fix necessary for this Bootstrap Plugin.

<script type="text/javascript" src="touchspin/jquery.bootstrap-touchspin.js"></script>

<link rel="stylesheet" href="touchspin/jquery.bootstrap-touchspin.css" type="text/css" />

2. Adding the x$ jQuery selector for XPages

Furthermore for this Bootstrap Plugin to work in XPages I use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages , to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.

<xp:this.resources>

<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Edit Box. In the example below I use some setting for the Bootstrap Plugin.

<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:inputText1}" ).TouchSpin({

min: 0,

max: 100,

step: 0.1,

decimals: 2,

boostat: 5,

maxboostedstep: 10,

postfix: '%'

});

});

]]></xp:this.value>

</xp:scriptBlock>

3. Setup Edit Box

The data-api will automatically theme the Edit Box with the class 'TouchSpin'. In this example I add an attribute 'value''to the Edit Box. It is also possible to use the attribute 'initval' which is applied when no explicit value is set on the input with the 'value' attribute. An empty string as ínitval' means that the value remains empty on initialization of the Plugin.

<xp:inputText id="inputText1">

<xp:this.attrs>

<xp:attr name="value" value="55"></xp:attr>

</xp:this.attrs>

</xp:inputText>

Final result is a nice responsive touch friendly input spinner component for Bootstrap 3.

Sample 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="/JQueryXSnippet.js" clientSide="true"></xp:script>

</xp:this.resources>

<script type="text/javascript" src="touchspin/jquery.bootstrap-touchspin.js"></script>

<link rel="stylesheet" href="touchspin/jquery.bootstrap-touchspin.css" type="text/css" />

<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:inputText1}" ).TouchSpin({

min: 0,

max: 100,

step: 0.1,

decimals: 2,

boostat: 5,

maxboostedstep: 10,

postfix: '%'

});

});

]]></xp:this.value>

</xp:scriptBlock>

<xp:scriptBlock id="scriptBlock2">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:inputText2}" ).TouchSpin({

min: -1000000000,

max: 1000000000,

stepinterval: 50,

maxboostedstep: 10000000,

prefix: '$'

});

});

]]></xp:this.value>

</xp:scriptBlock>

<xc:ccLayoutBootstrap>

<xp:this.facets>

<xp:panel xp:key="facetMiddle">

<xp:br></xp:br>

<div class="page-header">

<h2>Bootstrap Touchspin</h2>

<h4>A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.</h4>

</div>

<xp:br></xp:br>

<xp:inputText id="inputText1">

<xp:this.attrs>

<xp:attr name="value" value="55"></xp:attr>

</xp:this.attrs>

</xp:inputText>

<xp:br></xp:br>

<xp:inputText id="inputText2">

<xp:this.attrs>

<xp:attr name="value" value="50"></xp:attr>

</xp:this.attrs></xp:inputText>

<xp:br></xp:br>

</xp:panel>

</xp:this.facets>

</xc:ccLayoutBootstrap>

</xp:view>

For more information about the available Bootstrap Touchspin Settings and Events you can visit the Bootstrap Touchspin  website .





About List