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. :)

Mivel a böngésző confirm függvénye helyett az Ext.Msg.confirm függvényt használom, ezért a sima document.body színtelenítése magát az confirm ablakot is színtelenítené. Ennek elkerülése miatt a fentieknél kicsivel hosszabb kóddal kell számolnunk...

Első lépésben az Element osztályhoz hozzárendelem a színtelenítést:

Ext.Element.addMethods(function () {
    var grayscaleFilter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);';
    return {
        addGrayscale: function () {
            this.removeGrayscale();
            if (Ext.isIE) {
                this.dom.style.filter += grayscaleFilter;
            }
        },
        removeGrayscale: function () {
            if (Ext.isIE) {
                this.dom.style.filter = this.dom.style.filter.replace(grayscaleFilter, '');
            }
        }
    };
}());

Második lépésben az összetételnek is meg kell adni ezeket a függvényeket. Nem biztos, hogy ez a legelegánsabb megoldás, én a következő módon szoktam ezt megoldani:

Ext.each(['addGrayscale', 'removeGrayscale'], function (fn) {
    Ext.CompositeElementLite.prototype[fn] = function () {
        var args = arguments;
        this.each(function (item) {
            item[fn].apply(item, args);
        });
    };
});

Mivel a document.body -t nem színezhetem át, ezért helyette a látható gyerekelemeit fogom átszínezni, ami például a Ext.getBody().select('> *:visible') utasítással kapok meg.

Tehát a fenti kód az alábbi módon változott meg:

<a href="logout.php" onclick="return log_out(this);">Kilépés</a>
function log_out (link) {
    var items = Ext.getBody().select('> *:visible'),
        title = 'Kilépés',
        msg = 'Biztos hogy ki akarsz lépni?';
    Ext.Msg.confirm(title, msg, function (btn) {
        if (btn === 'yes') {
            document.location.href = link.href;
        } else {
            items.removeGrayscale();
        }
    });
    items.addGrayscale();
    return false;
}

Szólj hozzá!

Címkék: element grayscale

A bejegyzés trackback címe:

http://extjs.blog.hu/api/trackback/id/tr642456451

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.

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?

Tetszett a bejegyzés? Kövesd a blogot!

blog.hu