Reorder and filter items with a nice shuffling animation. Ajaxian ≫ Quicksand: transition and filtering effectにおいてjQueryプラグインのひとつjQuery Quicksand pluginが紹介されている。ul要素で用意したいくつかのリストをシームレスに入れ替えるためのプラグインで、スムーズなアニメーションを簡単に実装できる。 jQuery Quicksand pluginのトップページがQuicksandのサンプルにもなっており、上部にあるボタンを押すことでアイコンがスムーズに移動することを確認できる。下記の3つの図がそれぞれシームレスにアニメーションしながら入れ替わるように動作する。ソースコードを見るとアイコンはul要素で用意されており、それをQuicksand経由でアニ
一昨日はMVCの話で妙に盛り上がってしまったが、考えてみるとModel/View/Controller間の分離が不十分という話はサーバー側だけの話ではなく、クライアント側にも言える事。事実、私自身も div.innerHTML = "<span class='red'>" + message + "</span>"; みたいなHTMLが混ざったJavaScriptコードを書く事は良くある。特に、最近はJSONとして取得して来たデータセットをリストとして表示するケースが増えて来たが、そんな時に「サーバー側のようなHTMLテンプレートが使えたらいいな」と思う事は良くある。手っ取り早くとりあえず動くものを作るのにはHTML埋め込み型のJavaScriptで良いのかも知れないが、後々のメンテナンスを考えると少なくともModelとViewぐらいはキチンと切り話しておいた方が良い事は確か。 ということ
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
当ブログをご覧の方でしたら、きっと何がしか1冊は持っているであろう、いわゆるリファレンスブック(参考書)。 手元に置いて置くのも大事ですが、ふとした時に確認できるウェブ上のリファレンスサイトも把握して置いて損はナシ。 ド忘れしちゃったCSSプロパティや関数の戻り値なんかのために、イチイチ分厚い本を開くよりも楽チンだったりしますしねー。 さらにお金の無い学生さんや、入社したての新人さんにとっては、実例付きの素晴らしい無料参考書にもなるのです。 というコトで今回は、smknおすすめの各言語リファレンスサイト(HTML/CSS、JavaScript、jQuery、PHP)を、まとめてみたエントリーです。 HTML/CSS リファレンス HTMLクイックリファレンス アルファベット順と目的別の2通りで、プロパティが実例とともに掲載されているHTML/CSSリファレンスサイトです。 アルファベット順
こういうhtmlがあった時に、 <input type="text" name="txt" id="txt"> <span id="spn"></span> txtの内容をspnに移動するには、 document.getElementById('spn').innerHTML = document.getElementById('txt').value; とすればいける。 ただし、上記では不十分。innerHTMLに代入する場合はhtmlEscape処理が必要となる。というわけでこんな感じ。 document.getElementById('spn').innerHTML = htmlEscape(document.getElementById('txt').value); htmlEscape関数は前のエントリで作ったこれが使えそう。 var htmlEscape = (function
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
ブラウザが、cite属性を表示しないので、hatenaのように、引用元表示ができるようにする。 引用元リンクは、ブランクで開きます。 (function($){ jQuery(function(){ jQuery("blockquote").each(function(){ var cite = jQuery(this).attr("cite"); if( cite ){ jQuery(this).append("<p style=\"text-align:right;\">引用元:<a href=\"" + cite +"\" onclick=\"this.target='_blank';\" onkeypress=\"this.target='_blank';\">" + cite + "</a></p>"); } }); }); })(jQuery); 以下の記述で、引用末尾、右揃え
HTMLで引用に使われるタグは<blockquote>と<q>があります。前者は改行を含むような比較的長文の引用、後者は短文の引用に使われます。 ところが、<blockquote>はともかく<q>はあまり使われていないのが現状のようです。原因としては主に以下のものがあるのではないでしょうか。*1 1 : 単純にBlogのエディタで<q>が入れられないだけかもしれませんが。 IEでのスタイル付けが一切ない 引用元へのリンクをどうするか 1.はIEの対応状況の問題です。IEは引用部分を<q>タグで囲っても見栄えがまったく変わらず、その部分が引用なのかデフォルト状態では判断できません。IE以外のFirefox、Operaなどは<q>タグで囲った部分が引用符(")で囲まれるのですが、一番使用されているトップシェアのIEは完全に無視してしまいます。 2.はIEに限らず全てのブラウザで問題になる部分で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く