0

アダプティブ CSS を使用するログイン画面を作成しているため、ログイン フォームのラベルが iPhone のフィールド上にインラインで表示され、スペースを節約できます。他の解像度では、ラベルはフィールドの左側に表示されます。

このチュートリアルを見つけましたが、jQuery はよくわかりません。この手法がモバイルでのみ有効になるように、チュートリアルのコードを操作する必要があります。

jQuery を使用したインライン ラベルのチュートリアルは次のとおりです: http://www.zurb.com/playground/inline-form-labels

CSS と Adaptive Principles は理解できました。知識が不足しているのは jQuery だけなので、具体的な手順を理解することで速度に追いつくことができます。

モバイルが検出された場合にのみ起動する必要がある特定の jQuery を次に示します。

$(document).ready(function(){
  $("label.inlined + input.input-text").each(function (type) {

    Event.observe(window, 'load', function () {
      setTimeout(function(){
        if (!input.value.empty()) {
          input.previous().addClassName('has-text');
        }
      }, 200);
    });

    $(this).focus(function () {
      $(this).prev("label.inlined").addClass("focus");
    });

    $(this).keypress(function () {
      $(this).prev("label.inlined").addClass("has-text").removeClass("focus");
    });

    $(this).blur(function () {
      if($(this).val() == "") {
        $(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
      }
    });
  });
});

乾杯！

4

1 に答える 1

0

あなたは404ページです。

ウィンドウの幅を確認し、それに基づいて計算を行うことができます。

if($(window).width() <= 480)

サイズ変更イベントを監視して、ウィンドウのサイズ変更も確認できます。

$(window).on('resize', function() { ... });

例えば

$(window).on('resize', function() {
  if($(window).width() <= 480) {
    $("label.inlined + input.input-text").each(function (type) {

      Event.observe(window, 'load', function () {
        setTimeout(function(){
          if (!input.value.empty()) {
            input.previous().addClassName('has-text');
          }
        }, 200);
      });

      $(this).focus(function () {
        $(this).prev("label.inlined").addClass("focus");
      });

      $(this).keypress(function () {
        $(this).prev("label.inlined").addClass("has-text").removeClass("focus");
      });

      $(this).blur(function () {
        if($(this).val() == "") {
          $(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
        }
      });
    });
  }
}).resize();
于 2012-10-23T20:52:37.230 に答える