我需要根据窗口大小调整我的搜索栏的大小，并且我需要为搜索栏调整大小功能代码

Question

我想要使用获取屏幕大小的代码以及将搜索栏调整在一起的代码。目前，其所做的一切都是以最大分辨率调整搜索栏的大小。以下是一个示例http://www.jsfiddle.net/1eddy87/R7kSA的链接。您需要不断更改分隔符的大小并以不同大小运行代码，以查看这个问题的不同之处，但我只是认为我应该提及它。

此代码获取屏幕尺寸：

var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth || g.clientWidth, 
    y = w.innerHeight|| e.clientHeight|| g.clientHeight; 

这段代码给我的大小在调整窗口的大小：

$(document).ready(function(){ 
    $(window).resize(function(){ 
     window.x = x; 
    }); 
}); 

该代码重新大小根据屏幕大小的搜索栏。我需要将这个正在调整大小的代码放入一个函数中，所以我没有继续重用代码。

if (window.x >= 1200) { 

    $('#search_bar_box').focus(function() { 
     $(this).animate({ 
      width: '600px' 
     }, 500, function() { 
      // Animation complete. 
     }); 
    }); 

    $('#search_bar_box').blur(function() { 
     $(this).animate({ 
      width: '100%' 
     }, 0.1, function() { 
      // Animation complete. 
     }); 
    }); 

} else if (window.x >= 992 && window.x < 1200) { 

    $('#search_bar_box').focus(function() { 
     $(this).animate({ 
      width: '350px' 
     }, 500, function() { 
      // Animation complete. 
     }); 
    }); 

    $('#search_bar_box').blur(function() { 
     $(this).animate({ 
      width: '100%' 
     }, 0.1, function() { 
      // Animation complete. 
     }); 
    }); 

} else if (window.x >= 768 && window.x < 992) { 

    $('#search_bar_box').focus(function() { 
     $(this).animate({ 
      width: '100px' 
     }, 500, function() { 
      // Animation complete. 
     }); 
    }); 

    $('#search_bar_box').blur(function() { 
     $(this).animate({ 
      width: '100%' 
     }, 0.1, function() { 
      // Animation complete. 
     }); 
    }); 

} else { 
    //default 
} 

Answer 1

您需要在窗口resize()事件执行你的搜索栏调整大小代码，这就是我得到了你的代码工作。看到这个jsiffdle：jsfiddle.net/R7kSA/3/

$(document).ready(function() { 
    $(window).resize(function() { 
     /* winWidth() is the function for getting the screen size. 
      set() is the function that handles the search bar resize and 
      accepts the argument value for 'x'    
     */ 
     set(winWidth()); 
    }).trigger('resize'); 
});