<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>LR Web - Le blog de Loïc Ridel &#187; Tutos &#8211; Javascript</title>
	<atom:link href="http://www.lr-web.net/category/tutos-javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.lr-web.net</link>
	<description></description>
	<lastBuildDate>Wed, 04 May 2011 19:55:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Javascript &#8211; Les boîtes de dialogue</title>
		<link>http://www.lr-web.net/javascript-les-boites-de-dialogue/26</link>
		<comments>http://www.lr-web.net/javascript-les-boites-de-dialogue/26#comments</comments>
		<pubDate>Tue, 28 Nov 2006 12:04:09 +0000</pubDate>
		<dc:creator>lolo</dc:creator>
				<category><![CDATA[Tutos - Javascript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Tutos]]></category>

		<guid isPermaLink="false">http://www.lr-web.net/wordpress/?p=26</guid>
		<description><![CDATA[Voici un petit rappel sur les boîtes de dialogue : alert() La méthode alert() n&#8217;est pas très évoluée : elle affiche une boîte avec un texte et un seul bouton : &#171;&#160;OK&#160;&#187; La syntaxe : ?View Code JAVASCRIPT1 &#60;script type=&#34;text/javascript&#34;&#62;&#60;!--mce:0--&#62;&#60;/script&#62; confirm() La méthode confirm() est un peu plus évolué que la méthode alert(), elle nous [...]]]></description>
			<content:encoded><![CDATA[<p>Voici un petit rappel sur les boîtes de dialogue :</p>
<p><strong>alert()</strong><br />
La méthode alert() n&#8217;est pas très évoluée : elle affiche une boîte avec un texte et un seul bouton : &laquo;&nbsp;OK&nbsp;&raquo;</p>
<p><img src="/images/javascript/alert.gif" alt="" /></p>
<p>La syntaxe :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p26code6'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p266"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p26code6"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;!--</span>mce<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">--&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong></strong></p>
<p><strong>confirm()</strong><br />
La méthode confirm() est un peu plus évolué que la méthode alert(), elle nous laisse un choix ! Evidement 2 boutons : &laquo;&nbsp;OK&nbsp;&raquo; et &laquo;&nbsp;Annuler&nbsp;&raquo; afin de faire ce choix ^^</p>
<p><img src="/images/javascript/confirm.gif" alt="" /></p>
<p>La syntaxe :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p26code7'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p267"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p26code7"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;!--</span>mce<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">--&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong>Quelques astuces :</strong><br />
Pour passer une ligne dans le texte de la boîte de dialogue, il suffit d&#8217;ajouter : <em>\n</em></p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p26code8'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p268"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p26code8"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;!--</span>mce<span style="color: #339933;">:</span><span style="color: #CC0000;">2</span><span style="color: #339933;">--&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong>L&#8217;intérêt des méthodes prompt() et confirm() est réel.</strong></p>
<p><strong>Exemple 1 :</strong><br />
Dans l&#8217;administration d&#8217;un site, vous avez la possibilité de gérer des utilisateurs. Le fait de cliquer sur &laquo;&nbsp;supprimer l&#8217;utilisateur&nbsp;&raquo; déclenche alors une fonction javascript avec l&#8217;affichage d&#8217;une boîte de dialogue <strong>confirm()</strong> demandant la confirmation avant de supprimer le membre et redirige vers la page de traitements :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p26code9'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p269"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p26code9"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;!--</span>mce<span style="color: #339933;">:</span><span style="color: #CC0000;">3</span><span style="color: #339933;">--&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong>Exemple 2 :</strong><br />
Toujours dans cette même administration, vous avez la possibilité de modifier le nom de ce membre. En cliquant su le nom du membre, on ouvre une boîte de dialogue <strong>prompt()</strong> comportant le nom actuel dans le champ de saisie :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p26code10'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p2610"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p26code10"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;!--</span>mce<span style="color: #339933;">:</span><span style="color: #CC0000;">4</span><span style="color: #339933;">--&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong>Une dernière précision : javascript étant interprété par le navigateur, il est impossible de modifier l&#8217;apparence des boîtes de dialogue.</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.lr-web.net/javascript-les-boites-de-dialogue/26/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

