jQuery仅用于480像素ViewPort（手机内嵌标签）

Question

我创建了一个使用自适应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"); 
     } 
    }); 
    }); 
}); 

干杯！

Answer 1

你是404页的。

您可以根据其检查窗宽，做你的计算：

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

您可以监控resize事件，以检查窗口大小调整太：

$(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();