<?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/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
xmlns:rawvoice="http://www.rawvoice.com/rawvoiceRssModule/"
>

<channel>
	<title>TMJ style &#187; Ajax</title>
	<atom:link href="http://mamok.com/tag/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://mamok.com</link>
	<description>Music, Web, Mac, iPhone, 三十路男の思いつき・・</description>
	<lastBuildDate>Fri, 07 Oct 2011 18:48:04 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://mamok.com/tag/ajax/feed/" />
<!-- podcast_generator="Blubrry PowerPress/2.0.4" -->
	<itunes:summary>Music, Web, Mac, iPhone, 三十路男の思いつき・・</itunes:summary>
	<itunes:author>TMJ style</itunes:author>
	<itunes:explicit>no</itunes:explicit>
	<itunes:image href="http://mamok.com/wp-content/plugins/powerpress/itunes_default.jpg" />
	<itunes:subtitle>Music, Web, Mac, iPhone, 三十路男の思いつき・・</itunes:subtitle>
	<image>
		<title>TMJ style &#187; Ajax</title>
		<url>http://mamok.com/wp-content/plugins/powerpress/rss_default.jpg</url>
		<link>http://mamok.com</link>
	</image>
		<item>
		<title>とても軽量なツールチップ表示スクリプト</title>
		<link>http://mamok.com/2008/07/08/418/</link>
		<comments>http://mamok.com/2008/07/08/418/#comments</comments>
		<pubDate>Tue, 08 Jul 2008 04:15:44 +0000</pubDate>
		<dc:creator>mamo</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[クール]]></category>
		<category><![CDATA[便利]]></category>

		<guid isPermaLink="false">http://mamok.com/2008/07/08/418/</guid>
		<description><![CDATA[ちょっとした情報を付加してあげるのに便利な、ツールチップ。 「title属性があるじゃないか！」と思うのですが、表示は少なからずブラウザ解釈に依存しているようです。 ※Alt属性は代替テキスト用なので、そもそもの用途が違 [...]]]></description>
			<content:encoded><![CDATA[<p>ちょっとした情報を付加してあげるのに便利な、ツールチップ。<br />
「title属性があるじゃないか！」と思うのですが、表示は少なからずブラウザ解釈に依存しているようです。<br />
※Alt属性は代替テキスト用なので、そもそもの用途が違います。</p>
<p>ちょっと必要になったので調べてみました。<br />
が、下記にリスト化されるぐらいあるんで・・・さてどれにするか・・</p>
<p><a href="http://www.kollermedia.at/archive/2007/04/09/list-of-25-javascriptajax-css-tooltip-scripts/" target="_blank">List of 25 Javascript/Ajax &#038; CSS Tooltip Scripts</a></p>
<p><span id="more-418"></span><br />
まずは上記リストの中から。<br />
####################################################<br />
■<a href="http://qrayg.com/learn/code/qtip" target="_blank">qTip</p>
<p>http://qrayg.com/learn/code/qtip</a></p>
<p><img src='http://mamok.com/wp-images/qtip.gif' alt='qTip - CSS Tooltips' /><br />
こんな感じで、CSS らしくスパッ！っと表示されます。<br />
スクリプトサイズも2KBということで軽量、記述法も「aタグのtitle属性」に内容を書く形で、とても良いです。</p>
<p>####################################################<br />
■<a href="http://psacake.com/web/jl.asp" target="_blank">Pure CSS Tooltips</p>
<p>http://psacake.com/web/jl.asp</a></p>
<p><img src='http://mamok.com/wp-images/css-tooltop.gif' alt='Pure CSS Tooltips' /><br />
qTipに似ていますが、リンク文字の後にタグでツールチップ内容を記述する形の記述法で、なんか慣れない気がします・・。<br />
こちらもCSSメインですが、JSも併用してますね。</p>
<p>次は、リスト外から見つけた最後の本命です！<br />
####################################################<br />
■<a href="http://www.leigeber.com/2008/06/javascript-tooltip/" target="_blank">Fading JavaScript Tooltips 2kb</p>
<p>http://www.leigeber.com/2008/06/javascript-tooltip/</a></p>
<p>こちらもqTipと同じくスクリプトサイズ2KB！なのに、上記の噴出しがフェードインフェードアウトしてくれちゃいます！</p>
<p><img src='http://mamok.com/wp-images/tooltip.gif' alt='Fading JavaScript Tooltips 2kb' /></p>
<p>このようなものは「prototype.js」+「script.aculo.us」で実現するのが今風ですが、この2KBのスクリプトでも表現力は全く劣りません。<br />
これは良い♪<br />
記述法は「onmouseover &#038; onmouseout」で記述する必要があり、ちょっと今風?ではないですが、とても魅力的なスクリプトです。</p>
<p>特に、「スクリプトが軽い」→「スクリプト量が少ない」→「わかりやすい」→「カスタマイズしやすい」となる訳で、２KBのフェードツールチップのこれが大本命。</p>
<p>phpspot開発日誌でも簡単に紹介されています。<br />
<a href="http://phpspot.org/blog/archives/2008/06/2kbjs.html" target="_blank">アニメーションする2KBの軽量ツールチップJS:phpspot開発日誌</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mamok.com/2008/07/08/418/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://mamok.com/2008/07/08/418/" />
	</item>
		<item>
		<title>クールなフォームチェックAjaxライブラリ「Really easy field validation」</title>
		<link>http://mamok.com/2007/03/30/308/</link>
		<comments>http://mamok.com/2007/03/30/308/#comments</comments>
		<pubDate>Fri, 30 Mar 2007 05:59:21 +0000</pubDate>
		<dc:creator>mamo</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[クール]]></category>
		<category><![CDATA[プログラム]]></category>

		<guid isPermaLink="false">http://mamok.com/2007/03/30/308/</guid>
		<description><![CDATA[Ajaxを使った「入力フォームのチェックスクリプト」。 PHPやjavascriptでダイアログ出すんじゃ、スマートじゃない。そこでAjax。 最近では様々開発されているので、うれしい限りなのですが、「結局どれがよいのか [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" target="_blank"><img src="http://mamok.com/wp-images/dexagogo.gif" class="photo2" alt="DEXAGOGO" /></a>Ajaxを使った「入力フォームのチェックスクリプト」。<br />
PHPやjavascriptでダイアログ出すんじゃ、スマートじゃない。そこでAjax。<br />
最近では様々開発されているので、うれしい限りなのですが、「結局どれがよいのか」。</p>
<p>「<a href="http://phpspot.org/blog/" target="_blank">phpspot開発日誌</a>」さんでも複数、紹介されています。これを参考に自分の備忘録として・・。<br />
<br style="clear: both" /><br />
phpspot開発日誌：　JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ<br />
<a href="http://phpspot.org/blog/archives/2007/03/javascript_43.html" target="_blank">http://phpspot.org/blog/archives/2007/03/javascript_43.html</a></p>
<p>この記事のように、下記の「Really easy field validation」は、使ってみた結果、ホントすばらしいです！</p>
<p>Really easy field validation * Dexagogo<br />
<a href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" target="_blank">http://tetlaw.id.au/view/javascript/really-easy-field-validation</a></p>
<p>デモサイトで体験してみてください。<br />
<a href="http://tetlaw.id.au/upload/dev/validation/" target="_blank" class="broken_link">http://tetlaw.id.au/upload/dev/validation/</a></p>
<p><span id="more-308"></span><br />
このように titleタグでメッセージの日本語化の出来ます。この仕様がスバラシイ！！<br />
<img src="http://mamok.com/wp-images/valid1.gif" class="photo2" alt="入力を促す表示" /><br />
<br style="clear: both" /><br />
■要点のみの設置法<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
1)「scriptaculous」フォルダ、「validation.js」をアップロード。、（必要なら「style.css」も。）</p>
<p>2)以下をヘッダに追加。(必要ならCSSもね。)</p>
<pre class="brush: jscript; title: ; notranslate"> &lt;script src=&quot;prototype.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;validation.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;scriptaculous/src/effects.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p>3)各inputタグに、class=&#8221;required validate-number&#8221;　などのクラス属性を追加。（この場合、必須項目で数字のみ可。）<br />
以下、設定値バリエーション。</p>
<blockquote><p>required (必須項目)<br />
validate-number (数字のみ可)<br />
validate-digits (数値のみ可)<br />
validate-alpha (アルファベットのみ可)<br />
validate-alphanum (アルファベットと数字のみ可)<br />
validate-date (日付のみ可)<br />
validate-email（メールアドレスのみ可)<br />
validate-url (URLのみ可）<br />
validate-selection（リストメニューやセレクトボックスから選択）<br />
validate-one-required（チェックボックスやラジオボタンで1つ以上選択）</p></blockquote>
<p>4)デフォルト英語のメッセージを変更したいので、各inputタグに、title=&#8221;入力してください&#8221;　などの警告メッセージ文をtitle属性で追加。</p>
<p>5)form閉じタグ後に以下をを記述。</p>
<pre class="brush: jscript; title: ; notranslate">&lt;script type=&quot;text/javascript&quot;&gt;
new Validation('form-id',{useTitles:true});
//または new Validation(document.forms[0],{useTitles:true});
&lt;/script&gt;</pre>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
これでお好みの警告メッセージが、input項目の下にフェードインで登場してくれます。</p>
<p>あ～スバラシか、スバラシか。</p>
]]></content:encoded>
			<wfw:commentRss>http://mamok.com/2007/03/30/308/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://mamok.com/2007/03/30/308/" />
	</item>
	</channel>
</rss>

