rcmdnk's blog

jQuery Pro Quick Guide

記事が長くなった時にサイドバーがあると、下の方に行った時に寂しくなるので 下の方のコンテンツが着いてくる様なサイトが良くありますが、 jquery–ex-flex-fiexという プラグインを使ってOctopressへ導入してみました。 基本となっているテーマはデフォルトのClassicです。

Sponsored Links

jquery.ex-flex-fixedのインストール

このレポジトリ から直接取ってくるかclone:

git clone git://github.com/cyokodog/jquery.ex-flex-fixed.git

して、 取ってきたjquery.exflexfixed-0.3.0.jssource/javascripts/へ 入れます。

これをsource/_includes/custom/head.htmlへ次の行を加えて 読み込み、さらに下記の様なスクリプトも.side-scrollというクラスに関して 作っておきます。

1
2
3
4
5
6
7
8
9
<script src="{{root_url}}/javascripts/jquery.exflexfixed-0.3.0.js" type="text/javascript"></script>
<script>
  jQuery(function($){
    $('.scroll-fixed').exFlexFixed({
      watchPosition: true,
      container : '#content'
    });
  });
</script>

#contentsource/_layouts/default.htmlにある コンテンツ用のdiv要素に対するIDです。 (これがスクロールしたりするときにどこからどこまでを見るか、という全体をになる。)

watchPositionについては 作者さんのページ に説明がありますが、 少なくとも自分の今の状態だと入れておかないと 最初に表示した時に要素がかぶってしまうので必要でした。

_config.ymlで着いてくる要素の数を決めれるようにする

サイドバーを構築する時に使われるplugins/include_array.rbを 下の様に変更して<div class="scroll-fixed">~<\div>で 好きな数(n_scroll_fixed)だけサイドバーの要素を囲める様にします。

include_array.rb.diff
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
diff --git a/plugins/include_array.rb b/plugins/include_array.rb
index 000040f..0758e53 100644
--- a/plugins/include_array.rb
+++ b/plugins/include_array.rb
@@ -31,6 +31,11 @@ module Jekyll
       end
-
       rtn = ''
+      n_files = context.environments.first['site'][@array_name].size ? \
+        context.environments.first['site'][@array_name].size : 0
+      n_files_count = n_files
+      n_last_fixed = context.registers[:site].config['n_scroll_fixed'] ? \
+        context.registers[:site].config['n_scroll_fixed'] : 0
       (context.environments.first['site'][@array_name] || []).each do |file|
         if file !~ /^[a-zA-Z0-9_\/\.-]+$/ || file =~ /\.\// || file =~ /\/\./
           rtn = rtn + "Include file '#{file}' contains invalid characters or sequences"
@@ -42,11 +47,19 @@ module Jekyll
             source = File.read(file)
             partial = Liquid::Template.parse(source)
             context.stack do
+              if n_files_count == n_last_fixed
+                rtn = rtn + "<div class=\"scroll-fixed\">"
+              end
+
               rtn = rtn + partial.render(context)
+              if n_last_fixed != 0 and n_files_count == 1
+                rtn = rtn + "</div>"
+              end
             end
           else
             rtn = rtn + "Included file '#{file}' not found in _includes directory"
           end
+          n_files_count -= 1
         end
       end
       rtn
@@ -56,3 +69,4 @@ module Jekyll
 end

これで、_config_yml

# scroll-fixed
n_scroll_fixed: 3

と書けば、下から3つがスクロールに対して着いてくる要素になります。

以上で導入は終わりで、 そんな感じで右のスクロールバーを見てもらうと、下の方の要素が いくつか下の方に行った時に追随してくるのが分かるかと思います。

その他似たようなプラグイン

jquery--ex-flex-fiex以外にもスクロールに追随するサイドバー用のプラグインとして 下のような物がありました。

Sponsored Links
Sponsored Links

« gitの更新とHomebrewの導入 apt-cygの使い方: Cygwinでコマンドラインからパッケージをインストールしたり管理をする »