我需要根据窗口大小调整搜索栏的大小，我需要为搜索栏大小调整代码做一个函数

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');
});