*

水平方向のアコーディオンメニュー

公開日: : 最終更新日:2015/08/18 jQuery

今回紹介するのは横にスライドする
アコーディオンメニューです。

実行結果はこちら

今回使っているjQueryプラグイン
●jQuery zAccordion Plugin
 Version 1.1.2
●Query Easing
 Version 1.3

一定時間ごとにアコーディオンの展開が
1つずつ進んでいくオプションがありますが、
この順番は左から右になっています。
オプションでこの展開する順番を変更できないので

jquery.zaccordion.js の
192~195行目
211~214行目
261~264行目を下記のように変更しています。

変更前
var next = o.current + 1;
if( next > originals.length ){
next = 1;
}

変更後
var next = o.current – 1;
if( next == 0 ){
next = originals.length;
}

という変更を加えました。

スポンサードリンク

関連記事

catejQuery

対象の要素を絞ってイベントを登録する

今回紹介するon()は、 これまでの記事で紹介したイベントを別の書き方で 設定できるメソッドです

記事を読む

catejQuery

マウスオーバー、マウスアウトを感知する mouseover()・mouseout()

マウスオーバー、マウスアウトを感知する mouseover()・mouseout() これら

記事を読む

catejQuery

属性値の変更・取得・削除、要素の置き換え

jQueryはHTMLの要素だけではなく、属性に設定されている値を 変更したり、取得出来たりします

記事を読む

catejQuery

パンくずメニューをスライドさせて表示させる。

今回作成するのは、 パンくずリストに動きをつけて表示させる jQueryを作成します。 サ

記事を読む

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

jQuery

Masonryのギャラリーにフィルター機能を追加する

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギ

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

catejQuery

ダブルクリックされたことを感知するdblclick()

特定の要素がダブルクリックされたときに、 何かしらの処理を実行したい場合は、 dblclick(

記事を読む

catejQuery

空間を最大限に使いトップページの画像をタブで切り替える。

今回、書くのは、 トップページに複数の作品を乗せたいときに、 スクロールさせず、画面上部に配置し

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