jQuery :: Lunatic-Code

何でlabel for使えないんですかね、この子は。
しかもラジオボタンもチェックボックスも微妙にちっこくないすか？
押しづれー！！
jQueryでごにょごにょしますよ。

$(function(){
	$('label').click(function(e){
		var elm=$('#'+$(this).attr('for'));
		if(elm.attr('checked')=='checked'){
			elm.removeAttr('checked');
		}else{
			elm.attr('checked','checked')
		}
		return false;
	});
	$(':checkbox,:radio').click(function(e){
		e.stopPropagation();
	});
});

なんか2.8に自動アップグレードすると不味いっぽいですね(‘A｀)

さて、先日のThickBoxの件はwordpress本体とはまったく関係なかったようです。
問題の箇所はthickbox.jsの80行目
TB_TempArray = jQuery(“a[@rel="+imageGroup+"]“).get();
そういや属性フィルタに@って必要なくなったような・・・と思いつき、@を消してみたらビンゴ。

グループ化してない場合は、ここのロジック通らないので普通に表示できますね、と。
wordpress2.8に搭載されているThickBoxはここの部分がきちんと直してあった。
thickbox本家版のはまだ@が付いてますね・・・

ぼくのはThickBoxのデザインを変えていたので、付属のThickBox使ってないのが裏目に出たようだ。

これで1.3はえーうひょー出来る！

うーむ・・・
同梱されてるjQueryのバージョンが1.3.2になったせいか、
thickboxが正常に動作しなくなってしまった。

こいつは困ったね。
ローディング画像までは出るのだが、
肝心のリンク先の画像が出ない。
他のサイトで使ったときは1.3.2でもちゃんと動いていたのになぁ・・・。

とりあえず、ｊQueryだけ1.2.6に戻しておこう

以前input buttonを画像にする、とかやったんですが、
input type="file"も画像化したいなぁ、と。
んが、どうやら一筋縄じゃいかなさそうだ。
というのも、レンダリングエンジンによって、
デフォルトの表示方法が違う。

IE(Trident)やFirefox(Gecko)、Opera(Presto)だと、左側にテキストエリアっぽいのがあって、その右にボタンがある。
が、googleChromeやSafari(WebKit)だと、ボタンがあってその右側にテキストだけが表示される。
まぁ、この時点で、input:fileをどうにかするよりも、代替コンテンツで対処するしかないのが明白なわけで。

問題点を挙げると・・・
・CSSでwidthやheightを指定しても、ボタンとテキスト欄は個別に幅の指定や比率の指定も出来ない。
・また、Firefoxはcssの幅を無視する。sizeに値を入れてやらねば・・・。
・Firefox、googleChrome、Safariはテキストをクリックしてもファイル選択ダイアログを出す。
・IEとOperaはボタンを押さないとダイアログが出ない。
・input:fileに対し、クリックイベントを発行しても、IEしかダイアログを表示しない。

ﾏﾝﾄﾞｸｾ(‘A｀;)
テキストエリアぽいところクリックしてもダイアログでない＋クリックイベントも受け取らないので、
Operaだけは残念ながら除外せざるを得ない。
(続きを読む…)

wordpressのフォーラムに出てた問題。
この場合だとカテゴリー。
親子階層でリストが入れ子になってるものを、
親カテゴリーと子カテゴリーを別々のドロップダウンメニューにして、
リスト構造から親子関係を持つドロップダウンを自動生成できれば、
何か他にも使えそう、ということで、勉強がてら作ってみる。

(続きを読む…)

おお、管理画面がガッツリ変わってるな。
シンプルでいい感じ。

サブメニューがいちいちページ移動しなくても、
左メニューから直接飛べるようになったのがいい。
若干モッサリ動作だけど(‘A｀)

プラグイン関係もとりあえず一通りは対応してたのでOK。
ただし、ダッシュボードをはずすremove_the_dashboardだけは、
管理画面に入ると無限ループしてしまうようなので、
FTPから削除。
あとはOKかな。

さて、今までjQueryは$で書いていたんだけど、
wp-includeのものは$の代わりにjqueryで呼び出すようになってて、
管理画面とブログページで同じものが使えないのが不便。
ってことで、自作のスクリプトも$からjqueryに改めた。

さて、これでしばらく様子見ますかね・・・

サイトマップを生成するDagon Design Sitemap Generatorというプラグインがどうもうまく動いてなさげ。
2ページ以降への移動ができない。
困った。
とりあえず外しておこう・・・

グローバルメニューの画像置き換えのお話。
通常、普通に画像を貼ってjavascriptでロールオーバーさせたり、
あるいはCSSの背景画像で実現する。
画像を貼る場合、HTMLがゴチャッとしてイマイチかっちょ悪い。
cssも画像off時や印刷時に見えなくなる弱点がある。
シンプルなHTMLとして

<ul id="menu">
	<li id="menu1"><a href="./">ホーム</a></li>
	<li id="menu2"><a href="./dir2/">メニュー2</a></li>
	<li id="menu3"><a href="./dir3/">メニュー3</a></li>
	<li id="menu4"><a href="./dir4/">メニュー4</a></li>
	<li id="menu5"><a href="./dir5/">メニュー5</a></li>
</ul>

を、javascriptで

<ul id="menu">
	<li id="menu1"><a class="active" href="./"><img alt="ホーム" src="/img/menu1_on.jpg" height="25" width="82"></a></li>
	<li id="menu2"><a href="./dir2/"><img alt="メニュー2" src="/img/menu2.jpg" height="25" width="82"></a></li>
	<li id="menu3"><a href="./dir3/"><img alt="メニュー3" src="/img/menu3.jpg" height="25" width="82"></a></li>
	<li id="menu4"><a href="./dir4/"><img alt="メニュー4" src="/img/menu4.jpg" height="25" width="82"></a></li>
	<li id="menu5"><a href="./dir5/"><img alt="メニュー5" src="/img/menu5.jpg" height="25" width="82"></a></li>
</ul>

に書き換える。
もちろんマウスオーバーやアクティブ時のロールオーバーも実装する。
サンプル
スクリプト
あ、ｊQuery使ってます。

(続きを読む…)