begin: 20170724 version: 20170724
この文はfccプロジェクト(個人作品展示ページ制作)に起源し、以前(fcc portfolioプロジェクト総括)を書いたことがあり、自分で独立してこのページを構築した総括である.本稿では、そのサンプルプロジェクトのソースコードの概要を参照します.

1.外部ファイル

bootstrap3.3.5(css)

font-awesome4.4.0(css)(font awesomeアイコンを使用)

bootstrap3.3.5(js)

jquery2.1.3(js)

jquery-easing(js)プラグイン、jqueryアニメーションで利用可能な緩動関数オプションプラグインの概要、$.animate()メソッドは、使用時にeasing文字列パラメータを指定して、jqueryのデフォルトパラメータが'wing'、直接ある'linear'などのスロー関数を指定することができます.このプラグインには、オプションのスロー関数が拡張されており、文字列形式で名前を指定するだけでよい'easeInCubic''easeOutExpo'などがあります.

2.css

だんせいばこ

cssでは弾力性のある箱が使われており、以下のように解読されています.

親エレメントで引用display:flex;互換性のために2つのルールがあるdisplay:-webkit-box;display:-ms-flexbox;・これにより、親要素の空間は要素に割り当てられます.

flex-flow:row wrap;水平表示、必要に応じて取りはずす.

-ms-flex-pack:distribute;・justify-content:around;、空白部分はすべてのサブエレメント間で平均的に配分される.

-webkit-box-align: start;・-ms-flex-align: start;・align-items:flex-start;縦軸開始境界が揃う;

この属性は互換性が高くなく,上述した互換性を考慮したルールie 9ではいずれもだめである.関連記事:

flexbox-CSS 3フレキシブルボックスモデルflexboxレイアウト完全版チュートリアル

A Complete Guide to Flexbox

font awesome

一般的な使い方では、htmlにiラベルを使用して、対応するクラスを追加します.

もう1つの方法は、cssでunicode符号化で生成される.

.icon:before{
    content: '\f039';
    font-family: FontAwesome;
}

各アイコンに対応するunicodeコードは、公式サイトで確認できます.

3.javascript

寸法と位置

jsファイルでは、要素のさまざまな寸法プロパティが大量に使用されています.ここでまとめます.
ツールバーの
意味
offsetHeight offsetWidth
説明要素の外側寸法、要素の内容+内側余白+枠線、外側余白とスクロールバーを含まない
offsetLeft offsetTop
エレメントの左上隅(枠線の外縁)と配置された親コンテナ(offsetParentオブジェクト)を記述します.エレメントがrelativeまたはabsoluteとして最も近い祖先エレメントは、存在しない場合nullを返します.左上隅の距離
clientWidth clientHeight
要素の内側寸法、要素の内容+内側の余白を説明して、枠(IEの下で実際に含む)、外側の余白、スクロールバーを含まない.スクロールバーは、親要素のコンテンツ領域+padding空間を占めます.
scrollWidth scrollHeight
要素コンテンツ+内側余白+オーバーフローサイズで、コンテンツがオーバーフローしていない場合、scrollWidthとscrollHeightは一般的にclientWidthとclientHeightと等しいが、実際にはブラウザによって異なる処理があり、必ずしも等しいとは限らない.
scrollLeft scrollTop
要素スクロールバーの位置、書き込み可能
jqueryメソッド
.width() .height()
要素の計算スタイルの幅を取得します.どのボックスモデルを使用しても、コンテンツ領域の幅のみを表します.$( window ).width();ブラウザビューポートの幅$(document)を取得します.width();ページ幅の取得
.offset()
ページに対する要素(外側距離を含まない)のオフセットオブジェクト(left、topプロパティ)を取得します.
.position()
取得要素(外距離を含まない)の親コンテナに対するオフセットオブジェクト(left、topプロパティ)
適用
window.innerWidth window.innerHeight
ブラウザビューポートの幅が高く、スクロールバーが含まれています.cssメディアクエリー(min-widthなど)は、スクリーン解像度ではなくこの解像度に基づいています.
window.screen.width window.screen.height
画面幅の高解像度
$(window).width() $(window).height()
スクロールバーを含まないブラウザビューポートの幅
document.body.offsetHeight document.body.offsetHeight
ページの合計高さ、body要素marginはそれに影響を与えるべきです
window.pageXOffset window.pageYOffset
PageXOffsetプロパティとpageYOffsetプロパティは、ドキュメントがウィンドウの左上隅で水平方向と垂直方向にスクロールするピクセルを返します.ie 8-はdocumentを使用できます.documentElement.scrollLeftとdocument.documentElement.scrollTop属性代替

ブラウザビューポートの高さを取得する:

window.innerHeight || 
document.documentElement.clientWidth || 
document.body.clientWidth

ビューポートの幅:

window.innerHeight || 
document.documentElement.clientHeight || 
document.body.clientHeight

(混在モードで実行されるIEについては、document.documentElementの代わりにdocument.bodyを使用し、「jsハイウェイ」関連コードを参照)

ビューポートの最小高さに基づくドキュメントの合計幅を取得ドキュメントの合計高さ:

Math.max(document.documentElement.scrollHeight || 
    document.documentElement.clientHeight)

ドキュメントの合計幅:

Math.max(document.documentElement.scrollWidth || 
    document.documentElement.clientWidth)

(ハイブリッドモードでIEはdocument.documentElementの代わりにdocument.bodyを使用し、「jsハイウェイ」関連コードを参照)

ドキュメントのスクロール幅の高さを取得

//from MDN
var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollTop;

MDNから

イベント関連

.on()

jqueryのon()メソッドは、同じ関数を複数の異なるイベントにバインドする場合に、次のようにマージして書くことができます.

$('body')
    .on('input propertychange','.form-item',function(event){
        //    jquery        ，
        //             
        //propertychange       ie（8-）  
        $(this).toggleClass('form-item-filled',!!$(event.target).val());
    })

また,この手法を用いてイベント依頼を行う場合,2番目のパラメータはセレクタであり,イベントバブル中の要素にのみ,セレクタを満たすとともに依頼された要素の子孫である要素が存在し,イベントがトリガーされる(event.target適合セレクタは必ずしも必要ない).

inputとpropertychangeイベント

inputイベントは、inputまたはtextarea要素の値が変更されたときにトリガーされます.このイベントはonchangeイベントに似ています.異なる点はoninputイベントが要素値が変化するとすぐにトリガーされ、onchangeは要素が焦点を失ったときにトリガーされます.もう一つの違いはonchangeイベントがkeygenおよびselect要素にも作用することである.
propertychangeイベントは互換性の低いバージョンのIEを用いる.

いくつかのjquery関数

関数＃カンスウ＃
説明
.stop
現在のアニメーションを停止
.offset()
ページに対する要素のオフセットの取得

bootstrapプラグイン関数

関数＃カンスウ＃
説明
.collapse('hide')
非表示要素折りたたみ可能要素collapseプラグインから
.scrollspy()
このメソッドは、リスニングされた要素(しばしばbody)でアップグレードされ、パラメータは、アクティブ化されたリンクに従う必要がある場所を指定し、scrollspyプラグインから