Festlegung von Mindestanforderungen an die Breite und Höhe für jede gridster.js widget

Ich bin mit gridster.js kombiniert mit Jquery UI zu machen, resizable durch ziehen mit diesem bit:

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    }
});

$('.ui-resizable-handle').hover(function() {
    layout.disable();
}, function() {

    layout.enable();
});

function resizeBlock(elmObj) {

    var elmObj = $(elmObj);
    var w = elmObj.width() - grid_size;
    var h = elmObj.height() - grid_size;

    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

        grid_w++;
    }

    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

        grid_h++;
    }

    layout.resize_widget(elmObj, grid_w, grid_h);
}

wie vorgeschlagen auf GitHub:

http://jsfiddle.net/maxgalbu/UfyjW/

Muss ich angeben, minimale Breite und Höhe für jedes widget und nicht für gridster genrally.

Ist es ein offensichtlicher Weg, um diese Funktionalität zu erreichen?

Dank

InformationsquelleAutor BarakChamo | 2012-11-25
  1. 5

    Wenn es jemand hilft, ich habe es geschafft eine Lösung:

    Hinzugefügt ein data-Attribut, um jedes widget festlegen minimum von X und Y:

    data-minx="2" data-miny="2"

    Und dann schrieb die resize-Funktion:

    $('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    containment: '#layouts_grid ul',
    autoHide: true,
    start: function(event, ui) {
        var resized = $(this);
        $('.layout_block').resizable( "option", "minWidth", resized.data('minx') * grid_size );
        $('.layout_block').resizable( "option", "minHeight", resized.data('miny') * grid_size );
    },
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);   
        }, 300);
    }
});

    Statt der Einstellung eine minimale Höhe und Breite ich eine Funktion auszuführen, die auf veränderbare start

    bekommt die minx und miny Attribute und passt die Parameter für die Größe entsprechend.

    • ich danke Ihnen, sir, das war sehr hilfreich
    • In der aktuellen version (Version 0.7.0) können Sie Daten-max-sizex, Daten-max-sizey, Daten-min-sizex und Daten-min-sizey HTML-Attribute.
    InformationsquelleAutor BarakChamo
  2. 3

    Seit version 0.2.1 Sie können den build-in-resize-Funktionalität, um die widgets der Größe angepasst werden.

    Obwohl nicht dokumentiert ist, können Sie resize.min_size zu geben Sie die minimale Größe des widgets. ändern der Größe.max_size dokumentiert ist und funktioniert.

    Beispiel:

    resize: {
    enabled: true,
    min_size: [4, 4]
}
    • tolle info, funktioniert wie ein Charme. danke!!! 🙂
    • Ja aber das ist doch nicht pro widgets, das ist für das ganze Netz.
    InformationsquelleAutor R. Oosterholt
Schreibe einen Kommentar