Egyszerű gombkiosztás - hogyan szabhat gomb - html - css - javascript - űrlapküldés adatok

A probléma, hogy fogjuk megoldani, hogy a szokásos gombok létrehozott címkét nézd a különböző böngészőkben másképp. Továbbá, ha megváltoztatja a normál gomb méretét, egyes böngészők megjeleníteni rémes.

Kiderült, akkor tedd egy kis erőfeszítés és a szokásos alapértelmezett gombot, hogy egy elegáns és divatos, hanem az összes népszerű böngésző gomb néz egyformán jó (vagy majdnem minden majdnem jó). Most beszéljünk erről részletesen.

Minden böngésző más a véleménye

Trinity fog boncolgatni népszerű böngészők:

• Mozilla Firefox 3.5
• Opera 9.63
• IE6 (egy szem IE7, így neki!)

Itt van, hogyan kell értelmezni az egyszerű kódot Kísérleti: Elvileg semmi bűnöző. Itt csak egy szaggatott ütemű gombra FF böngésző kapcsolatba vele input fókusz, nem néz. Meg lehet távolítani. Ehhez adja meg a következő CSS tulajdonság az osztály gomb Gombok:

Most, hogy a legdivatosabb gombot, és szörnyű kívül az alapértelmezett nézet.

Typeset legdivatosabb gomb

Ez nem furcsa, de a gomb alá előre meghatározott méretű CSS-en keresztül. Tehát nyugodtan adjunk hozzá egy osztály gomb gomb irányelv szélessége és magassága:

Most lássuk, hogyan mi nagy gomb megjelenik a három kísérleti böngészők: ő csúnya üt gombra IE6. By the way, úgy néz ki IE7 vagy kicsit jobb. Ezért az alapértelmezett gomb nem illik hozzánk, és mi szabhat saját gombot.

elrendezés gombra

Így a szélessége és magassága a gombot, már definiált, így kialakult egy kulcs akkora, mint szeretnénk.

Továbbra is, hogy átalakítsa a csúnya lény a szépség.

A kezdéshez rajzoljon egy gombot a normális állapot, egy olyan államban, ha lebeg, és kattintott. Ezek a képek vannak tárolva egyetlen fájlban. Ie alkalmazni sprite technológia.

Ez a képfájl fogjuk használni, mint a háttér a gomb (CSS background-image tulajdonság).

A háttérkép mozdul, ha lebeg az egérmutatót, és rákattint. Ez létrehoz egy értelemben, hogy a gomb megnyomásakor.

Itt a háttérképet a gomb:

• Abban az esetben, az alapértelmezett background-position: 0 (elhagyható).
• Ha az egeret mozgatni a háttérképet magasságig egyik része a background-position: 0 -56px (vízszintes elmozdulás nem történik meg, a változó csak a függőleges koordináta).
• Kattintva szükséges eltolási mintát további egy részén fel background-position: 0 100%.

Együtt a háttérben offset egy jó ötlet, hogy váltani, és a szöveg a gombra. majd adjunk hozzá realizmus a gombbal érzés.

Ha az egérrel rámutat a gomb szövegét úgy csúszik le a magassága árnyéka a gombot. Kiderült, nagyon realisztikus.

elmozdulás mérete címkék (egérrel)

Képaláírás belül a gomb tolódik megadásával tulajdonságainak padding.

• Ha az egér padding-top: 4px

További egyértelműség lehetne elérni megváltoztatásával az egérmutatót, ha lebeg a gomb felett a nyíl a lábát. Legyen nagyon egyszerű, minden to-mind adja meg a kurzor tulajdonság: pointer.

Változás gombstílust egérrel és kattintások

Változtatni a stílusát, amikor az egér lebeg és a kattintások segítségével ál-osztályok: hover és: aktív.

Osztályú buttonpri hover gombra. köszönhetően a pszeudo-osztály: hover. következő stílus kerül alkalmazásra:

Background-position tulajdonság tolódik a háttérképet a második helyen, és padding-top padding elmozdulás a feliratot belül a gombot.

Alkalmazza a kívánt tulajdonságokkal, ha rákattint, akkor: aktív ál

Background-position tulajdonság eltolja a háttérképet a harmadik pozícióban egy kattintás az egérrel.

