jQuery の一覧

JavaScriptでNEWマークを自動的に追加する

JavaScriptでNEWマークを自動的に追加する

個人的にはNEWマークなんていらないでしょと思うのですが、まだまだ更新したらNEWマークつけてよなんて事はよく言われるのでは無いでしょうか?しかもいつまでNEWマークつけてんの?3日たったら消してよなんて言われることも多いのでは無いでしょうか(苦)?
JavaScriptのDateオブジェクトを使えば簡単に自動化出来ます。

Read more

jQuery スクロールに追従するサイドバー

jQuery スクロールに追従するサイドバー

最近はあまり見なくなりましたが、スクロールに追従(スクロールしても固定)するサイドバーをjQueryで書く案件があったのでブログの記事にしておきます。

Read more

jQueryタブプラグインでリンク元にパラメータを与えて開くタブを制御する

特定のタブが開いている状態でリンクをさせたい時は無いでしょうか?例えば3番目のタブがアクティブになっている状態に...などです。 4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。(正確には書いてもらった...) 詳しい解説は

Read more

jQueryタブプラグインで最初に表示されるタブを選択出来るようにする

jQueryを使ったタブメニューの第4回目です。(しつこい) 前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。 今回は最初に表示されるタブを選択出来るように改修します。

Read more

指定した秒数ごとに画像がスライドするカルーセル

jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。 1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した

Read more

jQueryを使ってタブメニュープラグインを作る(Cookie Version)

jQueryを使ったタブメニューの第3回目です。 前回はタブメニューを使い回したり、1ページ内で複数のタブに対応させるためにプラグイン化するという記事を書きました。今回はこのタブの状態をリロード時や、他のページから戻ってきた時にタブの状態を維持するように改造します。 タブの状態を維持するにはCookieを使いますが、j

Read more

HTML5のplaceholder的なjQueryプラグイン

ずいぶんと昔に書いたプラグインですが、今更ながらブログの記事に書いてみます。 HTML5では追加になったplaceholder属性は、フォームに予めテキストを表示させてアクセシビリティを上げてくれる属性です。主要なブラウザは(FF3.6以下は除く)対応していますが、案の定IE6/7/8/9は対応していません。なのでIE

Read more

jQueryを使ってタブメニュープラグインを作る

前回はjQueryを使ってタブメニューのインターフェイスを作成しましたが、汎用的に利用するにはプラグイン化すると便利です。プラグイン化するとプラグインを呼び出す際のオプションを設定出来るので、liやdivのクラス名を変更した際にも対応出来ます。 今回は前回のコードを参考にプラグイン化して行きます。

Read more

jQueryを使ってタブメニューを作る

ウェブサイトで多くの要素を省スペースで表示するのに役立つタブメニューは汎用的に使えて実用的なUIです。このタブメニューのインターフェイスはjQueryを利用すると簡単に実装出来ます。 今回はタブメニューを実装するまでを解説していきます。また、1ページ内で複数のタブを実装するにはプラグインの形式にすると便利ですので、最

Read more

任意の2つのバナーを表示するjQuery Random Banners

n個のバナー画像の中から任意の2個のバナーを表示させるjQueryプラグインを考えてみました。 仕様としては、HTML上には全てのバナーを非表示で記述し、任意の2個を表示、バナーを追加しても対応出来る(3個でも4個でも10個でも任意の2個のバナーを表示)と言う仕様です。

Read more

jQueryを利用したソーシャルサービスボタン生成プラグイン

TwitterやFacebookを初めとして各種ソーシャルサービス(SNS)が公式でコンテンツをシェアする手段を公開しています。自分のブログにこれらのシェアボタンを利用している人は多いと思いますが、TwitterやFacebookなどは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナル

Read more

jQueryを使ったアイコン付加プラグイン(pdf,doc,xls,zip対応版)

以前にポストしたブログ記事「jQueryを使ったPDFアイコン付加プラグイン」ですが、今回はPDFファイルだけでなく、Word,Excel,ZIPに対応させたものを作ってみました。 今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメータ

Read more

Google Maps API jQuery Pluginを書いてみた

Google Maps API jQuery Pluginを書いてみた

Google Maps APIのバージョン2は利用していましたが、今さらながらバージョン3がリリースされていたことに気づきました。バージョン3からはAPIキーを取得せずに使えるようになっているので、さらに敷居が低くなりました。 バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数

Read more

Thickboxで読み込んだHTMLからウィンドウを閉じる

ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか? ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リ

Read more

jQueryで複数のCSSプロパティを記述する書式

これもいつも忘れるのでメモ $('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'}); プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。

Read more

jQuery (X)HTML操作のメモ1

いつも忘れるので自分用にメモ prepend() 指定した要素内部の先頭にHTMLを挿入 $('p').prepend('<strong>追加テキスト</strong>'); append() 指定した要素内部の最後にHTMLを挿入 $('p').append('<strong>追

Read more

jQueryを使ってセレクトボックスで選択したoption要素のテキストを全て表示する

先日、Webデザイナーの集会で嘘くさい?jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。 複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか? そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか? View Demo

Read more

inline-blockを使ってのマルチカラムレイアウト(段組み)

IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。 View Demo 通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いま

Read more

jQueryを使ったブラウザ分岐

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。 body { font-size: 100%; } * html body { font-size: 82%; } /* fo

Read more

jQueryを使ったPDFアイコン付加プラグイン

リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。 CSS Code a.pd

Read more