Guillermo Moguel / jquery-mutable

Download as
Browse Code »

Commit 35d5ac9874224f4cd63dbdd194d99b7a3dea3803

Authored by Guillermo Moguel
1 parent a8763fd27b
Exists in master

actualizado a plugins

Showing 2 changed files with 138 additions and 51 deletions   Show diff stats
... ... @@ -6,9 +6,28 @@
6 6 <script src="js/jquery-1.10.2.js"></script>
7 7 <script src="js/jquery.mutable.js"></script>
8 8 <script>
9   -
  9 + $(document).ready(function(){
10 10  
  11 + $("#id_lengua").mutarSelect({
  12 + valueselector:"Otra",
  13 + });
11 14  
  15 + $("#id_trabajasactual").mutarSelect({
  16 + valueselector:"Otra",
  17 + });
  18 +
  19 + $("#id_trabajasactual").mutarSelect({
  20 + valueselector:"No, ¿Por que?",
  21 + });
  22 +
  23 +
  24 + $("id_cencontrabajo").mutarSelect({
  25 + valueselector:"¿Otra forma, Cual?",
  26 + });
  27 +
  28 +
  29 +
  30 + });
12 31 </script>
13 32 <style>
14 33 body{
... ... @@ -27,23 +46,86 @@
27 46  
28 47 <h1>YOUR COMPONENTS:</h1>
29 48  
30   -<!-- Select -->
31   -<form style="margin-top: 1em;">
32   - <select name="cars" id="cars" class="mutarselect">
33   - <option value="volvo">Volvo</option>
34   - <option value="saab">Saab</option>
35   - <option value="mercedes">Mercedes</option>
36   - <option value="audi">Audi</option>
37   - </select>
38   -
39   - <select name="food" class="mutarselect">
40   - <option value="tacos">Tacos</option>
41   - <option value="tostadas">Tostadas</option>
42   - <option value="tamales">Tamales</option>
43   - </select>
  49 +
  50 +<form id="datos" action="" method="post">
  51 + <table>
  52 + <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>
  54 +<option value="Castellano">Castellano</option>
  55 +<option value="Tseltal">Tseltal</option>
  56 +<option value="Tsotsil">Tsotsil</option>
  57 +<option value="Ch&#39;ol">Ch&#39;ol</option>
  58 +<option value="Tojolabal">Tojolabal</option>
  59 +<option value="Zoque">Zoque</option>
  60 +</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>
  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>
  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>
  64 +<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>
  66 +<option value="True">SI</option>
  67 +<option value="False">NO</option>
  68 +</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">
  70 +<option value="" selected="selected"></option>
  71 +<option value="True">SI</option>
  72 +<option value="False">NO</option>
  73 +</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">
  75 +<option value="" selected="selected"></option>
  76 +<option value="Si">Si</option>
  77 +</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">
  79 +<option value="" selected="selected"></option>
  80 +<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>
  82 +<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>
  84 +<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>
  86 +</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">
  88 +<option value="" selected="selected"></option>
  89 +<option value="Relaciones personales">Relaciones personales</option>
  90 +<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>
  92 +<option value="Entregando Curriculums">Entregando Curriculums</option>
  93 +<option value="Concurso de selección">Concurso de selección</option>
  94 +<option value="Durante el servicio social">Durante el servicio social</option>
  95 +<option value="Ofresiendo mis servicios independientes">Ofresiendo mis servicios independientes</option>
  96 +</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">
  99 +<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>
  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>
  102 +<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>
  105 +
  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">
  107 +<option value="" selected="selected"></option>
  108 +<option value="Tiempo completo">Tiempo completo</option>
  109 +<option value="Medio tiempo">Medio tiempo</option>
  110 +<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>
  120 +
  121 + <table>
  122 +
  123 + <input id="terminar" type="submit" name="terminar" value="Terminar">
  124 +
44 125 </form>
45 126  
46 127  
47 128  
  129 +
48 130 </body>
49 131 </html>
... ...
js/jquery.mutable.js
Diff comments   View file @35d5ac9
1   -function MutarSelect(){
2   -
3   - $(".mutarselect").append("<option value='' class='mutarselect-add'>Agregar nuevo</option>");
  1 +(function ( $ ) {
  2 + $.fn.mutarSelect = function( options ){
  3 +
  4 +
  5 + // This is the easiest way to have default options.
  6 + var settings = $.extend({
  7 + valueselector:"Agregar nuevo",
  8 + }, options );
  9 +
  10 + var selector = this;
  11 + selector.append("<option value='' class='mutarselect-add'>" + settings.valueselector + "</option>");
  12 +
  13 + $(".mutarselect-add").click(function( event ){
  14 + event.preventDefault();
  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();
  21 +
  22 + $(this).parent(".mutarselect").hide();
  23 + $("<input type='text' placeholder='nuevo valor' autofocus autocomplete=off' class='mutarselect-input " + father +"' >").insertAfter( $($(this).parent(".mutarselect")) );
  24 + });
  25 +
  26 +
  27 + $("form").on("keypress", ".mutarselect-input",function( event ){
  28 + if ( event.keyCode == '13' ){
  29 + event.preventDefault();
  30 +
  31 + $(this).prev(".mutarselect").prepend("<option selected=\"selected\" value='" + $(this).val() + "' class='mutarselect-rm'>" + $(this).val() + "</option>");
  32 + $(this).prev(".mutarselect").show();
  33 + $(this).remove();
  34 +
  35 + }
  36 + });
  37 +
  38 + //return this;
  39 +
  40 + };
  41 +}( jQuery ));
4 42  
5   -
6   - $(".mutarselect-add").click(function( event ){
7   - event.preventDefault();
8   -
9   - //alert($(this).parent(".mutarselect").attr("id"));
10   - var father = $(this).parent(".mutarselect").attr("id");
11   - //var positionReal = $(this).parent(".mutarselect").offset();
12   - //
13   - $(this).parent(".mutarselect").hide();
14   - $("<input type='text' placeholder='nuevo valor' autofocus autocomplete=off style='border:none' class='mutarselect-input " + father +"' >").insertAfter( $($(this).parent(".mutarselect")) );
15   -
16   -
17   - });
18   -
19   - $("form").on("keypress", ".mutarselect-input",function( event ){
20   -
21   - if ( event.keyCode == '13' ){
22   - event.preventDefault();
23   -
24   - $(this).prev(".mutarselect").prepend("<option value='" + $(this).val() + "' class='mutarselect-rm'>" + $(this).val() + "</option>");
25   - $(this).prev(".mutarselect").show();
26   - $(this).remove();
27   -
28   - }
29   - });
30   -
31   -}
32   -
33   -
34   -$(document).ready(function(){
35   - MutarSelect();
36   -
37   -});
... ...