A fenti módszer nem alkalmas a IE6, mert ez ál: hover és: csak akkor aktív munkát az Címkehivatkozások a. Annak ellenére, hogy az IE7 jól működik az ál-osztályok, mert a szörnyű glyuchnosti úgy értelmezi ezt a kódot (hozzáfűzi létező snowboardosok, kiszorítja a gombot, amikor kattintva).

Ennek eredményeképpen ez a módszer használható, mint IE6 elhalt saját, azt csak az a tény, hogy ő előre telepített Windows XP; IE7 - nedobrauzer buggy lépett helyére IE8.

De mégis, ha azt szeretné, hogy a dinamikus gomb IE, a következő módszer nagyon hasznos.

A címke, amely körülhatárolja a kulcsot utasítások:

• Onmouseover funkció - aktiválódik, ha az egérmutató belép a határokat az objektumot, és alkalmazza az utasításokat található a tartalmát.
• OnMouseOut funkció - a tartalom akkor használjuk, amikor elhagyja az egérmutatót az objektum határait.
• OnMouseDown funkció - aktív, ha megnyomja az egér gombját.
• Funkció onmouseup - váltott, amikor elengedi az egérgombot.

E négy funkciókat lehet megvalósítani nagyon elviselhető kijelző gombok az összes népszerű böngésző.

Küldés formában adatkapcsolat

Lehet és nem zavarja a gombokkal, és adatküldés formában hivatkozunk. És hogyan lehet egy gombot a link mi, kedves olvasó, már tárgyalt nagy részletességgel.

Most úgy vélik, hogy ez a forgatókönyv van kialakítva.

Itt vannak az űrlap elküldése:

Ez a darab a HTML, akkor valószínűleg sejtette, egy keresési beviteli mezőbe egy megerősítő kezdeni a keresést, ha rákattint a linkre „Keresés”.

Ez a szkript fogja tenni küldését (nyújtson () metódus) tartalom mezőt alkotnak felvezető.

Légy óvatos! Ne tudjunk myForm elemek name = „submit”. különben küld a forgatókönyvet kell majd alkalmazni ezt az elemet adatokat produkál.

Andrew, köszönöm ezt és Stas, és különösen a során a blokk elrendezés. Én egy kezdő kóder, és az órák 2 hét, kaptam egy csomó dolgot. Mintegy gombok nem is gondoltam, de nem mostanában teszt munkahelyről, ott csak tudomásul B) ... a cikket ... Igazából nincs is szükség a beviteli mezőbe egyszerűen szokatlan, azt mondanám, egy kifeszített ovális. Próbáltam ugyanúgy, hogy próbálja meg, hogy nem működött. Golf kapok magas, és a probléma az volt, hogy az Opera tex terén nem a közepén, és van nyomva a tetején, a többi böngésző közepén, mert a tapasztalatlanságuk, köpni mindent, és csak fel bemenet felett div (a minta) B)

Ez jó, hogy saját, egy másik megközelítés, képes elérni a kívánt eredményt. Az a tény, hogy egy bizonyos feladat az elrendezés lehet több helyes megoldás, és mindegyikük lesz a pluszok és mínuszok. Ha írsz kódot kompatibilis, logikus felépítésű, akkor feltételezhető, hogy a probléma megoldódott-e.

Igen, szeretnék adni - ha a XHTML - változás a JS része az összes nagy karakter a kis - egyébként valibatsiyu nem fog múlni.
-----------
Nagybetűket XHTML címkék

Az XHTML eltérően HTML elem és attribútum nevét kell csupa kisbetűvel. Például, onMouseOver érvénytelen attribútum XHTML, ami szükségessé teszi a onmouseover helyett. Vagy jól van HTML-ben.

És mit csinál egy string a kódot?
Itt van, hogy ez:
1 .button: lebeg 2 background-position: 0 -56px;
3 padding-top: 4px;
4>

Köszönöm. Nagyon hasznos. Különösen részben formában benyújtott myform.submit (); (Én használni, hogy adatokat küldjön a bemenet (type = »gombot»), mert a type = »benyújtja» nem volt lehetséges).

Én egy webmester, és tanár. Érdekel a technikai oldala online üzlet.

Szeretek tanulni különböző technikai szempont, hogy megértsük, hogyan működik, és mondjuk el másoknak.

Élek Moszkva, Oroszország.

Élek Mariupol, Ukrajna.

Élek Lviv, Ukrajna.