jQuery Mobileのまとめ資料

最近ようやくjQuery Mobileを触りました。
色々ネットで検索しましたがプロパティやイベントの一覧(チートシート的なもの)が意外とないので、自分のメモ用で作成しました。
抜けや間違いがあるかと思いますので間違いがあったら指摘して頂けると助かります。

続きを読む jQuery Mobileのまとめ資料

jQueryでプルダウンメニュー(たった5行で!)

プルダウンメニューは色々なプラグインが出尽くしているかと思うので、プラグインを使わない且つ5行で実装できるプルダウンメニューのサンプルを作成しました…と言ってもhtmlの構造やCSSの力を大部借りますが。

続きを読む jQueryでプルダウンメニュー(たった5行で!)

jQueryでApple風インフォメーション

Appleのサイトにある「Hot News Headlines」みないなお知らせ・インフォメーションを作りたかったのでjQueryで作成してみました。
省スペース且つ動きがあるので効果的なインフォメーションだと思います。

続きを読む jQueryでApple風インフォメーション

jQueryでフォームのユーザビリティを強化

jQueryを使ったフォームのユーザビリティを強化する、ちょっとしたサンプルを紹介します。
問合せを目的としたサイトの場合、フォームは重要なページになります。
今回のサンプルは選択項目が多い時など、パッと見でどの項目を選択したか分かり易くするものです。
本当にちょっとしたことですがあるないとでは大分違うかと思います。

続きを読む jQueryでフォームのユーザビリティを強化

ページ内を自在にスクロール | よく使うjQuery

わずか6行で実装できるjQueryを使ったスクリプトです。
今回のスクリプトはボタンをクリックしてページ内の任意の箇所へスクロールする機能です。
いくつかプラグインがありますが数行で実装できる機能なので、個人的にはわざわざプラグインを利用する必要がないかと思います(ページ読み込み時にリクエストも増えるし)。
ついでにページのトップへスクロールする方法(こちらは4行)も記載します。

続きを読む ページ内を自在にスクロール | よく使うjQuery

リストの最後(最初)のborderを消す

よくリストタグ<li>にborderを指定するが「最後(最初)の行だけborderがいらない」とうパターンが多い。
わざわざ最後(最初)の<li>タグにだけスタイルを指定してborderを消すのも面倒だしCSS3の「:last-child」や「:first-child」は対応していないブラウザがあるので、悩んだ結果jQueryで消すのが一番簡単且つブラウザ対応も間違いないと思い、以下のようなスクリプトを作成しました。

続きを読む リストの最後(最初)のborderを消す

画像一枚でロールオーバー | よく使うjQuery

ロールオーバーさせる為に画像を2枚用意するのが面倒という場合に使う方法です。以前もロールオーバーのサンプルを紹介しましたが、今回はjQueryを使って1枚の画像をロールオーバーっぽく見せる方法の紹介です。

続きを読む 画像一枚でロールオーバー | よく使うjQuery

iGoogle風プラグイン「jGoogle」

去年仕事で作ったiGoogle風のドラッグ&ドロップ&Cookie保存の機能を汎用性を持たせてプラグインに作り変えました。
まずは以下のリンク先よりサンプルをご覧下さい。
ちなみにプラグインを作るのは初めてなので作りの甘いところは大目に見て下さい。

続きを読む iGoogle風プラグイン「jGoogle」

checkboxによる制御 | よく使うjQuery

以前投稿したradioボタン制御と同じような内容でcheckboxの制御のサンプルを作成しました。
radioボタンの場合との違いは、checkboxの場合は複数あることを考慮して、「1つ以上checkedされたら」という条件を設けることです。

続きを読む checkboxによる制御 | よく使うjQuery