1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
| $(document).ready(function(){
//définition des variables
var $label = $('#btn_crea #btn_label'),
$crea = $('#btn_crea'),
$ok = $('.ok'),
$cancel = $('.cancel'),
$help = $('#crea_form #help'),
$crea_btn = $('#btn_crea button'),
$txt = $('#btn_crea #btn_txt'),
$btn = $('#btn_crea #btn_btn'),
$val_label = $('#label input'),
$val_txt = $('#txt input'),
$val_btn = $('#btn input'),
val_label = '',
val_txt = '',
val_btn = '',
Focus,
sel_val = '';
//Affichages des zones de champs correspond aux boutons de la zone
//de création
$crea_btn.on('click',function(){ //écoute du click
$crea_btn.prop('disable',true);
var id = this.id; //récupération de l'id de l'élément cliqué
//désactivation des bouton de créations
//Actions en fonction de l'élément clické
if (id == 'btn_label'){
$crea.css('border-bottom','2px solid black');
$help.load("btn_label.txt");
$('#label').fadeIn('slow');
$help.fadeIn('slow');
}
else if (id == 'btn_txt'){
$crea.css('border-bottom','2px solid black');
$help.load("btn_txt.txt");
$('#txt').fadeIn('slow');
$help.fadeIn('slow');
}
else if (id == 'btn_btn'){
$crea.css('border-bottom','2px solid black');
$help.load("btn_btn.txt");
$('#btn').fadeIn('slow');
$help.fadeIn('slow');
}
});
$ok.on('click',function(){ //écoute de l'évènement de click
var ok = $(this).parent().attr("id"); // récupération de l'id de l'élément parent du bouton "OK"
//actions effectuées suite au click sur le bouton et en fonction de la valeur de l'id
if ( ok == 'label'){
val_label = $val_label.val();
sel_val = '"'+val_label+'"';
//alert(val_label);
$('#form').append('<div id="'+val_label+'"><span>'+val_label+'</span></div>');
$('#help').remove();
$('#help').fadeOut('slow');
$('#label').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
else if (ok == 'txt'){
val_txt = $val_txt.val();
$('#form [id="'+val_label+'"]').append('<input id="'+val_txt+'" type="texte" >');
$('#help').fadeOut('slow');
$('#txt').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
else if (ok == 'btn'){
val_btn = $val_btn.val();
$('#form').append('<button>'+val_btn+'</button>');
$('#help').fadeOut('slow');
$('#btn').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
});
$cancel.on('click',function(){
var cancel = $(this).parent().attr("id");
if ( cancel == 'label'){
val_label = $val_label.val('');
$('#help').fadeOut('slow');
$('#label').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
else if (cancel == 'txt'){
val_txt = $val_txt.val('');
$('#help').fadeOut('slow');
$('#txt').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
else if (cancel == 'btn'){
val_btn = $val_btn.val('');
$('#help').fadeOut('slow');
$('#btn').fadeOut('slow',function(){
$crea.css('border-bottom','');
});
}
});
}); |
Partager