Easing list

2010.01.19. 08:36 stack

Először a Prototype JS keretrendszerben láttam azt a megoldást, hogy elem mozgatásánál megadhatunk egy segédfüggvényt, amelynek segítségével az egyenes vonalú mozgás helyett különböző típusú mozgásokat egyszerűen lehet megvalósítani: Lassabban induljon, majd begyorsuljon; a végén pattogjon; menjen kicsit túl aztán vissza, illetve ehhez hasonló jópofaságok…

ExtJS-ben aránylag szép számmal vannak ilyen függvények. Az alábbi linken összegyűjtöttem ezeket: http://stack.hu/extjs/easing_list.html (mindegyikre egy-egy példa, illetve egy grafikon, hogy jobban látszódjon pontosan „merre” is ment az elem)

Az elemek mozgatásáról már volt szó itt: http://extjs.blog.hu/2009/05/02/pozicionalas

Szólj hozzá!

Címkék: pozicionálás easing

pozicionálás

2009.05.02. 12:03 stack

Az ExtJs előnyeit leginkább akkor látja meg az ember, ha egy feladatot a körülmények miatt más eszközökkel kell megoldani, és tudja, hogy mindez Ext-ben csupán néhány sor lenne.
E gondolat nemrég az elemek pozicionálása okán jutottak eszembe.

Például hozzunk létre egy 300x300-as piros négyzetet és tegyük a képernyő közepére:

var el = Ext.getBody().createChild({
    style: 'width: 300px;height:300px;background-color:red;'
});
el.alignTo(Ext.getBody(), 'c-c');

A második utasításhoz némi magyarázat:
Az újonnan létrehozott elemet helyezzük el a document.body-hoz képest úgy, hogy a body közepe illeszkedjen az elem közepéhez.

Ha azt szeretnénk, hogy a böngésző átméretezése után is legyen középen, akkor az alignTo függvény helyett használjuk az anchorTo függvényt.

Vegyünk egy másik példát, hozzunk létre két 100x100-as négyzetet, és tegyük úgy a képernyő közepére őket, hogy egymás mellett helyezkedjenek el és köztük legyen 10 pixel távolság.

Szólj hozzá!

Címkék: pozicionálás element alignto anchorto

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?