Category JavaScript Archive

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

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

特定のタブが開いている状態でリンクをさせたい時は無いでしょうか?例えば3番目のタブがアクティブになっている状態に...などです。

4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。(正確には書いてもらった...)

詳しい解説は今回は省きますが、内容はURLに付いたパラメータを解析するメソッドを用意し、パラメータに応じて開くタブを制御しています。タブ数は4つまで対応するようになっています。

Read more

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

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

jQueryを使ったタブメニューの第4回目です。(しつこい)

前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。
今回は最初に表示されるタブを選択出来るように改修します。

Read more

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

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。

1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した画像が表示されると言ったものに改造して行きます。(余裕があれば3回の記事にし、プラグイン化しようと思います。)

プログラムの流れは下記のような流れに従って作ります。

  • 画像の数や幅などの初期設定を行う。
  • 画像が左にスライドするアニメーションを作る。
  • このアニメーションをメソッド化する。
  • 指定した秒数でこのメソッドを実行させる。

Read more

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

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

jQueryを使ったタブメニューの第3回目です。

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

タブの状態を維持するにはCookieを使いますが、jQueryにはCookieを簡単に使えるようにするjQuery Cookieと言うプラグインがありますので、これを利用してます。

前回までの記事をご覧になっていない場合は先にご覧になっていただければと思います。

Read more

HTML5のplaceholder的なjQueryプラグイン

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

ずいぶんと昔に書いたプラグインですが、今更ながらブログの記事に書いてみます。

HTML5では追加になったplaceholder属性は、フォームに予めテキストを表示させてアクセシビリティを上げてくれる属性です。主要なブラウザは(FF3.6以下は除く)対応していますが、案の定IE6/7/8/9は対応していません。なのでIEにplaceholder的なものを適用させる為にjQueryを用いて再現すると言うものです。

仕様

  • IE6/7/8/9に対応
  • HTML5のようにinputタグ、textareaタグにはplaceholder属性を用意

Read more