在 HTML5 响应式布局中动态调用 jQuery 函数

Question

我正在 Drupal 中使用响应式主题 (Omega)，它检测浏览器大小并根据为某些屏幕尺寸（700px+、900px+ 和 1100px+）提供的 CSS 更改页面布局。

我相信它是通过添加媒体查询和/或向 body 标签添加 css 类来实现的。

我有一个稍微不同的函数，我想调用它以响应浏览器窗口大小的变化，但它必须是响应式的，即在不重新加载页面的情况下调用相关函数

这可以吗？

我目前有这样的事情：

$(window).resize(function(){
 var width = $("body").width();
   if(width>1100)
     { 

                        $('.accordion').gridAccordion({width:1160, height:526, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                        panelProperties:{

                        }});

     }


      if(width>900)
     { 

                    $('.accordion').gridAccordion({width:920, height:417, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                    panelProperties:{

                    }});

     }

});

这样做的问题是在我调整窗口大小之前它不会加载我的 div，并且它还需要刷新才能识别窗口已调整大小。

感谢您在这方面获得的任何帮助，在此先感谢。

编辑

所以我修改了我的代码，看起来像这样

$(window).bind('resize load',function(){ var width = $("#zone-header").width(); if(width>1100)...

这现在已经解决了 div 不能立即加载的问题，但它仍然不能解决我的调整大小问题，除非我调整大小然后刷新页面。我不禁觉得自己离一个决议如此之近，但就是不知道从这里何去何从。

Answer 1

最初不被调用可以很容易地通过简单地自己调用来解决：

$(window).resize(function(){
    // stuff
}).resize();  // fire the resize

就需要刷新屏幕而言，不应该是这样。我怀疑问题在于如果多次调用您使用的插件无法正常工作，但我不熟悉该插件。