Témák II.

2012.05.21. 08:15 stack

Előző bejegyzésben odáig jutottunk, hogy az elkészült CSS fájlban az összes szín a megadott alapszín szerint változott. Hátra vannak még a képek: a hivatkozások rendbetétele, régi IE esetén háttérképekkel helyettesítjük a CSS3 hiányosságokat, végül át kell színezni még néhány ikont...

Szólj hozzá!

Címkék: css theme

Témák I.

2012.05.19. 12:38 stack

Eddig nem sokat foglalkoztam témák készítésével, úgy döntöttem rászánok néhány órát és megvizsgálom a lehetőségeket. Inspirálónak egy slideshow: Theming and Sass, illetve a Sencha telepítési útmutatója: Learn: Theming

Szólj hozzá!

Címkék: css theme

HtmlEditor.contentsCss

2012.05.03. 20:00 stack

Nem vagyok meggyőződve, hogy az ExtJS beépített HTML editorra a témában a legjobb választás lenne. Ám legtöbb esetben úgyis csak arra van szükségünk, hogy egyszerű szövegmódosításokat végezhessünk vagy átkapcsolhassunk forrás nézetbe és ott szerkeszthessünk, erre meg maximálisan megfelel.

Egyedül az hiányzik, hogy nem adhatok hozzá külön CSS fájlokat, vagyis adhatok, de ehhez felül kell írni a getDocMarkup függvényt:

{
    xtype: 'htmleditor',
    fieldLabel: 'Leírás',
    name: 'description',
    getDocMarkup: function () {
        return '<html><head><link type="text/css" rel="stylesheet" href="css/style.css" /></head><body class="html-editor"></body></html>';
    }
}

Az eredeti függvényben a body style-nak adtak értéket, de én ezt megadom inkább body.html-editor kezdetű szabályokkal a hozzáadott CSS fájlban.

Szólj hozzá!

Címkék: css htmleditor

CSS Lint

2012.03.19. 08:19 stack

Nemrég eljátszottam egy kicsit a CSS Lint parancssoros meghívásával. Hasznos eszköz, így mindenkinek bátran ajánlom! Két szépséghiba volt csupán. Az első, hogy a szabályoknál nem lehet használni feketelistát, azaz ha van 30 szabály, és abból nekem csupán 1 nem kell, akkor kénytelen vagyok 29-et felsorolni.

Szólj hozzá!

Címkék: css lint

...

2011.10.06. 18:26 stack

Firefox 7 telepítése után meglepve láttam, hogy az egyik táblázatomban az ikonok helyén három darab pont volt csak látható. Először azt hittem, hogy a képekkel van valami probléma, majd kis vizsgálat után észrevettem, hogy már a Firefox is ismeri a text-overflow: ellipsis; CSS szabályt.

Ennek örülünk, a méretezést meg pontosítani kell mindenhol... :)

Szólj hozzá!

Címkék: css

font-family

2011.04.15. 19:24 stack

Nemrég játszottam egy kicsit a Google Web Fonts rendszerrel.
Egyszerű és nagyszerű technológia. :)

Sajnos szembesülnöm kellett azzal, hogy a különböző böngészők a font-family értékét JavaScript-ben nem ugyanúgy kezelik. Főleg, ha az adott betűkészlet még nincs is betöltve.

Egy egyszerű CSS szabály:

.mountains {
    font-family: 'Mountains of Christmas',arial,serif;
}

Két lekérés. Az első elem a fenti CSS osztályt kapja meg, a másik elem style-ból kapja meg ugyanazt.

var el1 = Ext.getBody().createChild({
    cls: 'mountains'
});
var el2 = Ext.getBody().createChild({
    style: "font-family: 'Mountains of Christmas',arial,serif;"
});
Ext.getBody().createChild({
    tag: 'pre',
    html: el1.getStyle('font-family') + "\n" +
          el2.getStyle('font-family')
});

Eredmények:

Szólj hozzá!

Címkék: css fonts

:nth-child(...)

2010.07.09. 16:49 stack

A W3C által alkotott pseudo-class -ok közül talán az egyik legérdekesebb a nth-child, tényleg sok mindent tud. :) Ám sajnos az Ext kódjában némileg hibásan van megírva. Összedobtam egy rövid példaalkalmazást arra, hogy milyen paraméterekkel, miként viselkedik:

http://stack.hu/extjs/nth_child.php

Zöld keret az Ext, világos zöld háttér a böngésző kiválasztása, hát... tényleg nem mindenhol egyezik. :(

Szólj hozzá!

Címkék: css pseudo nth child

maskCls

2009.12.11. 23:43 stack

A mask függvény második paramétere határozza meg, hogy milyen stílusban jelenjen meg maszkolás közben a várakozó szöveg. A legtöbb ExtJS komponens az 'x-mask-loading' CSS osztályt alkalmazza, de néhány soros egyszerű CSS szabállyal könnyedén lecserélhető a várakozó animációhoz tartozó kép, illetve az elrendezés.

Szólj hozzá!

Címkék: css mask

Dinamikus CSS szabályok

2009.10.10. 23:53 stack

Ha olyan komponenst gyártunk, amelyhez legfeljebb 2 vagy 3 CSS szabály tartozik, akkor joggal megfordul az ember fejében, hogy ehhez felesleges külön .js és külön .css fájl. Azt a néhány szabályt dinamikusan is hozzá lehetne adni a rendszerhez. Teljesítmény csökkenésről szerintem értelmetlen beszélni, ellenben átláthatóbbá válna a komponensünk, ha a hozzá tartozó részek egy helyen lennénk. (természetesen a különválasztást továbbra is megtartva). És nem utolsó sorban, ha a szerver oldali keretrendszer nem kezeli külön, akkor oldalletöltésnél kevesebb kérés menne a szerverhez.

A triviális megoldás az lenne, hogy:

var style = 'body {color: blue; font-weight: bold; padding: 10px;}';
Ext.util.CSS.createStyleSheet(style);

Ám ezzel az a probléma, hogy nem definiálható CSS-sel felül. (és most IE miatt tekintsünk el az !important-tól, vagy képzeljünk oda olyan CSS szabályokat, amelyek használnak !important-ot)

2 komment

Címkék: css

Bicubic scale

2009.09.27. 00:23 stack

Végén még kiderül, hogy az IE is jó böngésző, csak ennek az ellenkezője az alapértelmezett beállítása. :)
IE 6-7 a képek átméretezését elég ratyi módon oldja meg, de egy css szabály ezen segít:

img {
    -ms-interpolation-mode: bicubic;
}

Most komolyan, ki találhatta ki, hogy ne ez legyen az alapértelmezett beállítás?
Hogy konkrétan mi a különbség azt itt megnézheted.

Szólj hozzá!

Címkék: css scale

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?