<?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>jmblog.jp &#187; user-interface</title>
	<atom:link href="http://jmblog.jp/archives/tag/user-interface/feed" rel="self" type="application/rss+xml" />
	<link>http://jmblog.jp</link>
	<description></description>
	<lastBuildDate>Fri, 12 Aug 2011 05:18:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Styles of &#8220;DELETE&#8221; button on web apps</title>
		<link>http://jmblog.jp/archives/87</link>
		<comments>http://jmblog.jp/archives/87#comments</comments>
		<pubDate>Wed, 02 Aug 2006 18:08:04 +0000</pubDate>
		<dc:creator>Yoshihide</dc:creator>
				<category><![CDATA[web development]]></category>
		<category><![CDATA[user-interface]]></category>

		<guid isPermaLink="false">http://jmblog.jp/archives/87</guid>
		<description><![CDATA[<p>I wrote this entry in English on a whim :p</p>
]]></description>
			<content:encoded><![CDATA[<h2>Classical Style</h2>
<div class="post87-demo">
<form action="#">
<input type="button" id="demo1-delete" name="demo1" class="demo1-button" value="Delete" onclick="confirm('You are about to delete.\n\'Cancel\' to stop, \'OK\' to delete.'); return false;" /></form>
</div>
<p>Showing the confirmation dialog box when clicked. It&#8217;s typical and easy to code: only one JavaScript method</p>
<div class="codecolorer-container text twitlight" style="overflow:auto;white-space:nowrap;border: 1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">confirm()</div></div>
<p>. But it might be used too much. I have been ordered from my client like this. &#8220;Not enough. Show the dialog box twice or thrice.&#8221; No kidding!!</p>
<h2>del.icio.us Style</h2>
<div class="post87-demo">
<div id="demo2-commands"><a href="javascript:void(0);">edit</a> / <a href="javascript:void(0);" id="demo2-delete" onclick="document.getElementById('demo2-commands').style.display='none';document.getElementById('demo2-confirms').style.display='block';">delete</a></div>
<div id="demo2-confirms"><span class="demo2-confirm-msg">delete this post?</span> <a href="javascript:void(0);" id="demo2-no" onclick="document.getElementById('demo2-commands').style.display='block';document.getElementById('demo2-confirms').style.display='none';">no</a> / <a href="javascript:void(0);" id="demo2-yes">yes</a></div>
</div>
<p>Simple and very efficient. I love this style.</p>
<h2>WordPress Admin Style</h2>
<div class="post87-demo">
<form action="#">
<p>
<input type="button" id="demo3-save" name="demo3-save" class="demo3-button" value="Save" />
<input type="button" id="demo3-publish" name="demo3-publish" class="demo3-button" value="Publish" />
<input type="button" id="demo3-delete" name="demo3-delete" class="demo3-del-button" value="Delete" onclick="confirm('You are about to delete.\n\'Cancel\' to stop, \'OK\' to delete.'); return false;" /></p>
</form>
</div>
<p>The background color of the delete button changes to red when mouseover. Nice effect! Users should attend to before clicking the button. Moreover, you could apply it to the existing apps with a few css code. (Although IE does not support :hover on elements other than links &lt;a&gt;, <a href="http://www.xs4all.nl/~peterned/csshover.html" target="_blank">csshover.htc</a> enables pretty much unlimited :hover usage in IE.)</p>
<p>Keep working!</p>
<link rel="stylesheet" href="http://jmblog.jp/wp-content/post87.css" type="text/css" media="screen" />
]]></content:encoded>
			<wfw:commentRss>http://jmblog.jp/archives/87/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

