Guest User

Untitled

a guest
Jan 16th, 2019
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.01 KB | None | 0 0
  1. (function($) {
  2.  
  3. var MyPluginClass = function(element, customOptions)
  4. {
  5. var elem = $(element);
  6. var obj = this;
  7. var options = $.extend({
  8. size: 1
  9. }, customOptions || {});
  10.  
  11. /** public method **/
  12. this.addMyPlugin = function() {
  13. elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>');
  14.  
  15. calculate(elem);
  16. elem.change(function() {
  17. calculate(this);
  18. });
  19. elem.keyup(function(){
  20. calculate(this);
  21. });
  22. };
  23.  
  24. /** private method */
  25. var calculate = function(obj){
  26. var length = $(obj).val().length;
  27. var newsize = options.size + length;
  28. $(obj).nextAll('.hello:first').css('font-size',newsize);
  29. return;
  30. };
  31.  
  32. /** public method to get max size value **/
  33. this.get_size = function() {
  34. return options.size;
  35. };
  36.  
  37. /** public method to get object of this class for specific element **/
  38. this.get_myplugin_obj = function() {
  39. return obj;
  40. };
  41.  
  42.  
  43. };
  44.  
  45. $.fn.myPlugin = function(customOptions)
  46. {
  47. return this.each(function()
  48. {
  49. var element = $(this);
  50.  
  51. /** create an object for MyPluginClass **/
  52. var MyPluginClassObj = new MyPluginClass(this, customOptions);
  53.  
  54. MyPluginClassObj.addMyPlugin();
  55. });
  56. };
  57. })(jQuery);
  58.  
  59. function validate_hello_size_func (element, error_message)
  60. {
  61. var first_given_size = $(element).get_myplugin_obj().get_size();
  62. var threshold = first_given_size * 3;
  63. //var threshold = 10;
  64. var current_size_px = $(element).nextAll('.hello:first').css('font-size');
  65. var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10);
  66. if(current_size > threshold){
  67. if(!$(element).next().hasClass('error'))
  68. $(element).after('<span class="error" style="color:red">'+error_message+'</span>');
  69. } else {
  70. if($(element).next().hasClass('error'))
  71. $(element).next().remove();
  72. }
  73. }
  74.  
  75. <html>
  76. <head>
  77. <title>Hello</title>
  78. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  79. <script type="text/javascript" src="myplugin.js"></script>
  80. <script type="text/javascript" src="giveerror.js"></script>
  81. <script type="text/javascript">
  82. $(document).ready ( function ( ) {
  83. $('#input1').myPlugin({
  84. size: 5
  85. });
  86. $('#input2').myPlugin();
  87.  
  88. $('#input1').bind ( 'change', function() {
  89. validate_hello_size_func (this, 'You exceeded the limit');
  90. });
  91. $('#input2').bind ( 'change', function() {
  92. validate_hello_size_func (this, 'You exceeded the limit');
  93. });
  94. });
  95.  
  96. </script>
  97. </head>
  98. <body>
  99. <div id="div1">
  100. <input id="input1" type="text" name="input1" value="">
  101. </div>
  102. <div id="div2">
  103. <input id="input2" type="text" name="input2" value="">
  104. </div>
  105. <br />
  106. <input type="submit" name="submit" value="OK">
  107. </body>
  108. </html>
  109.  
  110. (function($) {
  111.  
  112. var MyPluginClass = function(element, customOptions)
  113. {
  114. var elem = $(element);
  115. var obj = this;
  116. var options = $.extend({
  117. size: 1
  118. }, customOptions || {});
  119.  
  120. /** public method **/
  121. this.addMyPlugin = function() {
  122. elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>');
  123.  
  124. calculate(elem);
  125. elem.change(function() {
  126. calculate(this);
  127. });
  128. elem.keyup(function(){
  129. calculate(this);
  130. });
  131. };
  132.  
  133. /** private method */
  134. var calculate = function(obj){
  135. var length = $(obj).val().length;
  136. var newsize = options.size + length;
  137. $(obj).nextAll('.hello:first').css('font-size',newsize);
  138. return;
  139. };
  140.  
  141. /** public method to get max size value **/
  142. this.get_size = function() {
  143. return options.size;
  144. };
  145.  
  146. };
  147.  
  148. $.fn.myPlugin = function(customOptions)
  149. {
  150. return this.each(function()
  151. {
  152. var element = $(this);
  153.  
  154. /** create an object for MyPluginClass **/
  155. var MyPluginClassObj = new MyPluginClass(this, customOptions);
  156.  
  157. MyPluginClassObj.addMyPlugin();
  158.  
  159. this.get_myplugin_obj = function() {
  160. return MyPluginClassObj;
  161. };
  162. });
  163. };
  164. })(jQuery);
  165.  
  166. function validate_hello_size_func (element, error_message)
  167. {
  168. var first_given_size = $(element)[0].get_myplugin_obj().get_size();
  169. var threshold = first_given_size * 3;
  170. //var threshold = 10;
  171. var current_size_px = $(element).nextAll('.hello:first').css('font-size');
  172. var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10);
  173. if(current_size > threshold){
  174. if(!$(element).next().hasClass('error'))
  175. $(element).after('<span class="error" style="color:red">'+error_message+'</span>');
  176. } else {
  177. if($(element).next().hasClass('error'))
  178. $(element).next().remove();
  179. }
  180. }
Add Comment
Please, Sign In to add comment