Description & Source Code

ZK has a strong interoperability with JavaScript plugins, through jQuery, or through native JavaScript integration.
In this demo, the ZK components are decorated with the cleave.js plugin to demonstrate how a ZK UI can be easily modified using 3rd party plugins.

Other form decoration plugins can be used using similar integration methods.

<zk xmlns:w="client">
	<style src="/widgets/effects/form_effect/styles.css"/>

	<!-- Load the script -->
	<script type="text/javascript" src="/widgets/effects/form_effect/cleave.min.js" />
	<script type="text/javascript" src="/widgets/effects/form_effect/" />

	<div width="500px" class="form">
		<vlayout spacing="7px">
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Phone :" />
				<textbox id="phone" width='150px' placeholder="999 999 9999"  w:onBind="new Cleave(this.$n(), {phone: true, phoneRegionCode:'US'});"/>
				<label value="Mask : US Phone number" />
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Birthday :" />
				<textbox id="date" width='150px' placeholder="01-01-2222"  w:onBind="new Cleave(this.$n(), { date: true, delimiter: '-', datePattern: ['d', 'm', 'Y'] });"/>
				<label value="Mask : dd-mm-YYYY " />
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Time:" />
				<textbox id="country" width='150px' placeholder="12:00:00"  w:onBind="new Cleave(this.$n(), { time: true, timePattern: ['h', 'm', 's'] });"/>
				<label value='Mask : hh:mm:ss' />
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Credit Card:" />
				<textbox id="cc" width='150px' placeholder="4444 5555 6666 7777" w:onBind="new Cleave(this.$n(), {  creditCard: true, onCreditCardTypeChanged: function(type) { type = type.split('15')[0]; zk.$('$cardType').setValue(type)}});"/>
					<label value='Mask : credit card' />
						<label value='Card type: ' />
						<label id="cardType" value='unknown' />