WordpressでjQuery - 写真をめざせ！（略して写め）

Home > Website > WordpressでjQuery

2009-11-19 (木)
Website

photo credit: Daniel Morrison

wordpressの固定ページや投稿中に jQuery.js を使おうとしたら、

$ is not a function

と、エラーになって使えませんでした。どうして～？とググったら、こちらでずばり！助かりました～。

WordPress に付属の jquery.js には jQuery.noConflict() が含まれている

$() の代わりに jQuery() を使えと。

jQueryでやりたかったこと

divパネルの開閉（折畳み）＝Continue reading

詳細なコラムが入っているdivコンテナを、見たいときだけ、クリックして表示するようにしたい。

パネルを展開／折りたたむ

がとても参考になりました。

<div class="containerPanel"><!-- containerPanel -->
	<div class="collapsePanelHeader">
<h3>タイトル</h3>
	</div>
	<div class="content" style="display: none">
<p>詳細コラム本文</p>
	</div>
</div><!-- containerPanel -->

<script>
jQuery(function() {
	jQuery('div.collapsePanelHeader').toggle(
		function() {
			jQuery(this).next('div.content').show('slow');
		},
		function() {
			jQuery(this).next('div.content').hide('slow');
		}
	);
});
</script>

目次メニューの自動生成

header要素を自動で目次のメニューにしたかった。

目次を出したい位置に、以下のxhtmlを書いておく。

<div id="toc"></div>

<script>
jQuery(function() {
	var myToc = jQuery("#toc");
	myToc.append('<ul>');
	jQuery(".containerPanel h3").each(function(i) { 
		var current = jQuery(this); 
		current.attr("id", "title" + i); 
		myToc.append("<li><a id='link" + i + "' href='#title" + i + "'>" + current.html() + "</a></li>"); 
	});
	myToc.append('</ul>')
});
</script>

仮想非javascript環境は携帯電話

javascriptが動作しなければ意味ないけど、動作しない状況で意味がある使い方をしようと考えました。

その仮想環境は、今のところ、携帯電話。
パソコン向けに見やすさや使いやすさを求めても、携帯電話では逆に冗長になる部分があります。
Ktai Style (携帯対応プラグイン)のおかげで、ブログが簡単に携帯に対応できてしまうので、なおさら、１つのエントリーの中で、ＰＣと携帯など、異なる環境を意識しないといけない今日この頃。
javascriptが動作するかが、１つの分岐点＝目安として、xhtmlでベースの情報を記述し、jQueryで装飾するって感じがやっとこさっとこ出来るようになってきました。
このブログじゃ、ほとんど使う予定無いけど

しかも、肝腎のクライアントのブログでも、クライアントの意識が低すぎて、まったく評価されてないけど。

このエントリーで動作しているスクリプト。

<script type="text/javascript">
jQuery(function() {
	jQuery('div.expand').text('●詳細を見る')
		.css("textDecoration","underline");
	jQuery('div.collapsePanelHeader').toggle(
		function() {
			jQuery(this).next('div.content').show('slow');
			jQuery(this).children('div.expand').text('詳細を閉じる');

		},
		function() {
			jQuery(this).next('div.content').hide('slow');
			jQuery(this).children('div.close').text('詳細を見る');
		}
	);

	var myToc = jQuery("#toc");
	myToc.append('<ul>');
	jQuery(".containerPanel h3").each(function(i) { 
		var current = jQuery(this); 
		current.attr("id", "title" + i); 
		myToc.append("<li><a id='link" + i + "' href='#title" + i + "'>" + current.html() + "</a></li>"); 
	});
});
</script>

次の記事: 物づくり魂
前の記事: 巨石の回廊の冒険

コメント:0

Trackbacks:0

Trackback URL for this entry: http://nosaku.net/archives/1854/trackback
Listed below are links to weblogs that reference: WordpressでjQuery from 写真をめざせ！（略して写め）

Home > Website > WordpressでjQuery

ヒ twitter　ほろーミー！！

昔の山行記を読んで頂いて、実際にその山を歩いてくださった方がいた。短い返信メールでしたが、その行間に、一緒に歩いたような感動！皮膚に残った記憶が沸き起こって、涙が出る。July 30, 2010 1:49
リヤディレーラーの、シフトワイヤーを調整してみた。むー。イマイチ。July 29, 2010 9:13
なんだか倦怠期。じゃない倦怠感。クーラー病だ～。July 29, 2010 8:18

Follow @nonosaku (388 followers)

クリック！してね Ranking

最近の投稿

最近のコメント

カテゴリー