{"id":156,"date":"2015-10-26T22:18:27","date_gmt":"2015-10-26T22:18:27","guid":{"rendered":"http:\/\/wjharil.com\/blog\/?p=156"},"modified":"2015-10-27T16:32:25","modified_gmt":"2015-10-27T21:32:25","slug":"barra-progreso-formularios-jquery","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/barra-progreso-formularios-jquery\/","title":{"rendered":"Barra de progreso para formularios con jQuery"},"content":{"rendered":"

Luego de unas vacaciones merecidas, me veo trabajando actualmente en un proyecto en el cu\u00e1l ten\u00eda que implementar una barra de progreso que muestre el porcentaje del formulario<\/strong> seg\u00fan \u00e9ste se est\u00e9 llenando<\/em>.<\/p>\n

Lo primero que se nos ocurre es validar cada elemento del formulario<\/strong> para sumarlos y obtener el total de campos que tenemos y seg\u00fan esto podemos sacar un porcentaje de cada; esto ser\u00eda v\u00e1lido, pero engorroso<\/em> de hacer si tenemos un formulario que ser\u00eda din\u00e1mico<\/strong>. Para darle soluci\u00f3n, tenemos a la mano un plugin (que consegu\u00ed navegando por los mares del internet, codecanyon<\/del>) que se encarga de hacer \u00e9sto por nosotros. Recuerda siempre: si la rueda est\u00e1 inventada, no la vuelvas a crear.<\/p>\n

Una barra de progreso de formularios con jQuery<\/h2>\n
    \n
  1. Lo primero que haremos, es descargar \u00e9stos 2 archivos que son la hoja de estilos y el javascript. Click Aqu\u00ed<\/strong><\/a><\/li>\n
  2. Ahora, vamos a inclu\u00edrlo en nuestro documento HTML, y a la vez la librer\u00eda de jQuery 1.9+.<\/li>\n
  3. Una vez lo tengamos inclu\u00eddo, podemos crear nuestro formulario agregando a cada campo la clase \u00ab.required\u00bb la cu\u00e1l ser\u00e1 usado como indicador para el contador porcentual.<\/li>\n
  4. Teniendo ya creado el formulario y los archivos a\u00f1adidos correctamente, podemos adicionar nuestra barra que ser\u00e1 usada para mostrar el porcentaje en que se va llenando el formulario.<\/li>\n
  5. El siguiente html, es el contenedor en el cual se mostrar\u00e1 el porcentaje:\n
    <div class=\"meter\">\r\n    <div id=\"percentage\"><\/div>\r\n<\/div><\/pre>\n
     <\/p><\/li>\n
  6. Agregamos el siguiente c\u00f3digo en el footer de nuestro documento:\n
    <script type=\"text\/javascript\">\r\n$(function(){\r\n$('#percentage').formProgress({\r\nspeed : 500, \/\/ Duraci\u00f3n de la animaci\u00f3n\r\nstyle : 'green', \/\/ Clase asignada a tu barra de progreso\r\nbubble : false, \/\/ Mostrar el porcentaje debajo de la barra de progreso\r\nminPercent : 45, \/\/ L\u00edmite m\u00ednimo para permitir enviar el formulario\r\nmessage : 'Llenar los campos !', \/\/ Mostrar error\r\nselector : '.required' \/\/ La clase asignada a cada campo\r\n});\r\n});\r\n<\/script><\/pre>\n<\/li>\n<\/ol>\n
    Teniendo \u00e9sto creado, ya podemos hacer uso de \u00e9sta barra de progreso para formularios con jQuery<\/strong>.<\/p>\n
    Date una vuelta por la documentaci\u00f3n del archivo: http:\/\/www.formeter.techlabs.ro\/documentation\/index.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Luego de unas vacaciones merecidas, me veo trabajando actualmente en un proyecto en el cu\u00e1l
    Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["jquery"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/10\/590px.png","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/156"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":7,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/156\/revisions\/165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/157"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}