在网页上,我有许多表都带有 class='gsresponsive'。
我有一个 jQuery 插件,我可以使用 gsresponsive 类指向多个表,并将它们包装在 2 个 div 中,如下所示。如果屏幕宽度 > 767px,则第二个 div 宽度将设置为 100%,否则宽度将设置为 1024px(除非被覆盖)。当页面加载时,将应用适当的宽度,但我希望在调整窗口大小时再次调用插件。但这并没有发生。
当屏幕在 767px 的任一侧时,为什么我的插件不会在窗口增大时重新运行并应用新宽度?
<div style="overflow:auto;">
<div style="width:100%"> <!-- screen size dependant-->
<table> ....</table>
</div>
<div>
我的插件是这样调用的......
$(document).ready(function() {
$("table.gsresponsive").gstable();
});
我的插件看起来像这样......
(function($) {
$.fn.extend({
gstable: function(options) {
//Define default options.
var defaults = {
scrsplit : 767, //Modify table when screen gets to this size.
tblwidth : "1024px" //Default table width when on a small screen (screen width < scrsplit).
}
var o = $.extend(defaults, options);
var $obj = $(this);
return this.each(function() {
$obj.wrap("<div class=\"table-wrapper\" style=\"overflow:auto;\" />");
if ($(window).width() < o.scrsplit){
$obj.wrap("<div style=\"width:"+o.tblwidth+"\" />");
} else {
$obj.wrap("<div style=\"width:100%;\" />");
}
$(window).load(updateOvalTables);
$(window).bind("resize", updateOvalTables);
});
var switched = false;
var updateOvalTables = function() {
alert('updating');
if (($(window).width() < o.scrsplit) && !switched ){
switched = true;
splitOvalTable($obj);
//return true;
} else if (switched && ($(window).width() > o.scrsplit)) {
switched = false;
unsplitOvalTable($obj);
}
};
function splitOvalTable(elem) {
elem.parent().css("width", o.tblwidth);
}
function unsplitOvalTable(original) {
elem.parent().css("width", "100%");
}
}
});
})(jQuery);