<?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>Web活メモ帳 &#187; tab</title>
	<atom:link href="http://blog.verygoodtown.com/tag/tab/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します。</description>
	<lastBuildDate>Thu, 09 Feb 2012 02:01:28 +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>jQuery1.4でタブを動的に作成するチュートリアル</title>
		<link>http://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/</link>
		<comments>http://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/#comments</comments>
		<pubDate>Sun, 31 Jan 2010 07:10:25 +0000</pubDate>
		<dc:creator>linja</dc:creator>
				<category><![CDATA[php]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[動的]]></category>

		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=1454</guid>
		<description><![CDATA[
jQueryでタブを動的に作成するチュートリアルDynamic tabs using jQuery &#8211; why and how to create it のご紹介。
jQueryでiGoogleのように自由 [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://blog.verygoodtown.com/wordpress/wp-content/uploads/dynamic_tabs.png" alt="dynamic_tabs" title="dynamic_tabs" width="600" height="160" class="alignnone size-full wp-image-1455" /><br />
jQueryでタブを動的に作成するチュートリアル<a href="http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx" target="_blank">Dynamic tabs using jQuery &#8211; why and how to create it </a>のご紹介。</p>
<p>jQueryでiGoogleのように自由にタブの追加や削除を行う事が可能になります。<br />
実際の<a href="http://www.jankoatwarpspeed.com/examples/dynamic_tabs/" target="_blank">デモ</a>を見ていただくと動きがわかると思います。</p>
<p>以下のようなhtmlとJavaScriptを用意するだけで動作するようです。</p>
<pre class="brush:xml;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
        <!-- Tabs go here -->
    </ul>
<div id="content">
        <!-- Tab content goes here -->
    </div>
</div>
</pre>
<pre class="brush:js;">
&lt;script&gt;
$("#documents a").click(function() {
    addTab($(this));
});
function addTab(link) {
    // hide other tabs
    $("#tabs li").removeClass("current");
    $("#content p").hide();

    // add new tab and related content
    $("#tabs").append("
<li class='current'><a class='tab' id='" +
        $(link).attr("rel") + "' href='#'>" + $(link).html() +
        "</a><a href='#' class='remove'>x</a></li>

");
    $("#content").append("
<p id='" + $(link).attr("rel") + "_content'>" +
        $(link).attr("title") + "

");
    // set the newly added tab as curren
    $("#" + $(link).attr("rel") + "_content").show();
}
&lt;/script&gt;
</pre>
<p>ダイナミックなページを作成したい方は、使ってみてはいかがでしょうか。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.verygoodtown.com/2010/01/dynamic-tab-create-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

