Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (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);
- 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();
- }
- }
- <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>
- (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;
- };
- };
- $.fn.myPlugin = function(customOptions)
- {
- return this.each(function()
- {
- var element = $(this);
- /** create an object for MyPluginClass **/
- var MyPluginClassObj = new MyPluginClass(this, customOptions);
- MyPluginClassObj.addMyPlugin();
- this.get_myplugin_obj = function() {
- return MyPluginClassObj;
- };
- });
- };
- })(jQuery);
- function validate_hello_size_func (element, error_message)
- {
- var first_given_size = $(element)[0].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();
- }
- }
Add Comment
Please, Sign In to add comment