Плагин jQuery не вызывается при изменении размера окна

На веб-странице у меня есть много таблиц с class='gsresponsive'.

У меня есть плагин jQuery, который я могу указать на несколько таблиц с классом gsresponsive и обернуть их в 2 div, как показано ниже. Ширина 2-го div будет установлена ​​на 100%, если ширина экрана> 767px, иначе ширина будет установлена ​​на 1024px (если не переопределено). Когда страница загружается, будет применена соответствующая ширина, но я хочу, чтобы плагин снова вызывался при изменении размера окна. Но этого не происходит.

Почему мой плагин не запускается повторно при увеличении окна и не применяет новую ширину, когда экран переходит в любую сторону от 767 пикселей?

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

jquery window-resize jquery-plugins
person user1753622    schedule 15.02.2013    source источник
comment
никогда не пытался это сделать, но вы можете попробовать выполнить ту же инициализацию внутри $(window).resize(function(), например. $(window).resize(function() { $("table.gsresponsive").gstable(); }); однако я не знаю, решит ли это вашу проблему.   -  person martincarlin87    schedule 15.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Выражение функции, т. е. переменная updateOvalTables, объявляется после функции $.each. Он по-прежнему поднимается, но в цикле .each updateOvalTables не определен. Вы также объявляете переменные после оператора return, что немного запаздывает.

Итак, это:

$(document).on('click', foo);

var foo = function() { alert(); }

не будет работать, так как foo еще не определено, но это:

var foo = function() { alert(); }

$(document).on('click', foo);

работает, потому что foo определено!

Поэтому переместите выражение функции над циклом $.each (или измените его на объявление функции):

(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),
            $obj             = $(this),
            switched         = false;
            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);
                }    
            };

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

        function splitOvalTable(elem) {
            elem.parent().css("width", o.tblwidth);   
        }

        function unsplitOvalTable(original) {
            elem.parent().css("width", "100%");   
        }

    }
});
})(jQuery);
person adeneo    schedule 15.02.2013
comment
Я был почти готов ;о) Это сделало работу :о) Спасибо, аденео. - person user1753622; 15.02.2013
comment
@ user1753622 - пожалуйста. Не забудьте принять ответ, если он вам помог. - person adeneo; 15.02.2013

arrow_upward
0
arrow_downward

Вы пробовали использовать отдельную функцию изменения размера?

 $(document).ready(function(){
    console.log("window inizialized");
    $("table.gsresponsive").gstable();
    $(window).resize(function(){
        console.log("resize event fired");
        $("table.gsresponsive").gstable().updateOvalTables();
    });
  });
person seoservice.ch    schedule 15.02.2013