1

javascript/jqueryとcssを使用して次のレイアウトを実現したいと思います。jquerymobileで作成されたプロジェクトがあります。意図したとおり、ヘッダー、コンテンツ、フッターがあります。私のフッターには何も入っておらず、ページの下部に浮かんでいます。私のコンテンツは動的なフォームで、下部に[送信]ボタンがあります。送信すると、ボタンが付いた別のフォームが表示されます。ボタンは常にフォームの右下にあります。

フォーム内のコンテンツに応じて、ボタンはフォームの下に浮き、右に揃える必要があります。フォームの内容が小さく、画面が覆われていない場合は、ボタンをフッターの上にドロップして右揃えにする必要があります。フォームのコンテンツが画面サイズよりも大きい場合、ボタンはフォームのコンテンツの下に固定する必要があります。

jqueryメソッドを使用して画面のサイズを取得し、css設定をボタンに設定しようとしましたが、これにより固定属性が与えられ、画面を変更しても変更されません。

  var innerHeight = $('#contents').height();
  alert(innerHeight);
  var screenHeight = window.innerHeight;
  alert(screenHeight);
  if(innerHeight < screenHeight) {
    $('#contents').css("height", screenHeight-120);
  }

モバイルで表示した場合に横向きと縦向きで適切にレンダリングされるように、これを動的にしたいと思います。すべての提案をありがとう。

4

2 に答える 2

1

そのボタンのスティッキーフッターを探しているようですね：http ：//www.cssstickyfooter.com/

スティッキーフッターには、少なくとも投稿で言及した固定位置のフッター要素の高さを埋めてください（これにより、ボタンが非表示になることはありません）。

注：この設計でのユーザーエクスペリエンスを再考することをお勧めします。
「送信/次へ」ボタンの位置は直感的で一貫している必要があります。

例：フォーム＃1には、入力フィールドからわずか数ピクセル離れたボタンがあります。フォーム＃2には、入力の下100pxにボタンがあります。私にとって、それは悪いデザインです。これはフォームです。ユーザーが特定の方法で動作することを期待するツールです。フォーム送信プロセス全体で非常に特定の場所がない限り、送信ボタンの場所で「遊ぶ」ことは悪い考えだと思います。

たぶん、ページ間で入力カウントのバランスをとることと組み合わせた粘着性のあるフッターは、「欲しい」と「必要」の両方の最高のものを与えるでしょう

于 2012-09-11T17:06:53.447 に答える
0

CSSでメディアクエリを使用して、目的の効果を得ることができます。私がJavaScriptを書くのが好きなのと同じくらい、CSSはこのためのより良いリソースです。http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

*補足として、メディアクエリはIE8ではネイティブにサポートされていません。ただし、主な目的は、モバイル向けのレスポンシブデザインを用意することです。これは、CSSが適切に処理します。

于 2012-09-11T16:43:38.937 に答える