0

我正在创建一个使用自适应 CSS 的登录屏幕，以便登录表单中的标签内联显示在 iPhone 上的字段上以节省空间。在其他分辨率下，标签显示在字段的左侧。

我找到了本教程，但我并不真正了解 jQuery。我需要操作教程中的代码，以便该技术仅适用于移动设备。

这是使用 jQuery 的内联标签的教程： http ://www.zurb.com/playground/inline-form-labels

我已经掌握了 CSS 和自适应原则，只是我缺乏知识的 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 回答