03 | 2017/04 |  05

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

目次の仕様を変更───必要に応じて簡単なマウス操作で見え隠しする

新しい目次作成+頁内ジャンプ プラグインの設計

結論を言えば、上の関連エントリイリストに記した 2 つのプラグインの統合を行いました。

No.782 の目次自動作成プラグインは、ページトップの近くに、常時固定的に表示する目次を自動的に作成するものであり、No.793 は頁内移動を容易に行うためのものです。

これらを暫く使ってみた結果、統合して 1 つのプラグインにまとめた方が使い勝手がよいことに気づきました。

目次として自動登録するのは h4 タグです。そして、頁内ジャンプは主に目次項目を使用するものでした。つまり共通の対象を操作するわけです。ならば統一できるし、その方が効果的に使えると考えたのです。

また、頁内ジャンププラグインは敢えて animatedPopup プラグインを利用していますが、ここで目的とする機能は重いプラグインを使わなくても、もっと軽快に達成できるのではないか、否、達成すべきだとも考えました。

こうして 2 つのプラグインを統合した軽快な目次作成+頁内ジャンププラグインを完成させました。

仕様

以下のように、必要に応じて目次を表示させ、また不必要になったら消えるようにしました。目次内の項目をクリックすると当該箇所にジャンプすることは言うまでもありません。

  1. 目次は固定的には表示させず、必要に応じて表示/隠蔽するようにしました。
  2. エントリイ頁が開かれた時には、画面上部の中央部分に目次が表示されます。その時目次を使いたくなければ、目次ボックスの文字以外の箇所をクリックするか、あるいは window をスクロールすれば目次を消すことが出来ます。
  3. 一旦消えた目次を見たくなった場合には、マウスカーソルをその時々の window 左辺付近に近づけると、その時のマウスカーソルの位置に応じて、目次が右にスライドしながら表示されます。つまり、スクロールの有無や多寡に関わらず、時々の window 左辺にマウスカーソルを近づけると、window 左辺に接して目次を表示するようにしました。この「 浮動的に 」表示/隠蔽する目次がこのプラグインの最大の特徴です。
    なお、ジャンプしたくない場合には、既に触れたように一寸頁をスクロールさせれば目次を隠蔽出来ます。
  4. 目次内の任意の文字列をクリックすると、当該箇所にジャンプします(スクロールします)。その際には、既述のように、LI タグに登録したイベントハンドラーによって目次は隠蔽されます。
  5. このプラグインは起動元を特定する必要がありません。$() を起動元にしても起動できますし、起動元は何であっても構いません。なお、背景色を変えて起動したい場合には、$().makeTableContents("specified color") と指定すれば良いだけです。

▲ToTop

コード

■ slideSide

上下方向の slideToggle , slideUp , slideDown インスタンスメソッドに準じて、横方向のスライドメソッド slideSideToggle , slideSideOut , slideSideIn を以下のように作りました。duration、easing、complete callback 関数 の初期値も指定していますので、引数を指定せずに起動すれば、継続時間は slow を、easing 関数は swing を、アニメーション終了後に起動する関数は無指定を、それぞれ指定することになります。

この横方向スライドメソッドは、縦方向の Up/Down メソッドと共に、かなり使い回すことの出来る汎用的なものとなるでしょう。

