I am writing a object-oriented jquery plugin. I have a class and I am accessing this class creating an object in the plugin. I would like to access this object without using data of element, because I need to learn “size” option of the element which is specified while calling the plugin.
Some people hold their object on element data like this:
element.data(‘myplugin’, myplugin);
And access this object like this:
$(element).data(‘myplugin’).get_size();
However I would like to use something like this:
$(element).get_myplugin_obj().get_size();
Is it possible to do this? I couldn’t find any example doing this.
Lets say the following code is my plugin. This plugin is called for some input areas. When user writes a letter to an input area, the plugin makes “font-size” of text “hello” bigger. Therefore “hello” message is being bigger and bigger. Another function in giveerror.js looks for the first given size and calculates max size. So this plugin needs to access the given “size” option of each element by using its object of MyPluginClass.
myplugin.js:
(function($) {
var MyPluginClass = function(element, customOptions)
{
var elem = $(element);
var obj = this;
var options = $.extend({
size: 1
}, customOptions || {});
/** public method **/
this.addMyPlugin = function() {
elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>');
calculate(elem);
elem.change(function() {
calculate(this);
});
elem.keyup(function(){
calculate(this);
});
};
/** private method */
var calculate = function(obj){
var length = $(obj).val().length;
var newsize = options.size + length;
$(obj).nextAll('.hello:first').css('font-size',newsize);
return;
};
/** public method to get max size value **/
this.get_size = function() {
return options.size;
};
/** public method to get object of this class for specific element **/
this.get_myplugin_obj = function() {
return obj;
};
};
$.fn.myPlugin = function(customOptions)
{
return this.each(function()
{
var element = $(this);
/** create an object for MyPluginClass **/
var MyPluginClassObj = new MyPluginClass(this, customOptions);
MyPluginClassObj.addMyPlugin();
});
};
})(jQuery);
giveerror.js:
function validate_hello_size_func (element, error_message)
{
var first_given_size = $(element).get_myplugin_obj().get_size();
var threshold = first_given_size * 3;
//var threshold = 10;
var current_size_px = $(element).nextAll('.hello:first').css('font-size');
var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10);
if(current_size > threshold){
if(!$(element).next().hasClass('error'))
$(element).after('<span class="error" style="color:red">'+error_message+'</span>');
} else {
if($(element).next().hasClass('error'))
$(element).next().remove();
}
}
index.php:
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="myplugin.js"></script>
<script type="text/javascript" src="giveerror.js"></script>
<script type="text/javascript">
$(document).ready ( function ( ) {
$('#input1').myPlugin({
size: 5
});
$('#input2').myPlugin();
$('#input1').bind ( 'change', function() {
validate_hello_size_func (this, 'You exceeded the limit');
});
$('#input2').bind ( 'change', function() {
validate_hello_size_func (this, 'You exceeded the limit');
});
});
</script>
</head>
<body>
<div id="div1">
<input id="input1" type="text" name="input1" value="">
</div>
<div id="div2">
<input id="input2" type="text" name="input2" value="">
</div>
<br />
<input type="submit" name="submit" value="OK">
</body>
</html>
I solved the problem, I am adding my comments here to help who wants to use same structure, here are the answer:
Through the return statement:
Here are the new myplugin.js:
And get the size with the following function. giveerror.js: