*:visible

2012.01.15. 15:03 stack

Nem tudom, hogy ezek a függvények miért nem alapértelmezettek?

Ext.DomQuery.pseudos.visible = function (list) {
    var result = [];
    for (var i = 0, len = list.length; i < len; i++) {
        if (Ext.fly(list[i]).isVisible()) {
            result.push(list[i]);
        }
    }
    return result;
};
Ext.DomQuery.pseudos.hidden = function (list) {
    var result = [];
    for (var i = 0, len = list.length; i < len; i++) {
        if (!Ext.fly(list[i]).isVisible()) {
            result.push(list[i]);
        }
    }
    return result;
};

Szólj hozzá!

Címkék: element visible pseudo

!JQuery

2011.03.02. 07:24 stack

Azt tapasztaltam, hogy sokan csupán azért használják az ExtJS-t a JQuery könyvtárral, mert úgy gondolják, hogy azzal egyszerűbb a szelektorok használata, a CSS módosítás vagy éppen az animáció.
Pedig ezeknek mind létezik az ExtJS-es megfelelője:

DOM Basic + CSS:

$("#id, .class, div").addClass('blue');
Ext.select("#id, .class, div").addClass('blue');
$("input[type='text']").css('background', 'red');
Ext.select("input[type='text']").setStyle('background', 'red');

Effektek + Animáció:

$('#id').slideUp();
Ext.get('id').slideOut('t', {useDisplay: true});
$('#id').animate({opacity: 0.5, width: 20}, 1500, 'easeOutBounce');
Ext.get('id').shift({
    opacity: 0.5,
    width: 20,
    duration: 1.5,
    easing: 'bounceOut'
});

Szólj hozzá!

Címkék: element jquery animate

Grayscale

2010.11.18. 08:17 stack

A vBulletin fórummotornál láttam azt az érdekes ficsört, hogy IE alatt a kilépésre rákérdező ablak mögött minden fekete-fehérre változik. Szerintem kifejezetten jópofa. :)

Körülbelül így néz ki a kód:

<a href="logout.php" onclick="return log_out();">Kilépés</a>
function log_out () {
    document.body.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);';
    if (confirm('Biztos hogy ki akarsz lépni?')) {
        return true;
    }
    document.body.style.filter = '';
    return false;
}

Legnagyobb sajnálatomra az általam készített rendszereket is nagy arányban használják IE alatt, így arra gondoltam, hogy akkor ilyen nekem is kell. :)

Szólj hozzá!

Címkék: element grayscale

Forgatás

2010.05.07. 08:46 stack

Alkalmanként hátránynak tűnt, hogy míg az asztali alkalmazásoknál könnyedén lehet elemeket forgatni, addig a weben ez rendkívül körülményes. (Több helyen szerver oldali képeket használtam erre)

Mostanában egyre több CSS-sel foglalkozó blogon kerül elő a forgatás témája. Számomra meglepő volt, hogy még IE 6 alatt is (ha nem is könnyedén, de) megoldható tetszőleges fokú forgatás.

(sok bejegyzés még csak a progid:DXImageTransform.Microsoft.BasicImage(rotation=X); filtert használja, amelyben 0, 90, 180, 270 szögek valósíthatóak meg, ellenben a DXImageTransform.Microsoft.Matrix(...) filterrel már a teljes forgatás kivitelezhető)

Azt persze meg kell jegyezni, hogy IE nem az elem középpontja körül forgat, így kénytelenek vagyunk forgatás után a pozíciót javítani. De ilyen apróságon már meg sem lepődünk. :) Ám a többi böngésző sem büszkélkedhet nagyon, egyáltalán nem értem, hogy miért kell minden böngészőnek más-más property-t használni ugyanarra. Gondolom sokat gondolkodhattak az Operánál a 10.5 kiadása előtt, hogy vajon használják a szabvány transform property-t, vagy álljanak be a sorba és a -o-transform alakot használják. Gratulálok nekik. :)

Túlzottan nem mentem bele, csak próbálgattam a lehetőségeket: http://stack.hu/extjs/rotate.php

Szólj hozzá!

Címkék: element rotate

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?