{"id":38,"date":"2008-04-15T11:40:14","date_gmt":"2008-04-15T10:40:14","guid":{"rendered":"http:\/\/bezerik.es\/me\/?p=38"},"modified":"2008-11-17T12:36:03","modified_gmt":"2008-11-17T11:36:03","slug":"personaliza-checkboxes-radio-buttons-con-mooforms","status":"publish","type":"post","link":"http:\/\/bezerik.es\/me\/personaliza-checkboxes-radio-buttons-con-mooforms\/","title":{"rendered":"Personaliza tus checkboxes y radio buttons con MooForms"},"content":{"rendered":"<p>Hoy he dado con <a rel=\"nofollow\" href=\"http:\/\/www.shaunfreeman.co.uk\/index.php?page=7\" target=\"_blank\">MooForms<\/a>, una <strong>clase de Mootools<\/strong> que permite personalizar los <em>checkbox<\/em> y <em>radio buttons<\/em> de los formularios, reemplazandolos por im\u00e1genes personalizadas usando \u00ab<em>CSS background position<\/em>\u00ab.<\/p>\n<p><strong>MooForms<\/strong> esta inspirado en el script de <a href=\"http:\/\/ryanfait.com\/resources\/custom-checkboxes-and-radio-buttons\/\">Ryan Fait<\/a> y ha sido provado y comprobado que funciona en:<\/p>\n<ul>\n<li>Internet Explorer 7, 6 &amp; 5.5<\/li>\n<li>Firefox 2<\/li>\n<li>Opera 9<\/li>\n<li>Safari 2<\/li>\n<li>Konqueror<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-42 aligncenter\" title=\"mooforms3\" src=\"http:\/\/bezerik.es\/me\/wp-content\/uploads\/2008\/04\/mooforms3.gif\" alt=\"\" width=\"260\" height=\"161\" \/><br \/>\n<a rel=\"nofollow\" href=\"http:\/\/demo.shaunfreeman.co.uk\/mooForms\/index.html\" target=\"_blank\">Demo<\/a> | <a rel=\"nofollow\" href=\"http:\/\/www.shaunfreeman.co.uk\/index.php?page=7%3C\/p%3E\" target=\"_blank\">Descargar<\/a> | <a rel=\"nofollow\" href=\"http:\/\/www.shaunfreeman.co.uk\/index.php?page=7\" target=\"_blank\">M\u00e1s informaci\u00f3n<\/a><br \/>\n<!--more--><\/p>\n<h2>Ejemplo de utilizaci\u00f3n<\/h2>\n<p>Cargamos las librerias en el HEAD:<\/p>\n<pre class=\"code\">&lt;script type=\"text\/javascript\" src=\".\/mootools.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\".\/mooforms.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Llamamos y creamos la clase:<\/p>\n<pre class=\"code\">&lt;script&gt;\r\nwindow.addEvent('domready', function() {\r\n       myFrom2 = new mooForms('myForm', {\r\n       imageDir: '.\/images\/',\r\n       checkboxImage: {image: 'checkbox.gif', width: 16, height: 20},\r\n       radioImage: {image: 'radio.gif', width: 16, height: 20},\r\n       spacer: 'spacer.gif',\r\n       inputs: ['checkbox', 'radio'],\r\n       labelPosition: 'left'\r\n    });\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>El formulario XHTML:<\/p>\n<pre class=\"code\">&lt;form id=\"myForm\"&gt;\r\n&lt;div&gt;\r\n&lt;input type=\"checkbox\" name=\"checkbox[]\" value=\"1\" checked=\"checked\" \/&gt;&lt;label for=\"#\"&gt;option 1&lt;\/label&gt;\r\n&lt;input type=\"checkbox\" name=\"checkbox[]\" value=\"1\" \/&gt;&lt;label for=\"#\"&gt;option 2&lt;\/label&gt;\r\n&lt;input type=\"checkbox\" name=\"checkbox[]\" value=\"1\" \/&gt;&lt;label for=\"#\"&gt;option 3&lt;\/label&gt;\r\n&lt;\/div&gt;\r\n&lt;p&gt;some text&lt;\/p&gt;\r\n&lt;div&gt;\r\n&lt;input type=\"radio\" name=\"radio1\" value=\"1\" \/&gt;&lt;label for=\"#\"&gt;option 1&lt;\/label&gt;\r\n&lt;input type=\"radio\" name=\"radio1\" value=\"1\" \/&gt;&lt;label for=\"#\"&gt;option 2&lt;\/label&gt;\r\n&lt;input type=\"radio\" name=\"radio1\" value=\"1\" \/&gt;&lt;label for=\"#\"&gt;option 3&lt;\/label&gt;\r\n&lt;\/div&gt;\r\n&lt;\/form&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Hoy he dado con MooForms, una clase de Mootools que permite personalizar los checkbox y radio buttons de los formularios, reemplazandolos por im\u00e1genes personalizadas usando \u00abCSS background position\u00ab. MooForms esta inspirado en el script de Ryan Fait y ha sido provado y comprobado que funciona en: Internet Explorer 7, 6 &amp; 5.5 Firefox 2 Opera [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":666,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25,20],"tags":[186,191,189,193,194,192,185,345,187,188,190],"_links":{"self":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/38"}],"collection":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":3,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":102,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/38\/revisions\/102"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media\/666"}],"wp:attachment":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}