タグ

Web制作とjQueryに関するuesimaのブックマーク (2)

  • 【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE

    今日紹介するのは jQuery プラグインの[FlexSlider]です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもOK、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 [FlexSlider]の導入方法 まずは以下のサイトから[FlexSlider]のプラグイン体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>

    【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
  • 誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能!

    こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし

    誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能!
  • 1