「 jquery 」 一覧

Eyecatch jQuery

マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた

ナビゲーションで、マウスオーバーすると画面外に隠れていたナビバー、HTMLでいうところの、liタグで出来た部分がにゅっと出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの(HTMLでいうところのULタグ)が出てくるってのは見かけなかったので、自分で作ってみました。

Eyecatch jQuery

jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォーカスを当てたい場合の書き方。

Eyecatch jQuery

複数対応! jQueryでテキストエリアの文字数をカウントしてみる

複数個のテキストエリアに対し文字数をカウント、文字数をリアルタイムで表示する事になったので、スクリプトを組んでみました。また、●●文字以上、●●文字以下という制限もするとのことで、カウントに応じて文字数の色を変えるということにも挑戦しています。

Eyecatch jQuery

タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

以前作成したツールチップを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。

Eyecatch jQuery

複数のフォームに同じ値を入力するスクリプトをjQueryで組む

2012/11/28   -Javascript,jQuery
 , ,

都道府県別の送料を指定するフォームに、一律料金として全て同じ数値を入力する場合などを想定しています。次に使う場合用の忘備録としてポストしておきます。

Eyecatch jQuery

ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた

ちょっとしたものなのですが、意外と使えそうなのでポストしてみます。概要はラジオボタンの選択値によって、指定したテーブルのTRタグ(無論DIVでも)の表示・非表示を変更し、内容を操作するというもの。

Eyecatch jQuery

jQueryで各フォームの値を取得 / チェックしてみる

jQueryを使い、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。PHPでバリデーションする前に簡易にチェックすれば、画像などを選択し直すことも無くなりそう。

jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた

ECサイトでよくある、サムネイル画像にカーソルを合わせると、メイン画像が入れ替わるというスクリプトをjQueryを使い書いてみたので、公開してみます。プラグイン化もしてみました。

Eyecatch jQuery

jQueryで日数計算をしてみる

2012/10/12   -Javascript,jQuery
 , ,

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ?」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

Eyecatch jQuery

jQueryでチェックボックスを一括でチェックし、背景色も変えるスクリプトを組んでみた

チェックボックスが大量にあるページなどのユーザビリティに向上を考え、一括でチェックできる仕掛けをjQuery使って作成してみました。ついでにチェックされた対象のラベルの背景色も変更できるスクリプトとなっています。

CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる

スマホ用ページを作った際にユーザビリティ向上のため、選択されたラジオボタン内容の背景色をjQueryを使い変更してみたので、その忘備録です。背景色を変えることで、どのラジオボタンが選択中であるか分かりやすくするのを狙っています。

Eyecatch jQuery

jQueryで下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。

Eyecatch jQuery

クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた

今回はリンクをクリックされると表示するツールチップのスクリプトを組んでみました。フォーム入力する際のヘルプなどの表示を主な用途と考えていますが、使いどころはほかにもありそうな予感。基本的なものなので、改造は簡単にできそうですしね。

Eyecatch jQuery

jQueryでタブの切替スクリプトを書いてみた。

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

Eyecatch jQuery

jQueryでロールオーバーのスクリプトを組んでみた

jQueryの勉強として、マウスカーソルが乗った時にアニメーション(フェードイン、フェードアウト)しながら切り替わる「ふんわりロールオーバープラグイン」を作成してみました。

Eyecatch jQuery

スマホ用のQ&AページをslideToggleを使って作ってみる

ここ数日、スマホページをひたすら作っています。 で、静的ページをゴリゴリ書いてい ...

Eyecatch jQuery

jQueryのtoggleSlideを使ってみる

ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。これも検索頻度の高いものなので、自分のメモとして残しておきます。

Eyecatch jQuery

jQueryをGoogle Libraries API から読み込む方法

散々いろんな所で書かれている jQuery のロード方法ですが、何度も調べるのが面倒なので忘備録としてメモっておきます。

Eyecatch jQuery

jQueryでクーポン系サイトにある、カウントダウンタイマーを設置してみる

作成しているサイトにグルーポンやシェアリーなど、クーポン系サイトでよく利用されて ...

eyecatch JavaScript

今更だが、IE6~7で透過pngを使えるようにするjavascriptライブラリ「DD_belatedPNG」

2012/04/12   -Javascript,jQuery
 , , ,

本当に今更感がある内容ですが、わざわざ対応しないといけない事案にぶつかったので、 ...