07 | 2017/08 |  09

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jquery.js (1.4) による要素位置の測定と適正な配置 (3) コード解読 (2)

jQuery().position() インスタンスメソッドの解読

offset メソッド と position メソッドの比較
各メソッドのサイズ測定箇所図

これら 2 つの jQuery インスタンスメソッドは、共に読み取り専用で、返値は共に座標オブジェクトですが、座標系と計測箇所が異なります。

offset メソッドがドキュメント座標における対象要素のボーダー辺の座標値を取得するのに対して、position メソッドは、対象要素の margin 辺の、基準要素( offsetParent )内における座標値を取得します。つま、offset メソッドによる座標値は対象要素の margin 値を含むのに対して、position メソッドによる座標値は margin 値を含みません。

しかし、position メソッドは offset メソッドを利用して基準要素から margin 辺までの offset 座標値を算出します。

jQuery().position() コード解読
5857:jQuery.fn.extend({ // jQuery protptype オブジェクトに position メソッドを
5858: position: function() { // インスタンスメソッドとして登録する
5859:  if ( !this[0] ) {// インスタンスに要素ノードが 1 つも登録されていなければ
5860:   return null;
5861:  } 
5862;
5863:   var elem = this[0]; // ローカル変数定義開始
5864:
5865:   // Get *real* offsetParent
      // 独自メソッドを使って真の offsetParent 要素を取得して、
      // offsetParent 変数に代入する
5866:   var offsetParent = this.offsetParent(),
5867:
5868:   // Get correct offsets
      // offset ローカル変数に計測対象要素の offset メソッドの返値を代入
5869:   offset = this.offset(),
      /* offsetParent が body または html ならば、ローカル変数 parentOffset に
       * { top: 0, left: 0 }オブジェクトへの参照を代入し、offsetParent が別の要素
       * ならば offsetParent.offset() の返値オブジェクトへの参照を代入する。
       */
5870:   parentOffset = /^body|html$/i.test(offsetParent[0].tagName) 
       ? { top: 0, left: 0 } : offsetParent.offset();
5871:
5872:   // Subtract element margins マージン値を減算する
5873:   // note: when an element has margin: auto the offsetLeft and marginLeft
5874:   // are the same in Safari causing offset.left to incorrectly be 0
      // 注記:「要素に margin : auto が設定されている場合、
      // safari では、offset.left が不正にゼロとなってしまうために、
      // offsetLeft 値 と marginLeft 値が同一になってしまう。」
 /* num メソッドは jquery.js の無名関数のトップレベルで定義されている関数
 * (#1266~1268)。第 1 引数で指定した HTML 要素の、第 2 引数で指定した算出 CSS
 * スタイル値(単位は含まない)を取得するもの。
 * 描画された状態から marginTop/Left 値を取得して、これを offset.top/left 値から
 * 減算する。offset() メソッドは border 辺までの値を保持しているので、この減算に
 * よって offset.top/left は margin 辺までの値となる。
 */
5875:   offset.top  -= num( this, 'marginTop'  );
5876:   offset.left -= num( this, 'marginLeft' );
5877:
5878:   // Add offsetParent borders
      // 上のコメントの通り、offsetParent の座標値に border 幅を加算する。
5879:   parentOffset.top  += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth",  true) ) || 0;
5880:   parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0;
5881:
5882:   // Subtract the two offsets
      // 2 つの offset 値を減算して、基準要素( offsetParent ) のパディング辺から
      // 対象要素の margin 辺までの距離を算出する。
5883:   return {
5884:    top:  offset.top  - parentOffset.top,
5885:    left: offset.left - parentOffset.left
5886:   };
5887:  },

jQuery().position() メソッド解説図

jQuery().offsetParent() メソッドの解読

#5865 にあるとおり、このメソッドは「Get *real* offsetParent」のために作成されました。

■jQuery().offsetParent() メソッド解読
5889: offsetParent: function() {
     // map メソッドの返値を返す。
5890:  return this.map(function() {
5891:   var offsetParent = this.offsetParent || document.body;
      // offsetParent が存在して、タグ名が body でも html でもなく、
      // position 値が static である限り繰り返す。
5892:   while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && jQuery.css(offsetParent, 'position') == 'static') ){
       // 1 つ上位の offsetParent への参照を変数 offsetParent に代入する。
5893:    offsetParent = offsetParent.offsetParent;
5894:   }
5895:   return offsetParent; // offsetParent 要素への参照を返す。
5896:  });
4296: }
4297:});

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

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