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
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 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 </script> 31 </script>
13 <style> 32 <style>
14 body{ 33 body{
15 font: 62.5% "Trebuchet MS", sans-serif; 34 font: 62.5% "Trebuchet MS", sans-serif;
16 margin: 50px; 35 margin: 50px;
17 } 36 }
18 </style> 37 </style>
19 </head> 38 </head>
20 <body> 39 <body>
21 40
22 <h1>Welcome to jQuery Plugin example</h1> 41 <h1>Welcome to jQuery Plugin example</h1>
23 42
24 <div class="ui-widget"> 43 <div class="ui-widget">
25 <p></p> 44 <p></p>
26 </div> 45 </div>
27 46
28 <h1>YOUR COMPONENTS:</h1> 47 <h1>YOUR COMPONENTS:</h1>
29 48
30 <!-- Select --> 49
31 <form style="margin-top: 1em;"> 50 <form id="datos" action="" method="post">
32 <select name="cars" id="cars" class="mutarselect"> 51 <table>
33 <option value="volvo">Volvo</option> 52 <tr><th><label for="id_lengua">Lengua:</label></th><td><select id="id_lengua" required="true" class="form-control mutarselect" name="lengua">
34 <option value="saab">Saab</option> 53 <option value=""></option>
35 <option value="mercedes">Mercedes</option> 54 <option value="Castellano">Castellano</option>
36 <option value="audi">Audi</option> 55 <option value="Tseltal">Tseltal</option>
37 </select> 56 <option value="Tsotsil">Tsotsil</option>
38 57 <option value="Ch&#39;ol">Ch&#39;ol</option>
39 <select name="food" class="mutarselect"> 58 <option value="Tojolabal">Tojolabal</option>
40 <option value="tacos">Tacos</option> 59 <option value="Zoque">Zoque</option>
41 <option value="tostadas">Tostadas</option> 60 </select></td></tr>
42 <option value="tamales">Tamales</option> 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>
43 </select> 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 </form> 125 </form>
45 126
46 127
47 128
129
48 </body> 130 </body>
49 </html> 131 </html>
50 132
js/jquery.mutable.js
Diff comments   View file @35d5ac9
1 function MutarSelect(){ 1 (function ( $ ) {
2 2 $.fn.mutarSelect = function( options ){
3 $(".mutarselect").append("<option value='' class='mutarselect-add'>Agregar nuevo</option>"); 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