Wie man jQuery resizable erzwingt, um Prozentsatz zu verwenden?

9

Ich versuche, die jQuery resizable zu verwenden, um mein div zu skalieren, ich habe es ziemlich gut funktionieren, außer dass nach dem stop -Ereignis, jQuery UI würde meinen % -Wert zurück zu pixel -Wert.

Ich habe eine funktionierende Geige hier: Ссылка

Wenn Sie den Container current zum ersten Mal ziehen, würde er den gesamten Wert korrekt berechnen, aber nach dem stop -Ereignis würde jQuery UI den% aktualisieren und ihn wieder in Pixel ändern ... also das nächste Mal Sie ziehen es erneut, das% ist verloren.

Wie erzwingen Sie, dass jQuery den Breitenwert auf% setzt? Ich könnte technisch etwas wie setTimeout verwenden, aber das wäre viel zu hässlich.

Und ich möchte keine Lösung, um die divs in Pixel zu manipulieren, da ich n-divs in meinem Setup technisch hinzufügen könnte und dieser Code mit% sollte mit n-divs arbeiten.

Wenn Sie sich mein neighbor div ansehen, wird% dort beibehalten, nur das current wurde überschrieben. Ich habe auch versucht, direkt mit ui.element herumzuspielen und ui.size.width auf% zu setzen, aber das funktioniert auch nicht.

Aktualisieren : Eine Problemumgehung besteht darin, die Daten jedes Mal beim stop -Ereignis zu speichern und nie wieder bei start zu überprüfen. Dies löst jedoch immer noch nicht das Problem mit stop gibt einen falschen Pixelwert zurück. Siehe aktualisiert jsFiddle: Ссылка

Wenn nur jQuery in der Größe veränderbar ist, nehme ich meinen% -Wert, alles hätte wie erwartet funktioniert.

Gelöst : Nun, ich habe die Antwort von apaul34208 akzeptiert, da ich gefragt habe, wie% verwendet werden soll. Um das zu lösen, was ich ursprünglich lösen wollte, benutze ich stattdessen Pixel. Sehen Sie sich die Antwort an, die ich weiter unten gepostet habe, wenn Ihnen diese Antwort weiterhilft, bitte beachten Sie das stattdessen.

    
codenamezero 01.12.2014, 17:27
quelle

4 Antworten

8

Ich bin auf dasselbe Problem gestoßen und die gewählte Lösung funktioniert nicht für mich, weil ich dies für eine beliebige Anzahl von Spalten verallgemeinern muss. Auch die Antwort von codenamezero hat nicht mit der Tatsache zu tun, dass die ursprüngliche Frage erfordert, dass Prozentsätze für Breiten verwendet werden.

Für meinen Fall ist die Verwendung von Prozentangaben für die Breite wichtig, weil ich einen Tabelleneditor implementiere und die Tabelle, die gespeichert wird, dynamisch die Größe ändern muss, abhängig davon, wo sie gerendert wird.

Also habe ich diese Lösung gefunden, die ähnlich wie die Lösung von codenamezero funktioniert, aber im Stop wurden die geänderten Breiten als Prozentsätze eingestellt:
Ссылка

%Vor%

Bitte wählen Sie diese Lösung, damit andere nicht ihren Morgen damit verbringen, sich die Haare auszuziehen, um die Lösung von apaul34208 für den n-Säulen-Kasten zu verallgemeinern. (Wie ich es tat!)

    
genspire 16.01.2015, 20:44
quelle
1

Nachdem ich einen weiteren Morgen gehämmert habe, habe ich endlich die perfekte Lösung gefunden. Es war eigentlich viel einfacher als ich dachte, nur dass ich die Dinge verkompliziert habe.

Ich habe versucht, seine dynamische Größe von ui.helper zu erhalten und versucht, das Nachbarelement am stop zu manipulieren. Aber was mich wirklich interessiert, ist die Breite von this element und die Breite des direkten Nachbarelements ... also mache ich folgendes:

%Vor%

Diese Lösung funktioniert für n + 1 DIVs, die Seite an Seite sitzen. Wenn Sie die Breite mit der Höhe umdrehen, funktioniert es auch mit vertikal gestapelten DIVs. :)

Prost!

Working jsFiddle

Hinweis: Die Ghost- und Animate-Option von jQuery-UI gibt nach wie vor ein seltsames Problem. Dies ist ab jQuery 2.0.2 und jQuery-UI 1.10.3, hoffentlich würden sie es bald patchen.

    
codenamezero 02.12.2014 15:53
quelle
0

Ich musste Geist entfernen und animieren und zwicken Sie Ihre CSS ein wenig, display: flex; schien zu unerwarteten Ergebnissen zu führen, aber ich denke, dass ich über eine einfache Lösung gestolpert bin:

Arbeitsbeispiel

%Vor% %Vor% %Vor%     
apaul 02.12.2014 01:55
quelle
0

Ich weiß, dass meine Antwort keine "gute Übung" ist, weil Sie eine häufig aktualisierte Bibliothek anpassen müssen, aber sie hat mein Problem gelöst: Ändern Sie die Funktion "resize" in der Datei jquery-ui.js, um die Breite wie gewünscht zu ändern. In meinem Fall brauchte ich die Größe, um die Breite komplett zu ignorieren, also habe ich die Änderung "Breite" auskommentiert:

%Vor%     
gus 08.08.2016 22:06
quelle

Tags und Links