Web ページには、すべて class='gsresponsive' を持つ多くのテーブルがあります。
クラスgsresponsiveで複数のテーブルを指し、以下のように2つのdivでラップできるjQueryプラグインがあります。画面幅 > 767px の場合、2 番目の 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);