Plug-Ins - Expert Oracle Application Express - page 449

(function($){
$.widget("ui.lengthLimit", {
options: {
warningColor: "yellow",
errorColor: "red",
maxLength: 50
}
});
})(apex.jQuery);
Next we'll add a function named create which will be invoked automatically when the widget is first
instantiated.
(function($){
$.widget("ui.lengthLimit", {
options: {
warningColor: "orange",
errorColor: "red",
maxLength: 50
},
create: function() {
var uiw = this;
this.element.change(function() {
var $textElmt = $(this);
var currLength = $textElmt.val().length;
var currPercent = currLength/uiw.options.maxLength;
if (currPercent >= .9) {
$textElmt
.val($textElmt.val().substr(0, uiw.options.maxLength))
.css('color', uiw.options.errorColor);
} else if (currPercent >= .8) {
$textElmt.css('color', uiw.options.warningColor);
} else {
$textElmt.css('color', 'black');
}
});
}
});
})(apex.jQuery);
At this point we have a fully functioning widget. We could add this code to the Function and Global
Variable Declaration section of an APEX page and then instantiate the widget on a page item by adding
the following code to the Execute when Page Loads section. Notice that default option values can be
overridden during instantiation.
$('#P1 FIRST NAME').lengthLimit({
maxLength: 10
});