jQuery の Horizontal Accordian を使った水平型アコーディオン③

投稿日: 2011年8月12日 作成者: alphasis

jQuery の Horizontal Accordian プラグインを使って作った水平型アコーディオン③。

実装例（サンプル）

  • コンテンツ1
  • コンテンツ2
  • コンテンツ3
  • コンテンツ4
  • コンテンツ5

実装例（サンプル）について

5つ並んだ地球をモチーフにした縦長の画像をクリックすると、それぞれの内容をスライド・アニメーション動作しながら開く。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

「jquery.hrzAccordion.js」ファイルは、「 jQuery_Horizontal_Accordion_Plugin_2_00_alpha.zip 」に含まれている。入手方法については、こちら。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="hrzAccordion/jquery.hrzAccordion.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-hrzAccordion-3' ) . hrzAccordion( {
        openOnLoad: '1',
        containerClass: 'jquery-hrzAccordion-3-container',
        contentContainerClass: "jquery-hrzAccordion-3-contentContainer",
        contentWrapper: "jquery-hrzAccordion-3-contentWrapper",
        contentInnerWrapper: "jquery-hrzAccordion-3-contentInnerWrapper",
        handleClass: "jquery-hrzAccordion-3-handle",
        handleClassOver: "jquery-hrzAccordion-3-handleOver",
        handleClassSelected: "jquery-hrzAccordion-3-handleSelected",
    } );
} );
// -->
</script>

CSS

画像へのパスは、それぞれ、アップロードした場所を指定する。

画像ファイルも、「 jQuery_Horizontal_Accordion_Plugin_2_00_alpha.zip 」に含まれている。

<style>
<!--
.jquery-hrzAccordion-3-container {
    width: 100%;
}
#jquery-hrzAccordion-3 {
    display: none;
}
#jquery-hrzAccordion-3 ul {
    list-style-type: none;
    margin: 0;
    padding:0; 
}
#jquery-hrzAccordion-3 li {
    display: inline;
    margin: 0px;
    padding: 0px;
}
.jquery-hrzAccordion-3-handle {
    float: left;
    width: 64px;
    height: 314px;
    text-align:center;
    background: #666;
    border: 1px solid white;
}
.jquery-hrzAccordion-3-handle img {
    padding: 2px;
    filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
.jquery-hrzAccordion-3-handleOver {
    background: red;
    border: 1px solid white;
}
.jquery-hrzAccordion-3-handleOver img {
    padding: 2px;
    filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;
}
.jquery-hrzAccordion-3-handleSelected {
    background: #000;
    border: 1px solid white;
}
.jquery-hrzAccordion-3-contentContainer {
    padding-left: 0px; 
    float: left;
    width:0px;
    height: 310px; 
    overflow:hidden;
}
.jquery-hrzAccordion-3-contentWrapper{
    text-align: justify;
}
.jquery-hrzAccordion-3-contentInnerWrapper{
    padding: 10px;
}
-->
</style>

HTML

<ul id="jquery-hrzAccordion-3">
    <li><div class="jquery-hrzAccordion-3-handle"><img src="./hrzAccordion/images/com_01.gif" /></div>コンテンツ1</li>
    <li><div class="jquery-hrzAccordion-3-handle"><img src="./hrzAccordion/images/com_02.gif" /></div>コンテンツ2</li>
    <li><div class="jquery-hrzAccordion-3-handle"><img src="./hrzAccordion/images/com_03.gif" /></div>コンテンツ3</li>
    <li><div class="jquery-hrzAccordion-3-handle"><img src="./hrzAccordion/images/com_04.gif" /></div>コンテンツ4</li>
    <li><div class="jquery-hrzAccordion-3-handle"><img src="./hrzAccordion/images/com_05.gif" /></div>コンテンツ5</li>
</ul>

スポンサード リンク

カテゴリー: Horizontal Accordion, JavaScript, jQuery, アニメーション, パネル, プラグイン パーマリンク