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　ほろーミー！！

豆まき完了！February 3, 2012 8:37
指のオレンジ http://t.co/GBgajqTRFebruary 2, 2012 5:47
写めったよ！: 夜明ける #photo #photojp http://t.co/qfkdZfUeJanuary 30, 2012 11:42

Follow @nonosaku (461 followers)

クリック！してね Ranking

最近の投稿

最近のコメント

カテゴリー

Calendar

アーカイブ

ブログ内検索

メタ情報

RSS Feed

これ！おすすめ

« 2012 年 2月 »
月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

Counter

465664 Visitors

Return to page top