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