ページ幅を動的に変更する

多くの人は、ページの幅を固定するか引き伸ばすか（ゴム）について議論します。 固定サイズが好きな人もいれば、逆の人もいます。 商用サイトのユーザーは、このページにとどまるか、または去ることができる潜在的なクライアントを持っているため、両方のタイプを喜ばせてみましょう（サイトのユーザビリティの問題）。 ページ幅の選択はユーザーに任せて、この問題をすぐに解決しようとしました。







この問題には2つの解決策があります。 1つは、2つのサイトテンプレートを作成し、サイトページでそれらの間にスイッチを追加することです（私の意見では、あまり便利ではありません）。 2番目の方法は、リロードせずにページ幅のアニメーション化された変更を実装することです。サイトの次のページに移動しても、幅データはCookieに保存されるため、ページ幅は変更されません。 この方法を以下に説明します。



スクリプトは完全に検証されます（7つのdivブロックが存在することを考慮すると）。



jqueryライブラリ自体とjquery.cookieプラグインが必要です 。



cssファイルにはie6、7のハックが含まれていますが、簡潔にするために個別にファイルにエクスポートしませんでした。



無効になったCookieのチェックは考慮されませんでした。実際には、サーバー側のセッションと併せて画面設定の保存を実装する方がよいためです。 すべてのコードは詳細にコメントされています。



この情報が役に立つことを願っています。そのような実装の例を見たことはありません。

$ （ドキュメント） 。 準備完了 （ 関数 （ ） {



/ * Cookie許可データページを確認して表示* /

if （ $。 cookie （ "screen" ） == 'full' ） { / *前のビューがワイドスクリーンの場合* /

/ *メインブロックにワイドサイトスタイルクラスを追加* /

$ （ '#conteiner、＃conteiner_2、＃conteiner_3、#footer' ） 。 addClass （ 'tip_full' ） ;

ウィンドウ。 sreen_1 = 'fix' ; / *ページ幅を変更するボタンの初期値を書き込みます* /

ウィンドウ。 sreen_2 = 'full' ; / *セカンダリ値* /

} else { / *他のすべての場合（デフォルトを含む）は、狭いページビューを表示します* /

/ *スタイルのクラスを追加して、メインブロックのサイトページの表示を絞り込みます* /

$ （ '#conteiner、＃conteiner_2、＃conteiner_3、#footer' ） 。 addClass （ 'tip_fix' ） ;

ウィンドウ。 sreen_1 = 'full' ; / *主な値* /

ウィンドウ。 sreen_2 = 'fix' ; / *セカンダリ値* /

}



/ *渡されるパラメーターに応じて画面の幅を変更する関数* /

関数 size_screen （ size_type_1 、 size_type_2 ） {



$ （ '#start' ） 。 css （ 'display' 、 'none' ） ; / *「愚か者」からの保護、繰り返しボタンを押す//ボタンを削除する* /



/ *渡されたパラメーター（画面の幅）に応じて変数に値を割り当てます* /

if （ size_type_1 == 'full' ） {

ウィンドウ。 size_width = '100％' ; / *ページ幅の値* /

} else {

ウィンドウ。 size_width = '800px' ;

}



/ * Jqueryアニメーション関数。 この場合、サイトのページの画像の幅の滑らかな変化* /

$ （ '#conteiner、＃conteiner_2、＃conteiner_3、＃footer' ） 。 アニメート （ {

'width' ：ウィンドウ。 size_width / *ページ表示設定に従って幅を徐々に変更します* /

} 、

500 、 / *アニメーション時間* /

function （ ） { / *アニメーションの後に呼び出される関数* *

/ *ブロックから前のページの表示スタイルを削除* /

$ （ これ ） 。 removeClass （ 'tip_' + size_type_2 ） ;

/ *新しい画面幅に新しいスタイルクラスを追加* /

$ （ これ ） 。 addClass （ 'tip_' + size_type_1 ） ;

/ * htmlコードをゴミから消去するには、style属性（jqueryで作成）を削除します* /

/ *このアクションは必要ではなく、美的機能を備えています* /

$ （ これ ） 。 removeAttr （ 'style' ） ;



/ * "fool"からの保護：ボタンを繰り返し押す//ボタンを表示* /

$ （ '#start' ） 。 css （ 'display' 、 'block' ） ;

} ） ;

/ *ページをリロードまたは変更した後、サイトを表示するためにCookieを書き込みます* /

$。 cookie （ "screen" 、 size_type_1 、 {パス： '/' } ） ;



}



$ （ '#start' ） 。 トグル （ / * トグル 機能は要素（ボタン）を連続して繰り返し押します* /

function （ ） { size_screen （ window。sreen_1 、 window。sreen_2 ） ; } 、 / *最初に押す* /

function （ ） { size_screen （ window。sreen_2 、 window。sreen_1 ） ; } / * 2回目のプレス* /

） ;

} ）

この作成は、次のリンクからダウンロードできます： jquery size 、およびここを参照してください （右上隅の赤いゴミはボタンです）。



PSこの記事の著者はアレクサンダー（gmail.comのbalancev）です。誰かが招待を共有したい場合は、これがその時です。



PPS「ああ、彼は招待を求めました!!! 111」-森を通り抜けて、「友達への誕生日」やサンドボックスへのコピーペーストのために招待状を送ってください。