jQuery Mobileでページ遷移時のボタンの色を変える。

jQuery Mobileを利用して制作したサイト(単一のHTMLに複数のページを設置)で、あるボタンをクリック(タップ)すると該当のidを探してコンテンツをロードするまでに一瞬の間が空く。この間のボタンの色がページのデザインと合わなかったため変更することにした。

jQuery Mobileの場合、ページ構築中にclass等のタグをいろいろと追加したりするので何か特殊なものがあるかと思ったけれど、何のことはなく.ui-btn-activeだけだった。

よって、jquery.mobile-x.x.x.cssの下記該当部分を書き換えるか、別の外部cssで上書きすることで実現できた。

.ui-btn-active {
	/*オリジナル(一部抜粋)
	border: 1px solid #2373A5;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#5393C5),to(#6FACD5));
	text-shadow: 0 1px 1px #3373A5;
	*/

	border: 1px solid #aaaaaa;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#eeeeee),to(#cccccc));
	text-shadow: 0 1px 1px #cccccc;
}

jQuery Mobileはなんだかんだと便利だなあ。

jQuery ui datepickerで入力可能な日付の制限をする

jQuery UIのdatepickerで、入力可能な日付の制限を別に入力された値によって変化させる方法を調べてみた。最初は、選択ボックスの更新時に

$( "#datepicker" ).datepicker({ minDate: '-1m', maxDate: '+1m' });

などと単純に再呼び出しをすれば良いかと思っていたけれど、それでは更新されなかった。そこでマニュアルをよく読んでみると、次の記述の通りsetterのような使い方をしないといけなかった様子(よく読んでいなかっただけ・・・)。

Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

結果、無事に更新が出来るようになった。そのサンプルはこちら。

2012年1月10日追記

onCloseを利用して日付の選択時にチェックを行うように変更した。例えば、土日のみ/ある特定日のみなど。ある一定期間内での入力制限はできても、同じ事を個別にはできなさそうなので、取りあえずはこんなふうにするしかないのかなあ。

また、ソースコードは次の通り。

[php]




日付取得サンプル

jQuery ui datepickerで入力可能な日付の制限をする


プラン選択
日程選択



[/php]

lightboxで「next」や「prev」ボタンを常に表示する

lightboxでは、2枚以上写真がある場合には写真の上にマウスを乗せたときに「next」「prev」のボタンが出ますが、ぱっと見たときに気がつかない場合も多いです(というご指摘をお客様からいただきました)。で、これを常に出るように改変してみました。

改変するファイルはlightbox.cssの17行目付近の記述。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

上記2行から「hover」属性を取ります。

#prevLink, #prevLink:visited { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink, #nextLink:visited { background: url(../images/nextlabel.gif) right 15% no-repeat; }

3枚以上の時には、写真の両側に「next」「prev」と表示されるのはちょっと・・・とは思いますが。

lightboxをクリッカブルマップで利用する。

lightboxをクリッカブルマップで利用してみる。クリッカブルマップの場合はa要素の代わりにarea要素に対してrelやtitleを設定する。が、こうした場合にFireFoxでは背景が黒く半透明にはなるのだけれど、肝心の画像が表示されなくなってしまう。IE6や7では問題ないのだけれど。

lightbox.jsを調べてみると、190行目あたりで、area要素のrel属性を取得し、それを行目のstartクラスへ渡している様子。しかしFireFoxの場合、rel要素の取得時にはその取得した値はtargetに入っているのだけれど、startクラスへ値が渡されたときにはその引数はUndefinedとなっており、結果的にrel属性が未定義扱いとなるみたい。いろいろと試行錯誤をしてみたところ、rel属性をlang属性に変更するとうまく動く。その理由については時間のある時に調べるとして、ときにその方法だけメモ。

まず、下記のtarget変数に値を代入する式において、relをlangに変更する(2カ所)。

document.observe('click', (function(event){
var target = event.findElement('a[lang^=lightbox]') || event.findElement('area[lang^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));

続けて、rel属性(変更後はlang属性)の属性値判定部分もrelからlangへ変更する(3カ所)。

if ((imageLink.lang == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][lang="' + imageLink.lang + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

最後に、html内のarea要素に記述するrel属性をlangに置き換える。

<area shape="rect" coords="194,143,227,168" href="img/image.jpg" lang="lightbox[cat01]"  title="title"/>

とりあえず動いたけれど、いいのかなあ。。。

2010/08/03 文言の修正、行番号の追加

Google AJAX Feed APIを利用してRSSを表示する

適当に組んでみた。

[PHP]


[/PHP]

htmlはこのように

[PHP]

feed読み込みテスト

feed1


[/PHP]

ついでにSyntaxHighlighterも入れてみた。見やすいかも。

※jsファイルの一番後ろにコードが勝手に挿入される。何だろ?