Tag: jQuery

タグ jQuery がつけられた記事のリストです。

jQuery Image Rollover

jQuery Conference で発表されたらしい、Douglas Neiner さんの Contextual jQuery 3 というスライドが興味深かったので、参考にしながらためしに画像ロールオーバー (マウスが乗っかると画像が差し替わるあれ) の jQuery プラグインを書いてみました。ワーク・イン・プログレス。

jQuery Last.fm Profile Plugin

Last.fm の API を利用して、ユーザのプロファイルから最近聴いた曲やもっとも再生回数の多いアルバムやなんかを取得して表示する jQuery プラグイン。自分のサイト用に書いて使ってたんだけど、一部を書き直したり […]

要素をスクロールに追従させる jQuery プラグイン

Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! […]

HTML5 のカスタムデータ属性を jQuery プラグインのオプションとして使う

HTML5 ではマークアップに カスタムデータ属性 を埋め込むことができますが、これを jQuery プラグインのオプションとして利用する方法について考えてみました。なお、ここでやっていることと同様のことが『jQuery […]

HTML5 の autofocus 属性を jQuery でクロスブラウザに

一部を修正して Gist に置きました。IE6 と 7 で autofocus 属性値を省略すると動作しない件にも対応しています。 HTML5 ではフォームのコントロールに autofocus 属性 が定義されています。 […]

HTML5 の placeholder 属性を jQuery でクロスブラウザに

Update 2011-09-23 一部を修正して Gist に置きました。 フォームの入力フィールドにあらかじめテキストを表示させておく「プレースホルダ」。ブラウザの検索バーなんかに見られるような、フィールドが空のとき […]

印刷用の CSS と jQuery プラグイン

URL のリストを出力するスクリプトを一部修正して Gist に置きました。 このサイトの印刷時のスタイルというものをまったく考えていなかったことに気づいたので、あわてて CSS と jQuery プラグインを書いて対応 […]

blockquote + footer

コメントでの指摘を受け、新しく記事を起こしました: HTML5 での引用と引用元のマークアップ HTML5 の 2010 年 3 月 4 日付 W3C 草案 で、footer 要素は以下のように定義されています: The […]

jQuery Counter Plugin

CSS 2.1 の Counter 構文 や CSS 3 の Lists モジュール のような、任意の要素に色んなタイプの連番を自動的にふる jQuery プラグイン、jQuery Counter Plugin を書いた。ol 要素ほか順列リストのマーカー部分を柔軟にコントロールしたい、というのが主な目的だけど、個人的な裏テーマは JavaScript の配列と正規表現の勉強。 Demo Demo: jQuery Counter Plugin Download jQuery Counter Plugin Usage 例えば以下のようなごく普通の ol 要素に適用する場合。 <ol>   <li&…

インライン要素に背景画像を指定する

Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf {   padding-left: 20px;   background: url(/img/pdf.png) no-repeat 0 50%; } a.external {   padding-right: 20px;   background: url(/…

jQuery と CSS を使った Apple 風パンくず

パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple …

jQuery 1.3、リリース!

jQuery の最新メイジャー・アップデイト、jQuery 1.3 がいよいよリリースされました! .live() とか .die() とか新しい要素もあるけど、全体的にかなり速くなったっぽいとこが売りっぽい。CSS セレクタ・エンジン Sizzle の搭載や各種リライトが奏功している模様。ベンチマークを見てみると、セレクタの書き方の最適化メソッドもやや変わってきそう。ともあれ、明日は仕事そっちのけでチェックする構えです。 そうだ、書き忘れてた。お誕生日おめでとう、jQuery! …

JavaScript と CSS を使った「このページを印刷」リンク

クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class=”print”>   <a href=”#” onclick=”window.print(); return false;”>このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ…

jQuery で外部サイトへのリンクをコントロール

外部のサイトへのリンクについて、例えばそのことを示すアイコンを付けたり、あるいは別ウィンドウで開いたり、といった扱いをすることはよくある。そんな場合、jQuery があれば以下のような JavaScript でそのコントロールが簡単に。 まず最初に jQuery のセレクタ機能を拡張 しておく。ここでは要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と異なる場合に :external セレクタで捕まえられるように拡張。 $.extend($.expr[‘:’],{   external: function(a,i,m) {   &…

jQuery のセレクタ機能を拡張する

jQuery の魅力のひとつは豊富な セレクタ機能 だけど、それをさらに拡張することもできる。その簡単な方法を紹介してくれている記事をみつけた。 Extending jQuery’s selector capabilities – James Padolsey たとえばインライン要素を取得するセレクタ機能は以下のように書けば作れちゃう。 $.extend($.expr[‘:’],{   inline: function(a) {     return $(a).css(‘display’) === ‘inline’;   } }); これで…