Tag/design
jQueryでaタグをサムネイルにするプラグイン書いたよ。
abdeluxe な方にお願いされて、またまた調子に乗りました。
今回はaタグをサムネイルにする jQuery の野良プラグイン書いたよ 
こんな感じにするとaタグがサムネイル画像になる。（実際はもうちょっとメンドクサイ）
// コレがデフォルト
$('a').asThumbnail();
サイズもちゃんと指定出来るよ。当たり前だけども。
// 引数でオプションを指定
$('a').asThumbnail({
width: 100,
height: 100
});
で、どうやって画像のパスを指定するかと言うと、 ぶっちゃけaタグの href 属性を正規表現で抜いてきて、 それを CSS で背景に指定してあげるだけ。 使い勝手が良いんだか悪いんだか分からんですが、 とりあえずソースを晒しておきます。
/**
* show element(s) as thumbnail
*
* @author Takanobu Izukawa
* @version 0.0.1
*/
jQuery.fn.extend({
/**
* asThumbnail
*
* @param options Object that contains some parameter.
* width: specified element width.
* default value is 170px.
* height: specified element height.
* default value is 170px.
* pattern: specified retrievable regex pattern.
* default value is `abdeluxe` custom.
* replacement: specified replace format.
* default value is `abdeluxe` custom.
* @return jQuery.
*/
asThumbnail: function (options)
{
// fix options.
options = options || {};
// declared default options.
var defaultOptions = {
'width': 170,
'height': 170,
'pattern': /^.*\/(\d+)\.html$/,
'replacement': '/blog/entryimg/$1.jpg'
};
// merge options.
options = jQuery.extend({}, defaultOptions, options);
// execute effect to each element(s).
return this.filter('a')
.each(function()
{
// retrieve image url.
var imageURL = this.href.replace(options.pattern,
options.replacement);
// attach new css.
jQuery(this).css({
'display': 'block',
'width': options.width + 'px', // should be width method instead?
'height': options.height + 'px', // should be height method instead?
'background-image': 'url(' + imageURL + ')',
'background-repeat': 'no-repeat',
'background-position': '50% 50%'
}).empty();
}).end();
}
});
たぶん、画像の position とかは指定出来た方が良いんだろうなぁ。
まぁ、そこらへんは勢いで作ったのでご愛嬌 
ツッコミ大歓迎でございます！
- Posted at:
- 2008/03/19 03:02:49
- 2 Comments
- 2 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2008/03/19/make-anchor2thumbnail-plugin-on-jquery/trackback/
Safariで検索フォームをちょっと素敵に。
Safari でちょっとした小ネタを発見。
HTMLのinputで、typeを search にすると、 角丸のいい感じのテキストエリアに変身してくれるっす。
さらに results と autosave を追加すると、 履歴をちゃんと保持してくれるようになる。 results で履歴を保持する数を指定し、 autosave で保存するユニークなID?を指定するみたい。 実際にドコに保存されるかまでは未調査っす。
こんな感じに書くと、
<input type="search"
results="10"
autosave="example.com">
こんな感じになるよ。
Safari (ってか Webkit ？)でしか意味ないけど、 こういうのちょっと素敵。 Firebugで見てもエラー吐かなかったので、 とりあえず良し。
- Posted at:
- 2007/11/04 23:55:38
- 0 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/11/04/tips-for-search-form-on-safari/trackback/
デザイン変えてみたよ。
デザイン変えてみたよ。 IE6で崩れる事を確認してるけど、もはや度外視すると決めました。
気が向けば対応するかもだけど。
これからも宜しくお願い致しますー。
- Posted at:
- 2007/09/15 00:49:47
- 4 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/09/15/change-new-design/trackback/
デザイナーのためのDjango
自分で実際使ってて思う部分も大きい。
仕事ではPHPを書いているのですが、今まで使ってきたframeworkは当然ながらプログラマがいかにスムーズに構築出来るか？というところにフォーカスされていて、自然に「最低限これだけは知っていないとダメ。」という敷居が高くなっていると思う。
その事を認識する事は殆ど無かったけど、無かっただけに Django の直感的な作りにはホントに驚いた。どっかの記事で「黒魔術を取り払え！」的なものを見かけたけど、ホントその通りだと思った。
「お前は言われた通りに書いてりゃいいんだ！」なんて言う事はほとんど無く、「これでなんで動くの？」って疑問を殆ど持たなくて良い。これって結構大事だと思う。
個人的に Django 素敵♪と思った所としては、
- 必要以上にオブジェクト指向しない。
- 不明な挙動をしない。
- URLのマッピングが素直。
- テンプレートエンジンが強力！
- デフォルトの管理画面がモチベーションが上がる仕様。
まだまだ知らない機能とかも多いものの、デザイナーの方が Django を使いだしたら、結構凄い事になるんじゃないの？なんて思ったりする。
なんて企画もあったりなかったりだそうなので、興味があるデザイナーの方は是非とも調べてみてください。
- Posted at:
- 2007/05/27 22:08:31
- 4 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/05/27/django-is-not-for-only-programmers/trackback/
