TopJavaScriptjQueryプラグイン > 2013年10月
2013年10月 3日

jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」

October 3,2013 1:11 AM
Tag:[, , ]
Permalink

jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」を公開します。

ちなみにこのプラグインを使わなくてもBootStrapのScrollSpyというものが用意されていますが、とりあえず自作してみました。

1.サンプル

サンプルを用意しました。

サンプル
サンプル

サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。

2.プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displaysection.js」にリネームしてください。

jquery.displaysection_0.0.1.js

以下、設定方法です。

3.HTML

反転表示させたいサイドメニューを次のように記述します。

<ul>
    <li><a href="#aaa">AAA</a></li>
    <li><a href="#bbb">BBB</a></li>
    <li><a href="#ccc">CCC</a></li>
    <li><a href="#ddd">DDD</a></li>
    <li><a href="#eee">EEE</a></li>
    <li><a href="#fff">FFF</a></li>
</ul>

次に本文のsection要素を用意します。

<section id="aaa">...</section>
<section id="bbb">...</section>
<section id="ccc">...</section>
    :
<section id="fff">...</section>

section要素のid属性値とa要素のhref属性値が対応するようにしてください。

4.JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.displaySection.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').displaySection();
});
</script>

見出し要素を含む親要素に対してdisplaySection()を実行します。

5.オプション

displaySection()を実行時のオプションとして下記を用意しています。

  • target:ターゲットにしたいコンテンツの親要素。デフォルトは「section」
  • margin:要素間のマージン。値を増加させると、リンクの表示が切り替わる空白期間が少なくなります。デフォルトは「90」

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').displaySection({
        target: '#foo',
        margin: 100
    });
});

6.CSS

表示させるサイドメニューに対し、CSSを適宜設定してください。

ul {
  position: fixed;
  top:150px;
  left:20px;
}
Comments [0] | Trackbacks [0]
2013年10月 1日

jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」

October 1,2013 12:55 AM
Tag:[, , ]
Permalink

jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。

このプラグインは以下のページの振舞いに触発されて作りました。

Phusion Passenger users guide, Apache version

1.サンプル

サンプルを用意しました。

サンプル
サンプル

スクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。

逆スクロールしても、同じように見出しのタイトルを遡って表示します。

2.プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。

jquery.displayheading_0.0.1.js

以下、設定方法です。

3.HTML

見出しの内容を表示させたいHTMLを、body終了タグの直前等に次のように記述します。

<div id="header"></div>

id属性値には「header」を設定します。HTML要素は何でも使えると思います。

この要素をページ上部にヘッダーとして表示し、ページ内の見出し要素(h1~h6)がヘッダーにさしかかると、その見出し要素の内容をヘッダー部分に表示します。

4.JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.displayHeading.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').displayHeading();
});
</script>

見出し要素を含む親要素に対してdisplayHeading()を実行します。

5.オプション

displayHeading()を実行時のオプションとして下記を用意しています。

  • headerName:ヘッダー要素のid属性値。デフォルトは「header」

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').displayHeading({
        headerName: 'foo'
    });
});

6.CSS

表示させるヘッダーに対し、CSSを適宜設定してください。上の3つのプロパティは必須です。

#header {
   position: fixed;
    top:0;
    left:0;
    padding: 20px;
    width:100%;
    height: 30px;
    line-height: 2;
    background: #00f;
    color:#fff;
}
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3