<?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"
>

<channel>
	<title>ECWorks Blog &#187; 便利ツール</title>
	<atom:link href="http://blog.ecworks.jp/archives/tag/%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.ecworks.jp</link>
	<description>CakePHPを中心としたサイト開発情報をメインに公開。新しもの好きなので時々製品レポートなんかも。</description>
	<lastBuildDate>Sun, 22 Aug 2010 01:28:26 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.ecworks.jp/archives/tag/%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/feed" />
		<item>
		<title>【CakePHP】thickbox(+jQuery)で簡単モーダルダイアログ</title>
		<link>http://blog.ecworks.jp/archives/802</link>
		<comments>http://blog.ecworks.jp/archives/802#comments</comments>
		<pubDate>Thu, 23 Jul 2009 05:50:06 +0000</pubDate>
		<dc:creator>MASA-P</dc:creator>
				<category><![CDATA[CakePHP]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[thickbox]]></category>
		<category><![CDATA[便利ツール]]></category>

		<guid isPermaLink="false">http://blog.ecworks.jp/?p=802</guid>
		<description><![CDATA[フォーム内で画像を選ばせるようなインターフェースが出来ないものかと考えていて、今はやりのlightbox的なモーダルダイアログを実現出来ないかと思い、とりあえず自作してはみたのですがイマイチだったので、なんかこういうツールがないかなと思っていたのですが…
やっぱりちゃんとあるんですね！]]></description>
			<content:encoded><![CDATA[<p>フォーム内で画像を選ばせるようなインターフェースが出来ないものかと考えていて、今はやりのlightbox的なモーダルダイアログを実現出来ないかと思い、とりあえず自作してはみたのですがイマイチだったので、なんかこういうツールがないかなと思っていたのですが…<br />
やっぱりちゃんとあるんですね！</p>
<p>▼ThickBox 3.1<br />
<a href="http://jquery.com/demo/thickbox/" target="_blank">http://jquery.com/demo/thickbox/</a></p>
<p>使い方はとっても簡単！<br />
基本的に、ダウンロードしたJavaScriptファイルやcss、それとjQueryをwebroot内に設置して、表示したいもののURLを指定するだけ！iframe形式も、Ajaxによる埋め込みも可能です！<br />
簡単な秘密は、URLにquery string(?～)でパラメータを渡すため、設定が不要だからだと思います。<br />
この方式は欠点もありますが…　このクエリストリングが実サイトの方にも行ってしまうため、たとえばgoogleなんかを呼び出すことは出来ないです。</p>
<p>本体の設置は省略して、viewにはこんな風に書けばOK!</p>
<pre class="brush: php; ">

&lt;?php echo $html-&gt;css(&#039;thickbox&#039;); ?&gt;
&lt;?php echo $javascript-&gt;link(&#039;jquery&#039;); ?&gt;
&lt;?php echo $javascript-&gt;link(&#039;thickbox&#039;); ?&gt;
&lt;?php //echo $html-&gt;link(&#039;テスト&#039;, array(
&#039;controller&#039; =&gt; &#039;hoge&#039;,
&#039;action&#039; =&gt; &#039;fuga&#039;,
&#039;?&#039; =&gt; array(
&#039;keepThis&#039; =&gt; true, 　　//iframeを使用する場合。Ajaxの場合はこれらを書かない
&#039;TB_iframe&#039; =&gt; true, 　//
&#039;height&#039; =&gt; &#039;70%&#039;,
&#039;width&#039; =&gt; &#039;70%&#039;,
),
1,
2,
3,
), array(
&#039;class&#039; =&gt; &#039;thickbox&#039;,
&#039;title&#039; =&gt; &#039;てすとですよ&#039;,
)); ?&gt;
</pre>
<p>まあ実際に設置してもらうと分かりますが、例えばこんな感じに表示できます。</p>
<div id="attachment_803" class="wp-caption aligncenter" style="width: 310px"><a href="http://blog.ecworks.jp/wp-content/uploads/2009/07/thickbox_demo.jpg"><img class="size-medium wp-image-803 " title="thickbox_demo" src="http://blog.ecworks.jp/wp-content/uploads/2009/07/thickbox_demo-300x204.jpg" alt="thickbox_demo" width="300" height="204" /></a><p class="wp-caption-text">試しにCakePHPサイトを表示してみると…</p></div>
<p>あと気をつけなければならない点として、Ajaxとして使う場合、paginate等で遷移させることが困難になるため、こちらもAjaxで実現しなければなりません。CakePHP1.2は基本的にprototype.jsであり、そのままではjQueryと共存が出来ないため、多少工夫がいるようです(詳しくはググってください)。こういった場合はiframeでやるのが手っ取り早いかもですね。この場合は、値の受け渡し等でiframeをまたぐ必要があり、これもまた工夫が必要ですが…</p>
<p>というわけで、とりあえずlightboxチックなユーザインターフェースをご希望でしたら是非thickboxを！</p>
<p>紹介していただいたkaz_29さん、ありがとうございました。大変に助かりました！</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.ecworks.jp/archives/802/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.ecworks.jp/archives/802" />
	</item>
	</channel>
</rss>
