Liferay AUI Char Counter is one of java script utility or
module from AUI Java script.
Some time we may need to count characters and we need to
make alert some message when user enters more characters.
Generally we use this character count for SMS message or
some other limited text input required then we can use AUI Character Count.
Required AUI module is aui-char-counter
and it’s already available in Liferay portal so we simply load whenever we
needed. We use AUI use java script function to load the modules.
Sample Code Snippet
|
<aui:input name="textMessage"
id="textMessage" label="Text Message" type="textarea"></aui:input>
<span style=" float: left;">Characters Left </span><p id="<portlet:namespace/>textCounter"></p>
<aui:script>
AUI().use('aui-char-counter', function(A) {
new A.CharCounter({
counter : '#<portlet:namespace/>textCounter',
input : '#<portlet:namespace/>textMessage',
maxLength : 140,
on : {
maxLength : function(event) {
alert('The max length limit was reached');
}
}
});
});
</aui:script>
|
Portlet Screen
Download Liferay AUI Char Counter Portlet
Complete Code
Example
Portlet view page
|
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<style>
.aui .control-group {
margin-bottom: 0px;
}
</style>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<portlet:actionURL var="sendActionURL" windowState="normal" name="getInputData">
</portlet:actionURL>
<h2>Liferay AUI Char Counter Example</h2>
<aui:form action="<%=sendActionURL%>" method="post"
name="smsForm">
<aui:input name="textMessage" id="textMessage" label="Text Message" type="textarea">
<aui:validator
name="required" />
</aui:input>
<span style=" float: left;">Characters Left </span><p id="<portlet:namespace/>textCounter"></p>
<aui:button type="submit" value="Submit"></aui:button>
</aui:form>
<aui:script>
AUI().use('aui-char-counter', function(A) {
new A.CharCounter({
counter : '#<portlet:namespace/>textCounter',
input : '#<portlet:namespace/>textMessage',
maxLength : 140,
on : {
maxLength : function(event) {
alert('The max length limit was reached');
}
}
});
});
</aui:script>
|
Reference Links
Posts
0 comments :
Post a Comment