Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
29 | 30 | 31 | 32 |"+c[(e-1)%7]+"
";else if(void 0!=b.length&&""!=b.length)for(var e=1;d.length'+lorem[(i-1)%7]+'
'; 51 | } 52 | 53 | // Or add a specific number of characters: 54 | 55 | } else { 56 | if (options.length != undefined && options.length != ''){ 57 | 58 | var i=1; 59 | 60 | while(text.length < options.length-1){ 61 | text += lorem[(i-1)%7]+' '; 62 | text = text.substring(0, options.length-1); 63 | i++; 64 | } 65 | 66 | } else { 67 | text = lorem[0]; 68 | } 69 | } 70 | 71 | $that.html(text); 72 | 73 | }; 74 | 75 | return command; 76 | 77 | }()); -------------------------------------------------------------------------------- /jquery.jkit.commands/form.min.js: -------------------------------------------------------------------------------- 1 | 2 | // jQuery Plugin: jKit 3 | // A very easy to use, cross platform jQuery UI toolkit that's still small in size, has the features you need and doesn't get in your way. 4 | // Version 1.2.16 - 10. May. 2013 5 | // http://jquery-jkit.com/ 6 | // 7 | // by Fredi Bach 8 | // http://fredibach.ch/jquery-plugins/ 9 | 10 | plugin.commands.form=function(){var a={};return plugin.addCommandDefaults("form",{validateonly:"no"}),a.execute=function(a,b){var c=plugin.settings;a.append(''),void 0!=b.error&&(b.formerror=b.error);var d=[];a.on("submit",function(){var e=[];if($(this).find("span."+c.errorClass).remove(),$(this).find("*[rel^=jKit], *["+c.dataAttribute+"]").each(function(){var a=$(this).attr("rel"),b=$(this).attr(c.dataAttribute);if(void 0!=b)var f=b.indexOf("["),g=b.indexOf("]"),h=b.substring(f+1,g);else var f=a.indexOf("["),g=a.indexOf("]"),h=a.substring(f+1,g);var i=plugin.parseOptions(h);i.type;var k=!1,l=!1;if(void 0==i.required&&(i.required=!1),"true"==i.required&&(""==$(this).val()&&(k=!0,e.push({element:$(this),error:"required"})),l=!0,-1==$.inArray($(this).attr("name"),d)&&d.push($(this).attr("name"))),l||""!=$(this).val()||"group"==i.type){if("email"!=i.type||$.fn.jKit_emailCheck($(this).val())||(k=!0,e.push({element:$(this),error:"email"})),"url"!=i.type||$.fn.jKit_urlCheck($(this).val())||(k=!0,e.push({element:$(this),error:"url"})),"date"!=i.type||$.fn.jKit_dateCheck($(this).val())||(k=!0,e.push({element:$(this),error:"date"})),"date"==i.type&&new Date($(this).val()).getTime()<=new Date($(i.older).val()).getTime()&&(k=!0,e.push({element:$(this),error:"older"})),"date"==i.type&&new Date($(this).val()).getTime()>=new Date($(i.younger).val()).getTime()&&(k=!0,e.push({element:$(this),error:"younger"})),"time"!=i.type||$.fn.jKit_timeCheck($(this).val())||(k=!0,e.push({element:$(this),error:"time"})),"phone"!=i.type||$.fn.jKit_phoneCheck($(this).val())||(k=!0,e.push({element:$(this),error:"phone"})),"float"==i.type&&isNaN($(this).val())&&(k=!0,e.push({element:$(this),error:"float"})),"int"==i.type&&parseInt($(this).val())!=$(this).val()&&(k=!0,e.push({element:$(this),error:"int"})),("int"==i.type||"float"==i.type)&&void 0!=i.min&&$(this).val()'+b.success+"
"),plugin.triggerEvent("complete",a,b),void 0!=b.macro&&plugin.applyMacro(a,b.macro);else{for(x in d.error){var g=d.error[x];a.find("*[name="+g+"]").addClass(c.errorClass).after(''+b.error+"")}plugin.triggerEvent("error",a,b)}}).error(function(b,d,e){alert(e),a.append('There was an error submitting the form: Error Code '+b.status+"")}),!1}return a.addClass(c.errorClass),void 0!=b.formerror&&a.append(''+b.formerror+""),plugin.triggerEvent("error",a,b),!1})},a}(); 11 | -------------------------------------------------------------------------------- /jquery.jkit.commands/binding.min.js: -------------------------------------------------------------------------------- 1 | 2 | // jQuery Plugin: jKit 3 | // A very easy to use, cross platform jQuery UI toolkit that's still small in size, has the features you need and doesn't get in your way. 4 | // Version 1.2.16 - 10. May. 2013 5 | // http://jquery-jkit.com/ 6 | // 7 | // by Fredi Bach 8 | // http://fredibach.ch/jquery-plugins/ 9 | 10 | plugin.commands.binding=function(){var command={};plugin.addCommandDefaults("binding",{selector:"",source:"val",variable:"",mode:"text",interval:100,math:"",condition:"","if":"","else":"",speed:0,easing:"linear",search:"",trigger:"no",accuracy:"",min:"",max:"",applyto:"",delay:0}),command.execute=function(a,b){window.setTimeout(function(){binding(a,b)},b.delay)};var binding=function(el,options){if(windowhasfocus||!windowhasfocus&&plugin.settings.ignoreFocus){if(void 0==options.value){if(""!=options.selector){var selsplit=options.selector.split("|"),sourcesplit=options.source.split("."),values=[];if($.each(selsplit,function(a,b){var c;if("this"==b)c=el;else if("parent"==b)c=$(el).parent();else{var d=b.split(".");1==d.length?c=$(d[0]):"each"==d[0]?c=el.find(d[1]):"children"==d[0]&&(c=el.children(d[1]))}c.each(function(){switch(sourcesplit[0]){case"event":$(this).on(sourcesplit[1],function(){options.value=1,binding(el,options),void 0!=options.macro&&plugin.applyMacro($(el),options.macro)});break;case"html":var a=$(this).html();break;case"text":var a=$(this).text();break;case"attr":var a=$(this).attr(sourcesplit[1]);break;case"css":if("height"==sourcesplit[1])var a=$(this).height();else if("innerHeight"==sourcesplit[1])var a=$(this).innerHeight();else if("outerHeight"==sourcesplit[1])var a=$(this).outerHeight();else if("width"==sourcesplit[1])var a=$(this).width();else if("innerWidth"==sourcesplit[1])var a=$(this).innerWidth();else if("outerWidth"==sourcesplit[1])var a=$(this).outerWidth();else if("scrollTop"==sourcesplit[1])var a=$(this).scrollTop();else if("scrollLeft"==sourcesplit[1])var a=$(this).scrollLeft();else var a=$(this).css(sourcesplit[1]);break;case"scroll":switch(sourcesplit[1]){case"top":var a=$(window).scrollTop();break;case"left":var a=$(window).scrollLeft()}break;case"clearance":var b=el.offset().top-$(window).scrollTop(),c=$(window).scrollTop()+$(window).height()-(el.offset().top+el.height()),d=$(window).width()+$(window).scrollLeft()-(el.offset().left+el.width()),e=el.offset().left-$(window).scrollLeft();switch(sourcesplit[1]){case"bottom":var a=c;break;case"top":var a=b;break;case"right":var a=d;break;case"left":var a=e;break;default:var a=Math.min.apply(Math,[c,b,d,e])}break;case"has":switch(sourcesplit[1]){case"class":var a=$(this).hasClass(options.search);break;case"text":var a=$.fn.jKit_stringOccurrences($(this).text().toLowerCase(),options.search.toLowerCase());break;case"attribute":var a=void 0!==$(this).attr(options.search);break;case"val":var a=$.fn.jKit_stringOccurrences($(this).val().toLowerCase(),options.search.toLowerCase());break;case"element":var a=$(this).find(options.search).length;break;case"children":var a=$(this).children(options.search).length;break;case"hash":var a=window.location.hash==options.search}break;case"location":var a=window.location[sourcesplit[1]];break;case"val":default:var a=$(this).val()}values.push(a)})}),void 0!=sourcesplit[2]){var value="";switch(sourcesplit[2]){case"max":value=Math.max.apply(Math,values);break;case"min":value=Math.min.apply(Math,values);break;case"sum":value=values.reduce(function(a,b){return a+b});break;case"avg":value=values.reduce(function(a,b){return a+b})/values.length}}else var value=values[0]}else if(""!=options.variable)var value=window[options.variable]}else value=options.value;isNaN(value)||parseInt(value)!=value||(""!=options.accuracy&&(value=Math.round(value/options.accuracy)*options.accuracy),""!=options.min&&options.min>value&&(value=options.min),""!=options.max&&value>options.max&&(value=options.max));var doit,rev=!1;if(""!=options.condition?(doit=!1,eval("if ("+options.condition.replace(/[^a-zA-Z 0-9#\<\>\=\.\!\']+/g,"")+") doit = true;")):value===!1?(doit=!1,rev=!0):doit=!0,(void 0==commandkeys[options.commandkey].condition||commandkeys[options.commandkey].condition!=doit)&&(doit?plugin.triggerEvent("true",$(el),options):plugin.triggerEvent("false",$(el),options),commandkeys[options.commandkey].condition=doit),rev&&(doit=!0),doit||""==options["else"]?doit&&""!=options["if"]&&(doit=!0,value=options["if"]):(doit=!0,value=options["else"]),doit){""!=options.math&&eval("value = "+options.math.replace(/[^a-zA-Z 0-9\+\-\*\/\.]+/g,"")+";"),"yes"==options.trigger&&(void 0==commandkeys[options.commandkey].triggervalue||commandkeys[options.commandkey].triggervalue!=value)&&(void 0!==commandkeys[options.commandkey].triggervalue&&plugin.triggerEvent("notvalue"+commandkeys[options.commandkey].triggervalue,$(el),options),plugin.triggerEvent("value"+value,$(el),options),commandkeys[options.commandkey].triggervalue=value);var $els=el;if(""!=options.applyto){var applysplit=options.applyto.split(".");1==applysplit.length?$els=$(applysplit[0]):"each"==applysplit[0]?$els=el.find(applysplit[1]):"children"==applysplit[0]&&($els=el.children(applysplit[1]))}$els.each(function(){var a=$(this),b=options.mode.split(".");switch(b[0]){case"text":a.text(value);break;case"html":a.html(value);break;case"val":a.val(value);break;case"attr":a.attr(b[1],value);break;case"css":if("display"==b[1]&&(""!=$.trim(value)&&0!=$.trim(value)&&value?void 0!==b[2]&&(value=b[2]):value="none"),options.speed>0){var c={};c[b[1]]=value,a.animate(c,options.speed,options.easing)}else a.css(b[1],value);break;case"none":break;default:if(void 0!=b[0]){var d=window[b[0]];"function"==typeof d&&d(value,a)}}})}}-1!=options.interval&&window.setTimeout(function(){binding(el,options)},options.interval)};return command}(); 11 | -------------------------------------------------------------------------------- /jquery.jkit.commands/template.js: -------------------------------------------------------------------------------- 1 | 2 | // ##### Template Command 3 | // 4 | // The [template command](http://jquery-jkit.com/commands/template.html) implements a simple 5 | // templating engine. 6 | 7 | plugin.commands.template = (function(){ 8 | 9 | // Create an object that contains all of our data and functionality. 10 | 11 | var command = {}; 12 | 13 | command.templates = {}; 14 | 15 | // This are the command defaults: 16 | 17 | plugin.addCommandDefaults('template', { 18 | 'action': 'set', 19 | 'name': 'template', 20 | 'dynamic': 'no', 21 | 'addhtml': '+' 22 | }); 23 | 24 | // The execute function is launched whenever this command is executed: 25 | 26 | command.execute = function($that, options){ 27 | 28 | var s = plugin.settings; 29 | 30 | // Apply a template or define a new one? 31 | 32 | if (options.action == 'apply'){ 33 | 34 | $el = $that; 35 | 36 | // Do we have to apply the template to more than one element? 37 | 38 | if (options.children != undefined && options.children != ''){ 39 | 40 | $el = $that.children(options.children); 41 | 42 | var cnt = 0; 43 | $el.each( function(){ 44 | cnt++; 45 | applyTemplate($(this), options, cnt, $el.length); 46 | }); 47 | } else { 48 | applyTemplate($that, options); 49 | } 50 | 51 | // If this is a dynamic template, we need to create the *add div* that 52 | // acts like a button and adds a new element with the correct options: 53 | 54 | if (options.dynamic == 'yes'){ 55 | var $addDiv = $('', { 56 | 'class': s.prefix+'-'+type+'-add' 57 | }).html(options.addhtml).on( 'click', function(){ 58 | 59 | $el = $($that.get(0)); 60 | 61 | var cnt = $el.children(options.children).length + 1; 62 | 63 | $el.find('.if-entry-last').hide(); 64 | applyTemplate($('<'+options.children+'/>').appendTo($el), options, cnt, cnt); 65 | 66 | plugin.triggerEvent('added', $that, options); 67 | 68 | }).insertAfter($that); 69 | 70 | } 71 | 72 | } else { 73 | 74 | // Templates are stored in a "global" plugin array: 75 | 76 | if (command.templates[options.name] == undefined){ 77 | command.templates[options.name] = []; 78 | } 79 | 80 | // Define the dynamic variables: 81 | 82 | if (options.vars == undefined){ 83 | var vars = []; 84 | } else { 85 | var vars = options.vars.split(s.delimiter); 86 | } 87 | 88 | // Add the template to the "global" array: 89 | 90 | command.templates[options.name] = { 'template': $that.detach(), 'vars': vars }; 91 | 92 | } 93 | 94 | }; 95 | 96 | // The **applyTemplate** function is used by the template command. It adds the template with all it's 97 | // options to the suoplied element. 98 | 99 | var applyTemplate = function($el, options, cnt, entries){ 100 | 101 | // Loop through each template variable, find the correct element inside the supplied content element, 102 | // init each of the elements in case there are any jKit commands on them and finally store the value or HTML 103 | // in an array. 104 | 105 | var content = {}; 106 | $.each( command.templates[options.name].vars, function(i,v){ 107 | var $subEls = $el.find('.'+v); 108 | plugin.init($subEls); 109 | if ($subEls.val() != ''){ 110 | content[v] = $subEls.val(); 111 | } else { 112 | content[v] = $subEls.html(); 113 | } 114 | }); 115 | 116 | // Now add the template to the container element: 117 | 118 | $el.html(command.templates[options.name].template.clone().show()); 119 | 120 | // Hide all elements that have an **if-entry-x** class. We later show them again if needed. 121 | 122 | $el.find('[class^="if-entry-"]').hide(); 123 | 124 | // Rename dynamic attributes so that we don't get dublicate ids: 125 | 126 | renameDynamicAttributes($el, cnt); 127 | 128 | // Add the content and show hidden elements if needed: 129 | 130 | $.each( command.templates[options.name].vars, function(i,v){ 131 | 132 | var $subEl = $el.find('.'+v); 133 | 134 | if ($subEl.is("input") || $subEl.is("select") || $subEl.is("textarea")){ 135 | $subEl.val(content[v]); 136 | } else { 137 | $subEl.html(content[v]); 138 | } 139 | 140 | if (content[v] == undefined && $el.find('.if-'+v).length > 0){ 141 | $el.find('.if-'+v).remove(); 142 | } 143 | 144 | if (cnt == 1) $el.find('.if-entry-first').show(); 145 | if (cnt == entries) $el.find('.if-entry-last').show(); 146 | $el.find('.if-entry-nr-'+cnt).show(); 147 | 148 | }); 149 | 150 | }; 151 | 152 | 153 | // The **renameDynamicAttributes** function is used by the **plugin.applyTemplate** function. It's 154 | // used to rename attributes on dynamic elements so that we get unique elements. 155 | 156 | var renameDynamicAttributes = function($el, cnt){ 157 | $el.find('[class^="dynamic-"]').each( function(){ 158 | 159 | var $subEl = $(this); 160 | var classList = $(this).attr('class').split(/\s+/); 161 | 162 | $.each( classList, function(i,v){ 163 | 164 | var attribute = v.substr(8); 165 | 166 | if (attribute != '' && $subEl.attr(attribute)){ 167 | 168 | var currentAttr = $subEl.attr(attribute); 169 | var pos = currentAttr.lastIndexOf('_'); 170 | if (pos > -1){ 171 | currentAttr = currentAttr.substr(0,pos); 172 | } 173 | 174 | $subEl.attr(attribute, currentAttr+'_'+cnt); 175 | 176 | } 177 | 178 | }); 179 | 180 | }); 181 | }; 182 | 183 | return command; 184 | 185 | }()); -------------------------------------------------------------------------------- /plugins/maxlength/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 |In this tutorial I will show you how to use jquery.maxlength.js on some common form fields
25 |To start, you will need to download a copy of the jQuery library http://docs.jquery.com/Downloading_jQuery.
26 |
You will also have to download the plugin jquery.maxlength.js
When you have downloaded the copy you will need to include it in your file.
32 |33 | <html> 34 | <head> 35 | <script type="text/javascript" src="jquery.js"></script> 36 | </head> 37 | <body> 38 | <!-- we will add our HTML content here --> 39 | </body> 40 | </html> 41 |42 | 43 |
Next step is to include jquery.maxlength.js
44 | 45 |46 | <html> 47 | <head> 48 | <script type="text/javascript" src="jquery.js"></script> 49 | <script type="text/javascript" src="jquery.maxlength-min.js"></script> 50 | </head> 51 | <body> 52 | <!-- we will add our HTML content here --> 53 | </body> 54 | </html> 55 |56 | 57 |
Now to the fun part, how to apply the functionality to your script.
58 | 59 |
68 | <script type="text/javascript">
69 | $(document).ready(function(){
70 | $('#textarea_1_1').maxlength();
71 | });
72 | </script>
73 |
74 |
75 |
88 | <script type="text/javascript">
89 | $(document).ready(function(){
90 | $('div.example2 textarea').maxlength();
91 | });
92 | </script>
93 |
94 |
95 |
108 | <script type="text/javascript">
109 | $(document).ready(function(){
110 | $('div.example3 textarea').maxlength();
111 | $('#textarea_3_2').maxlength( {status: false, showAlert: true} );
112 | });
113 | </script>
114 |
115 |
116 |
129 | <script type="text/javascript">
130 | $(document).ready(function(){
131 | $('div.example4 textarea').maxlength();
132 | $('#textarea_4_1').maxlength( {events: ['blur']} );
133 | });
134 | </script>
135 |
136 |
137 |
150 | <script type="text/javascript">
151 | $(document).ready(function(){
152 | $('div.example5 textarea, div.example5 input').maxlength( {slider: true} );
153 | });
154 | </script>
155 |
156 |
157 |
--------------------------------------------------------------------------------