par
Aureusms » 13 sept. 2012, 21:51
Un peu de Jquery...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
});
$(document).on({
click : function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
}
},'body input[type="button"]');
</SCRIPT>
</head>
<body>
<input type='button
</body>
</html>
L'exemple te montre la création d'un premier bouton lors du chargement de la page. Ensuite quand tu clic sur ce bouton, cela créé un autre bouton. Mais tu peux aussi lancer une autre fonction créé un div, ... lors du clic sur ce bouton. Ex :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
var inputTexte = document.createElement('input');
$(inputTexte).attr({type:'text'}).addClass('inputText');
$(document.body).prepend($(inputTexte));
});
$(document).on('click','body input[type="button"]',houlala);
function houlala (event){
if ($('.inputText').val().length > 0)
{
var div = document.createElement('div');
$(div).prepend('<p>'+$('.inputText').val()+'</p>').css({margin:'15px',height:'100', width:'100', display: 'none', backgroundColor : 'red'});
$(document.body).append($(div));
$(div).show('slow');
$('.inputText').attr({value:''});
}
else
{
alert ('Aucune donnée entrées dans l\'input');
}
}
</SCRIPT>
</head>
<body>
<input type='button
</body>
</html>
Le deuxième exemple te montre qu'en cliquant sur le bouton il y a création d'un div qui prends ce qui a dans l'input. Les exemples sont multiples. Reste ton imagination.
Un peu de Jquery...
[html]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
});
$(document).on({
click : function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
}
},'body input[type="button"]');
</SCRIPT>
</head>
<body>
<input type='button
</body>
</html>[/html]
L'exemple te montre la création d'un premier bouton lors du chargement de la page. Ensuite quand tu clic sur ce bouton, cela créé un autre bouton. Mais tu peux aussi lancer une autre fonction créé un div, ... lors du clic sur ce bouton. Ex :
[html]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
var bouton = document.createElement('input');
$(bouton).attr({type:'button', value:'Cliquez Moi'}).css({margin:'15px',height:'30', width:'100', display: 'block'});
$(document.body).prepend($(bouton));
var inputTexte = document.createElement('input');
$(inputTexte).attr({type:'text'}).addClass('inputText');
$(document.body).prepend($(inputTexte));
});
$(document).on('click','body input[type="button"]',houlala);
function houlala (event){
if ($('.inputText').val().length > 0)
{
var div = document.createElement('div');
$(div).prepend('<p>'+$('.inputText').val()+'</p>').css({margin:'15px',height:'100', width:'100', display: 'none', backgroundColor : 'red'});
$(document.body).append($(div));
$(div).show('slow');
$('.inputText').attr({value:''});
}
else
{
alert ('Aucune donnée entrées dans l\'input');
}
}
</SCRIPT>
</head>
<body>
<input type='button
</body>
</html>[/html]
Le deuxième exemple te montre qu'en cliquant sur le bouton il y a création d'un div qui prends ce qui a dans l'input. Les exemples sont multiples. Reste ton imagination.