Utwórz elementy automatycznej zmiany rozmiaru za pomocą Scalable.js

Jeśli potrzebujesz tworzyć elastyczne elementy, które automatycznie wypełniają swoje pojemniki Gorąco polecam Skalowalny. Ten darmowy skrypt JS o otwartym kodzie źródłowym jest idealny do tworzenia płynnego projektu bez większego stresu.

Wszystko w bibliotece Scalable.js jest plastyczne, dzięki czemu można zmieniać styl, rozmiar, pozycję i zawartość każdego kontenera. Potrzebujesz elementów wyrównanych do góry lub dołu strony? Skalowalny ma do tego opcje.

Rzuć okiem na repozytorium GitHub, aby dowiedzieć się więcej o tym, jak to działa.

W swojej najbardziej podstawowej formie skrypt ten pobiera element strony docelowej wraz z niektórymi opcjami dostosowywania wyświetlacza. Oto przykładowy kod pobrany bezpośrednio z GitHuba:

var skalowalny = nowy Skalowalny (containerEl, opcje);

Oczywiście pierwszym parametrem jest dowolny element kontenera, na który kierujesz (najlepiej a

lub coś podobnego).

Parametr options powinien przyjmować tablicę par klucz => wartość. Opcje te obejmują wartości wysokości kontenera, minimalne i maksymalne szerokości, wraz ze skalami min i max (tj. ile może skalować z elementami wewnętrznymi).

Zajrzyj na główną stronę projektu, aby zobaczyć dostępne demo. Możesz przeciągać narożniki kontenera, aby automatycznie zmienić rozmiar elastycznego elementu wewnątrz. Jest to całkiem fajne, ponieważ poniżej tego obszaru znajdziesz użyteczny kod zrobione bezpośrednio ze strony.

Istnieją sposoby na obsługę elementów elastycznych za pomocą czystego CSS. Jednak te metody mogą wydawać się przestarzałe i nie oferują tak dużej kontroli, jak JavaScript.

Jeśli chcesz to wypróbować, po prostu pobierz kopię z GitHub i zobacz, co myślisz.

Skalowalność jest nadal aktywnie rozwijana, ale jest to prosty skrypt do edycji dla Twoich potrzeb.