Készítsen eszközblokkokat a böngészőben az DeviceMock segítségével

Az interneten rengeteg ingyenes eszközminta létezik, a PSD-ktől a vázlatfájlokig. De mi van, ha gyorsan tudnál építsen a gépen a gépkocsikat böngészőjében?

Nos, köszönhetően az embereknek az rm-labo-nál! A szabad jQuery plugin, az DeviceMock.js lehetővé teszi tekerje be a vektor eszközt bármely oldalelem körül, egyszerű JavaScript és SVG-k használatával.

Szóval, pontosan hogyan működik ez?

Nos, először szükséged van a jQuery másolatát és A GitHub eszköz Deviceock programcsomagjának verziója. Ez egy JS-fájl, CSS-fájl és néhány SVG-fájl lesz, hogy létrehozza az aktuális eszközöket.

tudsz bármilyen típusú elemet céloz az oldalról, egy egyszerű képből egy egész divra, vagy akár egy beágyazott elemre, például egy iframe-re. Ez azt jelenti, hogy még hűvös mini-böngésző közvetlenül a webhelyén egy iframe-el egy másik oldalra.

Ez a bővítmény támogatja öt különböző eszköztípus:

1. böngésző
2. Smartphone
3. Tabletta
4. Desktop
5. hordozható számítógép

Mindezek a modellek használhatók lapos design stílusok mivel SVG-kkel épültek. És mindannyian meglehetősen hasonlítanak az Apple készülékekhez, például az okostelefon, amely az iPhone klónja és az asztali monitor az iMachoz hasonlóan néz ki.

Mindezek a vektorok könnyen hozzáadhatók, és a rendszerben dolgoznak minden böngésző SVG támogatással.

Még tulajdonságok megváltoztatása mint például a makett méret, téma (fehér / fekete) és tájolás (álló tájkép).

Ha a böngésző makettjét is használhatja adja meg a dummy URL-t a címsorban. Ez egy szórakoztató mód a további testreszabás hozzáadásához.

Ez a könyvtár nem lesz hasznos mindenkinek, hanem az megoldja a rést hogy sok UI / UX fejlesztő szembesül a prototípusok készítésével.

További információért látogasson el a GitHub oldal vagy nézd meg a élő webhely aktív demóért.