$.fn.slideSideToggle = function(duration,easing,callback){
  this.animate({width:"toggle", marginLeft:"toggle", marginRight:"toggle",
    paddingLeft:"toggle", paddingRight:"toggle"},
    duration || "slow", easing || "swing", callback || function(){});
}
$.fn.slideSideOut = function(duration,easing,callback){
  this.animate({width:"hide", marginLeft:"hide", marginRight:"hide",
    paddingLeft:"hide", paddingRight:"hide"},
    duration || "slow",easing || "swing", callback || function(){});
};
$.fn.slideSideIn = function(duration,easing,callback){
  this.animate({width:"show", marginLeft:"show", marginRight:"show",
    paddingLeft:"show", paddingRight:"show"},
    duration || "slow",easing || "swing", callback || function(){});
};
■ makeTableContents
 1:$.fn.makeTableContents = function(color){
 2:/* $.fn.makeTableContents(color)メソッド
 3: * color:目次の背景色を指定すれば、default:"navy"を変更可能
 4: * 起動方法:$().makeTableContents("specified color") or $().makeTableContents()
 5: * release:2010/12/4
 6: */
     // エントリイモードではない時には何もしない。
 7:  if (!/.+blog-entry.+html/.test(location.href)){
 8:    (function(){return false;})();
 9:  } else {
10:    $(function(){
         // entry_body に h4 タグがなければ何もしない。
11:      if (!$("h4","div.entry_body").length) {return (function(){return false;})();}
         // もし既に目次がある場合にはこれを削除する。
12:      if ($("#tablecontents").size()) {$("#tablecontents").remove()};
         // ローカル変数定義
13:      var $contents, bgColor = color && typeof color==="string" && color|| "navy",
14:          initScrollTop = $(window).scrollTop();
         // 目次タグ要素の作成
15:      $contents = $("<ol id='tablecontents' title='目次が消えた後でも、
           マウスカーソルを window 左辺に近づけると再度表示させることが出来ます。
           <br />また、window をスクロールすると目次を隠蔽することが出来ます。' />")
16:        .css($.extend({}, // 初期値(opts) と引数を統合
17:          $.fn.makeTableContents.opts, bgColor!==null ? {background:bgColor}:{})
18:        .prependTo($("body"));
         // entry_body 内の h4 毎に目次項目を作るイテレート処理を行う。
19:      $("h4","div.entry_body").each(function(i){
20:        $(this).wrapInner("<a id='tablecontents"+i +"'></a>");
21:        $contents.append("<li><a href='#tablecontents"+i+"'>"+$(this).text() +"</a></li>");
22:      });
23:      // 目次の幅は 400 px またはそれ以下とする。
24:      var cW = Math.min($contents.width(),400),
25:          cH = $contents.css({width:cW}).height(), // 目次の高さ
26:          oW = $contents.css({width:cW}).outerWidth(), // 目次の幅外寸
27:          direction = true; // direction : true -> up down, false -> side
         // 上下方向/横方向の方向別の 3 つの slide メソッドの選択指定
28:      var slideFuncToggle = function(){
29:        return direction ? this.slideToggle("slow") : this.slideSideToggle();
30:      };
31:      var slideFuncOut = function(){
32:       return direction ? this.slideUp("slow") : this.slideSideOut();
33:      };
         // このプラグインでは使用しないが、一応定義しておく
34:      var slideFuncIn = function(){
35:        return direction ? this.slideDown("slow") : this.slideSideIn();
36:      };
37:      // 目次(=ジャンプリスト)表示関数
38:      var displayJumpList = function(top){
39:        cPopCSS = !top ? { // top 値がゼロの時
40:          top : $(window).scrollTop()+160,
41:          left : (($(window).width()-oW)/2),
42:          height : cH,
43:          overflow:"auto"
44:        } : { // top 値がゼロではない時
45:          top : top,
46:          left :$(window).scrollLeft(), // 画面左端に配置
47:          height : cH, // 高さを変化させないために
48:          overflow:"auto"
49:        };
           // css 値を設定してから slide メソッドを呼び出す。
           // 高さを指定して横方向アニメが起きた時に高さを変化させないようにする。
           
50:        slideFuncToggle.call($contents.css(cPopCSS));
51:      };
         // 目次各項目への click イベントハンドラーの登録
52:      $("li",$contents).each(function(){
53:        $(this).click(function(){
54:          slideFuncToggle.call($contents); // 目次を隠蔽する
55:        })
56:      });
57:      displayJumpList(); // 頁オープン時に目次を表示する
58:      $("body").mousemove(function(e){ // mouseが動いた時
           // マウスカーソル X 位置が window 左辺から 10px 以内にあって、
           // かつ 目次が表示されていなければ
59:        if (e.pageX-$(window).scrollLeft()<10 && $contents.is(":hidden"){
60:          direction = false; // 横方向を指定し
61:          displayJumpList(e.pageY); // 目次を top:マウスカーソル Y 座標に表示する
62:        }
         // window scroll イベントハンドラーの登録(目次の隠蔽)
63:      })
64:      $(window).scroll(function(){
           // 目次が表示されていて初期スクロール Top 値と
           // 今行ったスクロール後の Top 値が 20 px 以上差がある場合には
65:        if (Math.abs(initScrollTop-$(this).scrollTop())>20 && !$contents.is(":hidden")){
66:          slideFuncOut.call($contents); //目次を隠蔽する
67:          initScrollTop = $(this).scrollTop()// 現在値を初期値とする。
68:        }
69:      });
37     });
70:  return this;
71:  }
72:};
73:// 目次の CSS 初期値設定
74:$.fn.makeTableContents.opts = {
75:  position:"absolute",
76:  zIndex:"1010",margin:0,padding:"0.5em 0.5em 0.5em 2em",
77:  border:"2px ridge white",textAlign:"left",lineHeight:"1.1em",
78:  background:"navy",display:"none"
79:}

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/794-171a5762

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
201012041751
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。