Commit 92059f3e3d4624474d410cfb16c1bf6c0698774b
1 parent
35d5ac9874
Exists in
master
Finalizado parcial
Showing
2 changed files
with
19 additions
and
26 deletions
Show diff stats
index.html
| 1 | <!doctype html> | 1 | <!doctype html> |
| 2 | <html lang="us"> | 2 | <html lang="us"> |
| 3 | <head> | 3 | <head> |
| 4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8"> |
| 5 | <title>jQuery Mutable Select Plugins Example</title> | 5 | <title>jQuery Mutable Select Plugins Example</title> |
| 6 | <script src="js/jquery-1.10.2.js"></script> | 6 | <script src="js/jquery-1.10.2.js"></script> |
| 7 | <script src="js/jquery.mutable.js"></script> | 7 | <script src="js/jquery.mutable.js"></script> |
| 8 | <script> | 8 | <script> |
| 9 | $(document).ready(function(){ | 9 | $(document).ready(function(){ |
| 10 | 10 | ||
| 11 | $("#id_lengua").mutarSelect({ | 11 | $("#id_lengua").mutarSelect({ |
| 12 | valueselector:"Otra", | 12 | valueselector:"Otra", |
| 13 | }); | 13 | }); |
| 14 | 14 | ||
| 15 | $("#id_trabajasactual").mutarSelect({ | 15 | $("#id_trabajasactual").mutarSelect({ |
| 16 | valueselector:"Otra", | 16 | valueselector:"Otra", |
| 17 | }); | 17 | }); |
| 18 | 18 | ||
| 19 | $("#id_trabajasactual").mutarSelect({ | 19 | $("#id_trabajasactual").mutarSelect({ |
| 20 | valueselector:"No, ¿Por que?", | 20 | valueselector:"No, ¿Por que?", |
| 21 | }); | 21 | }); |
| 22 | 22 | ||
| 23 | $("#id_cencontrabajo").mutarSelect({ | ||
| 24 | valueselector:"¿Otra forma, Cual?", | ||
| 25 | }); | ||
| 23 | 26 | ||
| 24 | $("id_cencontrabajo").mutarSelect({ | 27 | $("#id_arealaboral").mutarSelect({ |
| 25 | valueselector:"¿Otra forma, Cual?", | 28 | valueselector:"¿Otra forma, Cual?", |
| 26 | }); | 29 | }); |
| 27 | 30 | ||
| 28 | 31 | $("#id_dedicacionem").mutarSelect({ | |
| 32 | valueselector:"¿Otra, Cual?", | ||
| 33 | }); | ||
| 34 | |||
| 29 | 35 | ||
| 30 | }); | 36 | }); |
| 31 | </script> | 37 | </script> |
| 32 | <style> | 38 | <style> |
| 33 | body{ | 39 | body{ |
| 34 | font: 62.5% "Trebuchet MS", sans-serif; | 40 | font: 62.5% "Trebuchet MS", sans-serif; |
| 35 | margin: 50px; | 41 | margin: 50px; |
| 36 | } | 42 | } |
| 37 | </style> | 43 | </style> |
| 38 | </head> | 44 | </head> |
| 39 | <body> | 45 | <body> |
| 40 | 46 | ||
| 41 | <h1>Welcome to jQuery Plugin example</h1> | 47 | <h1>Welcome to jQuery Plugin example</h1> |
| 42 | 48 | ||
| 43 | <div class="ui-widget"> | 49 | <div class="ui-widget"> |
| 44 | <p></p> | 50 | <p></p> |
| 45 | </div> | 51 | </div> |
| 46 | 52 | ||
| 47 | <h1>YOUR COMPONENTS:</h1> | 53 | <h1>YOUR COMPONENTS:</h1> |
| 48 | 54 | ||
| 49 | 55 | ||
| 50 | <form id="datos" action="" method="post"> | 56 | <form id="datos" action="" method="post"> |
| 51 | <table> | 57 | <table> |
| 52 | <tr><th><label for="id_lengua">Lengua:</label></th><td><select id="id_lengua" required="true" class="form-control mutarselect" name="lengua"> | 58 | <tr><th><label for="id_lengua">Lengua:</label></th><td><select id="id_lengua" required="true" class="form-control mutarselect" name="lengua"> |
| 53 | <option value=""></option> | 59 | <option value=""></option> |
| 54 | <option value="Castellano">Castellano</option> | 60 | <option value="Castellano">Castellano</option> |
| 55 | <option value="Tseltal">Tseltal</option> | 61 | <option value="Tseltal">Tseltal</option> |
| 56 | <option value="Tsotsil">Tsotsil</option> | 62 | <option value="Tsotsil">Tsotsil</option> |
| 57 | <option value="Ch'ol">Ch'ol</option> | 63 | <option value="Ch'ol">Ch'ol</option> |
| 58 | <option value="Tojolabal">Tojolabal</option> | 64 | <option value="Tojolabal">Tojolabal</option> |
| 59 | <option value="Zoque">Zoque</option> | 65 | <option value="Zoque">Zoque</option> |
| 60 | </select></td></tr> | 66 | </select></td></tr> |
| 61 | <tr><th><label for="id_ciudad">Ciudad de nacimiento:</label></th><td><input id="id_ciudad" type="text" name="ciudad" maxlength="120" /></td></tr> | 67 | <tr><th><label for="id_ciudad">Ciudad de nacimiento:</label></th><td><input id="id_ciudad" type="text" name="ciudad" maxlength="120" /></td></tr> |
| 62 | <tr><th><label for="id_municipio">Municipio de nacimiento:</label></th><td><input id="id_municipio" type="text" name="municipio" maxlength="120" /></td></tr> | 68 | <tr><th><label for="id_municipio">Municipio de nacimiento:</label></th><td><input id="id_municipio" type="text" name="municipio" maxlength="120" /></td></tr> |
| 63 | <tr><th><label for="id_estado">Estado de nacimiento:</label></th><td><input id="id_estado" type="text" name="estado" maxlength="120" /></td></tr> | 69 | <tr><th><label for="id_estado">Estado de nacimiento:</label></th><td><input id="id_estado" type="text" name="estado" maxlength="120" /></td></tr> |
| 64 | <tr><th><label for="id_titulado">¿Ya te titulaste?</label></th><td><select id="id_titulado" required="true" class="form-control" name="titulado"> | 70 | <tr><th><label for="id_titulado">¿Ya te titulaste?</label></th><td><select id="id_titulado" required="true" class="form-control" name="titulado"> |
| 65 | <option value="" selected="selected"></option> | 71 | <option value="" selected="selected"></option> |
| 66 | <option value="True">SI</option> | 72 | <option value="True">SI</option> |
| 67 | <option value="False">NO</option> | 73 | <option value="False">NO</option> |
| 68 | </select></td></tr> | 74 | </select></td></tr> |
| 69 | <tr><th><label for="id_rectitulacion">¿Requieres titularte?</label></th><td><select id="id_rectitulacion" required="true" class="form-control mutarselect" name="rectitulacion"> | 75 | <tr><th><label for="id_rectitulacion">¿Requieres titularte?</label></th><td><select id="id_rectitulacion" required="true" class="form-control mutarselect" name="rectitulacion"> |
| 70 | <option value="" selected="selected"></option> | 76 | <option value="" selected="selected"></option> |
| 71 | <option value="True">SI</option> | 77 | <option value="True">SI</option> |
| 72 | <option value="False">NO</option> | 78 | <option value="False">NO</option> |
| 73 | </select></td></tr> | 79 | </select></td></tr> |
| 74 | <tr><th><label for="id_trabajasactual">¿Tabajas actualmente?</label></th><td><select id="id_trabajasactual" required="true" class="form-control mutarselect" name="trabajasactual"> | 80 | <tr><th><label for="id_trabajasactual">¿Tabajas actualmente?</label></th><td><select id="id_trabajasactual" required="true" class="form-control mutarselect" name="trabajasactual"> |
| 75 | <option value="" selected="selected"></option> | 81 | <option value="" selected="selected"></option> |
| 76 | <option value="Si">Si</option> | 82 | <option value="Si">Si</option> |
| 77 | </select></td></tr> | 83 | </select></td></tr> |
| 78 | <tr><th><label for="id_tencontrabajo">¿Cuánto tiempo tardaste en encontrar trabajo?</label></th><td><select id="id_tencontrabajo" required="true" class="form-control" name="tencontrabajo"> | 84 | <tr><th><label for="id_tencontrabajo">¿Cuánto tiempo tardaste en encontrar trabajo?</label></th><td><select id="id_tencontrabajo" required="true" class="form-control" name="tencontrabajo"> |
| 79 | <option value="" selected="selected"></option> | 85 | <option value="" selected="selected"></option> |
| 80 | <option value="Menos de 3 meses">Menos de 3 meses</option> | 86 | <option value="Menos de 3 meses">Menos de 3 meses</option> |
| 81 | <option value="De 3 a 6 Meses">De 3 a 6 Meses</option> | 87 | <option value="De 3 a 6 Meses">De 3 a 6 Meses</option> |
| 82 | <option value="De 6 a 9 Meses">De 6 a 9 Meses</option> | 88 | <option value="De 6 a 9 Meses">De 6 a 9 Meses</option> |
| 83 | <option value="De 9 a 12 Meses">De 9 a 12 Meses</option> | 89 | <option value="De 9 a 12 Meses">De 9 a 12 Meses</option> |
| 84 | <option value="Más de 1 año">Más de 1 año</option> | 90 | <option value="Más de 1 año">Más de 1 año</option> |
| 85 | <option value="Aún no cuentas con empleo">Aún no cuentas con empleo</option> | 91 | <option value="Aún no cuentas con empleo">Aún no cuentas con empleo</option> |
| 86 | </select></td></tr> | 92 | </select></td></tr> |
| 87 | <tr><th><label for="id_cencontrabajo">¿Cómo conseguite el trabajo?</label></th><td><select id="id_cencontrabajo" required="true" class="form-control" name="cencontrabajo"> | 93 | <tr><th><label for="id_cencontrabajo">¿Cómo conseguite el trabajo?</label></th><td><select id="id_cencontrabajo" required="true" class="form-control mutarselect" name="cencontrabajo"> |
| 88 | <option value="" selected="selected"></option> | 94 | <option value="" selected="selected"></option> |
| 89 | <option value="Relaciones personales">Relaciones personales</option> | 95 | <option value="Relaciones personales">Relaciones personales</option> |
| 90 | <option value="Bolsa de trabajo de la Universidad">Bolsa de trabajo de la Universidad</option> | 96 | <option value="Bolsa de trabajo de la Universidad">Bolsa de trabajo de la Universidad</option> |
| 91 | <option value="Bolsa de trabajo externas">Bolsa de trabajo externas</option> | 97 | <option value="Bolsa de trabajo externas">Bolsa de trabajo externas</option> |
| 92 | <option value="Entregando Curriculums">Entregando Curriculums</option> | 98 | <option value="Entregando Curriculums">Entregando Curriculums</option> |
| 93 | <option value="Concurso de selección">Concurso de selección</option> | 99 | <option value="Concurso de selección">Concurso de selección</option> |
| 94 | <option value="Durante el servicio social">Durante el servicio social</option> | 100 | <option value="Durante el servicio social">Durante el servicio social</option> |
| 95 | <option value="Ofresiendo mis servicios independientes">Ofresiendo mis servicios independientes</option> | 101 | <option value="Ofresiendo mis servicios independientes">Ofresiendo mis servicios independientes</option> |
| 96 | </select></td></tr> | 102 | </select></td></tr> |
| 97 | <tr><th><label for="id_dencontrabajo">Dificultades para conseguir trabajo:</label></th><td><input id="id_dencontrabajo" type="text" name="dencontrabajo" maxlength="120" /></td></tr> | ||
| 98 | <tr><th><label for="id_arealaboral">En el área laboral te desarrollas en:</label></th><td><select id="id_arealaboral" required="true" class="form-control mutarselect" name="arealaboral"> | 103 | <tr><th><label for="id_arealaboral">En el área laboral te desarrollas en:</label></th><td><select id="id_arealaboral" required="true" class="form-control mutarselect" name="arealaboral"> |
| 99 | <option value="" selected="selected"></option> | 104 | <option value="" selected="selected"></option> |
| 100 | <option value="En empleos profecionales que requien de la formación de su carrera">En empleos profecionales que requien de la formación de su carrera</option> | 105 | <option value="En empleos profecionales que requien de la formación de su carrera">En empleos profecionales que requien de la formación de su carrera</option> |
| 101 | <option value="En empleos profecionales que no requieren de la formación de su carrera">En empleos profecionales que no requieren de la formación de su carrera</option> | 106 | <option value="En empleos profecionales que no requieren de la formación de su carrera">En empleos profecionales que no requieren de la formación de su carrera</option> |
| 102 | <option value="En empleos que no requieren de una profeción">En empleos que no requieren de una profeción</option> | 107 | <option value="En empleos que no requieren de una profeción">En empleos que no requieren de una profeción</option> |
| 103 | <option value="otra">Otra, ¿Cual?</option> | ||
| 104 | </select></td></tr> | 108 | </select></td></tr> |
| 105 | 109 | ||
| 106 | <tr><th><label for="id_dedicacionem">Tiempo de dedicación en el empleo:</label></th><td><select id="id_dedicacionem" required="true" class="form-control mutarselect" name="dedicacionem"> | 110 | <tr><th><label for="id_dedicacionem">Tiempo de dedicación en el empleo:</label></th><td><select id="id_dedicacionem" required="true" class="form-control mutarselect" name="dedicacionem"> |
| 107 | <option value="" selected="selected"></option> | 111 | <option value="" selected="selected"></option> |
| 108 | <option value="Tiempo completo">Tiempo completo</option> | 112 | <option value="Tiempo completo">Tiempo completo</option> |
| 109 | <option value="Medio tiempo">Medio tiempo</option> | 113 | <option value="Medio tiempo">Medio tiempo</option> |
| 110 | <option value="Eventual">Eventual</option> | 114 | <option value="Eventual">Eventual</option> |
| 111 | <option value="otra">Otra, ¿Cual?</option> | ||
| 112 | </select></td></tr> | ||
| 113 | <tr><th><label for="id_formacionprofecional">¿Consideras que tu formacion profecional es?</label></th><td><select id="id_formacionprofecional" required="true" class="form-control mutarselect" name="formacionprofecional"> | ||
| 114 | <option value="" selected="selected"></option> | ||
| 115 | <option value="Excelente">Excelente</option> | ||
| 116 | <option value="Buena">Buena</option> | ||
| 117 | <option value="Regular">Regular</option> | ||
| 118 | <option value="Insatisfactoria">Insatisfactoria</option> | ||
| 119 | </select></td></tr> | 115 | </select></td></tr> |
| 120 | 116 | ||
| 117 | |||
| 121 | <table> | 118 | <table> |
| 122 | 119 | ||
| 123 | <input id="terminar" type="submit" name="terminar" value="Terminar"> | 120 | <input id="terminar" type="submit" name="terminar" value="Terminar"> |
| 124 | 121 | ||
| 125 | </form> | 122 | </form> |
js/jquery.mutable.js
| 1 | (function ( $ ) { | 1 | (function ( $ ) { |
| 2 | $.fn.mutarSelect = function( options ){ | 2 | $.fn.mutarSelect = function( options ){ |
| 3 | 3 | ||
| 4 | 4 | ||
| 5 | // This is the easiest way to have default options. | 5 | // This is the easiest way to have default options. |
| 6 | var settings = $.extend({ | 6 | var settings = $.extend({ |
| 7 | valueselector:"Agregar nuevo", | 7 | valueselector:"Agregar nuevo", |
| 8 | }, options ); | 8 | }, options ); |
| 9 | 9 | ||
| 10 | var selector = this; | 10 | var father = $(this).attr("id"); |
| 11 | selector.append("<option value='' class='mutarselect-add'>" + settings.valueselector + "</option>"); | 11 | $(this).append("<option value='' class='mutarselect-add'>" + settings.valueselector + "</option>"); |
| 12 | 12 | ||
| 13 | $(".mutarselect-add").click(function( event ){ | 13 | $("#" + father + " .mutarselect-add").click(function( event ){ |
| 14 | event.preventDefault(); | 14 | event.preventDefault(); |
| 15 | 15 | ||
| 16 | //alert($(this).parent(".mutarselect").attr("id")); | ||
| 17 | var father = $(this).parent(selector).attr("id"); | ||
| 18 | //var positionReal = $(this).parent(".mutarselect").offset(); | ||
| 19 | // | ||
| 20 | $("#" + father + " .mutarselect-rm" ).remove(); | 16 | $("#" + father + " .mutarselect-rm" ).remove(); |
| 21 | 17 | $(this).parent("#" + father).hide(); | |
| 22 | $(this).parent(".mutarselect").hide(); | 18 | |
| 23 | $("<input type='text' placeholder='nuevo valor' autofocus autocomplete=off' class='mutarselect-input " + father +"' >").insertAfter( $($(this).parent(".mutarselect")) ); | 19 | $("<input type='text' placeholder='nuevo valor' autofocus autocomplete=off' class='mutarselect-input " + father +"' >").insertAfter( $(this).parent(".mutarselect") ); |
| 20 | |||
| 24 | }); | 21 | }); |
| 25 | |||
| 26 | 22 | ||
| 27 | $("form").on("keypress", ".mutarselect-input",function( event ){ | 23 | $("form").on("keypress", ".mutarselect-input",function( event ){ |
| 28 | if ( event.keyCode == '13' ){ | 24 | if ( event.keyCode == '13' ){ |
| 29 | event.preventDefault(); | 25 | event.preventDefault(); |
| 30 | 26 | ||
| 31 | $(this).prev(".mutarselect").prepend("<option selected=\"selected\" value='" + $(this).val() + "' class='mutarselect-rm'>" + $(this).val() + "</option>"); | 27 | $(this).prev(".mutarselect").prepend("<option selected=\"selected\" value='" + $(this).val() + "' class='mutarselect-rm'>" + $(this).val() + "</option>"); |
| 32 | $(this).prev(".mutarselect").show(); | 28 | $(this).prev(".mutarselect").show(); |
| 33 | $(this).remove(); | 29 | $(this).remove(); |
| 34 | 30 | ||
| 35 | } | 31 | } |
| 36 | }); | 32 | }); |
| 37 | 33 | ||
| 38 | //return this; | 34 | //return this; |
| 39 | 35 | ||
| 40 | }; | 36 | }; |
| 41 | }( jQuery )); | 37 | }( jQuery )); |
| 42 | 38 |