PHP alət göstərişləri. HTML alət ipucu və onun həyata keçirilməsi. Başımızın altında nə var
Müəllifdən: Salam. Alət ipucu siçanı elementin, adətən şəklin üzərinə gətirdiyiniz zaman görünən kiçik izahlı mətndir. Bu gün biz HTML-də müxtəlif yollarla necə alət ipucu edə biləcəyinizi nəzərdən keçirəcəyik.
Standart göstərişVarsayılan olaraq, başlıq atributu izahlı mətnin göstərilməsinə cavabdehdir. O, müxtəlif elementlər üçün istifadə edilə bilər, lakin adətən yalnız onların göstərdiklərini izah etmək üçün şəkillər üçün istifadə olunur.
Əvvəlki məqalələrin birində şəkil ölçüləri ilə işləməyi göstərmək üçün bir pələng təsvirindən istifadə etdim. Əgər zehmet olmasa, bu şəkili yenidən istifadə edəcəm. Beləliklə, ipucu göstərmək üçün sadəcə başlıq atributunu əlavə etmək və orada istədiyiniz mətni yazmaq lazımdır.
< img src = "tiger.jpg" title = "Bu pələngdir" > |
Bir söz və ya bir neçə cümlə ola bilər. Və bu belə görünür:
İpucu, sürüşdükdən dərhal sonra deyil, bir müddət sonra rəvan görünür. Bu standart davranışdır.
Belə bir ipucu ilə əsas problem onun stilizə edilə bilməməsidir. Bu problemi necə həll etmək olar? Biz başqa yollarla ipucu verməliyik. İndi sizə bir cüt göstərəcəyəm.
Təmiz css üsuluŞəkil üçün işarəni gözəl göstərməyə imkan verən çox maraqlı bir yol. HTML işarələməsi sadədir, yalnız şəkil blok konteynerinə daxil edilməlidir, biz ona identifikator təyin edəcəyik ki, sonradan ona üslublarda müraciət edək:
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
Burada sizə aydın olmayan yeganə şey data-name atributudur. Məsələ ondadır ki, bu, öz-özünə heç bir şey etməyən sözdə məlumat atributudur, lakin onun dəyəri css və javascript-də istifadə edilə bilər ki, bu da onu bəzi hallarda faydalı edir. Bunu növbəti dəfə görəcəksiniz.
Beləliklə, əvvəlcə konteyner üçün üslubları təsvir edək. Bizə nisbi yerləşdirmə lazımdır, çünki biz bloku mütləq şəkildə izahlı mətnlə yerləşdirəcəyik ki, yerləşdirmə bütün səhifəyə deyil, ana bloka nisbətən baş versin.
#pələng(mövqe: nisbi; ekran: inline-block; )
#pələng( mövqe: nisbi; ekran: inline - blok; |
Block-line displey blokun (və onunla birlikdə yaradacağımız alət ipucu ilə blokun) pəncərənin bütün eni boyunca uzanmasının qarşısını alacaq. Yalnız ipucunun özünü yaratmaq qalır. CSS-də bunu psevdo elementlərdən istifadə etməklə etmək çox rahatdır. Bunun kimi:
#tiger:hover:after ( məzmun: attr(data-name); mövqe: mütləq; sol: 0; alt: 0; fon: rgba(5,13,156,.55); rəng: #fff; mətni align: mərkəz font-family: font-size: 14px width: 100%;
#pələng:hover:sonra ( məzmun : attr (məlumat - ad ); mövqe: mütləq; sol: 0; alt: 0; fon: rgba(5, 13, 156, . 55); rəng: #fff; mətni hizalayın: mərkəzə; şrift ailəsi: kursiv; şrift ölçüsü: 14px; doldurma: 3px 0; eni: 100%; |
Çox kod var, amma burada mürəkkəb bir şey yoxdur. #tiger:hover:after selektoru aşağıdakı mənaları ifadə edir: biz şəkli olan blokun üzərinə gətirdiyimiz zaman psevdo element yaratmalıyıq (sonra qaydalar əyri mötərizələrdə verilmişdir). Məzmun: attr(data-name) xassəsi blokun mətn dəyərini təyin edir. Şəkil sarğı blokunun data-name atributunda yazılanlara bərabər olacaq.
Bu alət ipucu siçanı şəklin üzərinə gətirdiyiniz zaman görünür, lakin standartdan fərqli olaraq, o, bunu qəfil edir və görünüşün özü siçrayış anında dərhal baş verir. Bu halda, hamar keçidi həyata keçirmək mümkün olmayacaq, çünki pseudo-elementlər üçün hamar keçidlər dəstəklənmir.
Metod 2. Saf css və hamar görünüşBununla belə, kodu bir az yenidən yazmaqla siz alət ipucunun hamar görünüşünə nail ola bilərsiniz və yenə də javascript istifadə etmədən.
Sonra sizə göstərəcəyim 2 effekti özünüz görmək üçün Notepad və ya hər hansı rahat kod redaktorunu açıb məndən sonra hər şeyi təkrar etməyi məsləhət görürəm. Düzdür, bunun üçün hələ də stil faylı daxil etməlisiniz, baxmayaraq ki, üslublar html-də teqlərdə də yazıla bilər
Beləliklə, bu nümunə üçün kod bir az fərqli olacaq və bunun səbəbi biz psevdo elementdən istifadə etməyəcəyik. Məhz buna görə hamar dəyişiklikləri tətbiq etmək mümkün deyildi. Bu dəfə kod belə görünəcək:
Sumatra pələngi
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >Sumatra pələngi< / div > < / div > |
CSS kodu heç bir böyük dəyişikliyə məruz qalmayıb:
#tiger2( mövqe: nisbi; ekran: inline-block; ) #tiger2 .text ( keçid: hamısı 0,6s; qeyri-şəffaflıq: 0; mövqe: mütləq; sol: 0; alt: 0; fon: rgba(5,13,156,. 55); font-family: padding: 3px 0 (miqyas: 0;
#pələng2( mövqe: nisbi; ekran: inline - blok; #tiger2 .mətn ( keçid: bütün 0.6s; transform:miqyas(0); #tiger2:hover.text( qeyri-şəffaflıq: 1; |
Biz yalnız məzmun xassəsini silirik, çünki o, yalnız psevdo elementlər tərəfindən dəstəklənir. Hamar vəziyyət keçidlərini yaradan keçid xassəsini əlavə edirik. Yaxşı, qeyri-şəffaflıq: 0 alət blokumuza tam şəffaflıq verəcək, ona görə də səhifədə görünməyəcək.
Bir blokun üzərində hərəkət edərkən, alət ipucu ilə normal şəffaflığı bloka qaytarmaq kifayətdir. Hazır. Elementin rəvan göründüyünü yoxlaya bilərsiniz.
Css3 istifadə edərək elementi başqa yolla gizlədə bilərsiniz. Məsələn, transformasiyalardan istifadə. Tam şəffaflığı bu xassə ilə əvəz edin: transform: miqyas(0) və blok ölçüsü sıfıra enəcək, ona görə də sadəcə ekranda olmayacaq. Şəkli olan blokun üzərinə sürdükdə, normal ölçüsü belə qaytarmalısınız: transform: miqyas(1). Bu vəziyyətdə görünüş effekti daha da gözəl görünəcəkdir. Bunu özünüz görə bilərsiniz.
Gördüyünüz kimi, css-də alət ipucu da gözəl effektlərlə yavaş-yavaş görünə bilər.
digər üsullarjQuery sizə daha çox imkanlar verə bilər. Bu kitabxanadan istifadə edərək, ya özünüz ipucu göstərmək üçün kod yaza və ya bunu artıq həyata keçirən bəzi plaginləri tapa bilərsiniz.
Məsələn, Bootstrap çərçivəsi də çoxlu hazır komponentlərə malikdir və onlardan biri də alət məsləhətləridir. Siz eyni göstərişləri yaratmağa və onlardan istifadə etməyə imkan verən kod nümunələri üçün çərçivə üçün sənədlərə baxa bilərsiniz. Bütün Bootstrap-ı birləşdirmək lazım deyil, ümumiyyətlə yalnız alət ipuçları kimi bir komponenti tərk edə bilərsiniz, yalnız onu yükləyə və birləşdirə bilərsiniz.
Ümumiyyətlə, bu gün mən sizə CSS-də kəskin və hamar görünüşlü gözəl alət ipucunu hazırlamağın yollarını göstərdim, əlavə olaraq sizin arsenalınızda Bootstrap və jQuery var. İstənilən şeyi seçin və saytlarınızda maraqlı və gözəl məsləhətlər tətbiq edin!
Bu gün biz CSS istifadə edərək alət ipuçlarını yaradacağıq. Alət məsləhətləri, məsələn, başlıq atributunda onun təsviri varsa, keçidin üzərinə getdiyiniz zaman gördüyünüz şeylərdir.
Alət ipucu həm linklər, həm də şəkillər üçün istifadə edilə bilər.
İşlənmiş formada alət ipucu belə görünür:
Alət ipucu başlıq atributundan istifadə edərək standart sistem metodundan istifadə etməklə göstərilir.
Dekorsuz alət ipucu ilə standart keçid kodu:
Link
Alət göstərişi CSSSiz CSS-dən istifadə edərək alət ipucunuzu tərtib edə bilərsiniz. Üç varianta baxacağıq CSS-də alət ipucu.
Təəssüf ki, başlıq dizaynı üçün heç bir CSS “resepti” yoxdur, ona görə də biz əlavə atributlar əlavə etməli, onların dizaynını təyin etməli və onları gözəl etmək istədiyimiz link/şəkil koduna əlavə etməli olacağıq. alət ipucu CSS.
Birinci nümunədə edəcəyik alət ipucu CSSşəklin üstündə, ən aşağısında.
Bunun üçün biz iki atributdan istifadə edəcəyik: şəkil, alət ipucunun işləməsi üçün isə ::after və data-text-dən istifadə edəcəyik ki, bu da ipucunun mətnini göstərsin.
Bu nümunə üçün CSS üslubları:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .şəkil (ekran : inline-block ; mövqe : nisbi ; ) .şəkil : hover :: after ( content : attr (data-text) ; /* Tooltip mətnini göstərin */ mövqe : mütləq ; sol : 0 ; sağ : 0 alt : 0px ; /* Alət ipucunun yeri */ z-index : 1 ; və onun şəffaflıq səviyyəsi */ color : #fff ; /* Mətn rəngi */ text-align : center ; -size : 11px / * Tooltip mətn ölçüsü */ padding : 5px 10px /* Kenarlar */ haşiyə : 1px solid #333 /* Border options */ ; |
Şəkil ( displey: inline-block; mövqe: nisbi; ) .image:hover::after ( content: attr(data-text); /* Tooltip mətnini göstərin */ mövqe: mütləq; sol: 0; sağ: 0; alt: 0px; /* Alət üçün ipucunun yeri */ z-index: 1; color: # fff; /* Mətn rəngi */ text-align: center; * İpucu mətn ölçüsü * / padding: 5px 10px /* kənarlar */ haşiyə: 1px bərk #333 /* Sərhəd seçimləri */ )
| 1 | 
|
Nəticə:
Bu dizayn bağlantılar üçün işləməyəcək, ona görə də onlar üçün bir qədər fərqli variantlardan istifadə edəcəyik.
Birinci seçim linkin üstündə alət ipucunu göstərəcək.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka( displey : inline ; mövqe : nisbi ; ) .podskazka : hover : sonra ( fon : #333 ; fon : rgba (204 , 102 , 0 , .8); sərhəd radiusu : 5px ; alt : 26px ; rəng : #fff məzmun : attr (title) : padding : mütləq genişlik : auto . color : #cc6600 transparent : 6px 0 6px content : "" ; |
Podskazka( displey: inline; mövqe: nisbi;).podskazka:hover:after( fon: #333; fon: rgba(204,102,0,.8); sərhəd-radius: 5px; alt: 26px; rəng: #fff; məzmun: attr(title); padding: 5px 15px; mövqe: width: auto;).podskazka:hover:before( /* alət ipucu blokunun altına ox əlavə edin: bərk; sərhəd-rəng: #cc6600 transparent: 6px 6px 0 6px məzmun: "";
Link
Və son seçim linkin altında alət ipucunu göstərməkdir. Seçim əvvəlkinə bənzəyir, yalnız alət ipucu aşağıda göstərilir.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip ( mövqe : nisbi ; /* Elementi göstərişlər üçün əsas edin */ kursor : kömək ; ) .tooltip span ( mövqe : mütləq ; /* elementi axından çıxarın */ margin-left : -30000px ; / * Və onu ekranın kənarının arxasında gizləyin */ background-color : rgba (0 , 0 , 153 , .8) /* pop-up blokunun fonu */ color : #fafafa ; padding : 10px /* Padding */ -webkit -border-radius: 5px ; /* Yuvarlaq künclər */ -moz-border-radius: 5px .tooltip : hover span ( /*; Üzərində hover */ margin-left : 0 ; çox üst */ üst : 30px ; */ hündürlük : 0 ; sərhəd- alt : 10px bərk #000099 ; /* Üçbucağın rəngini və hündürlüyünü təyin etmək üçün alt haşiyədən istifadə edin */ border-right : 30px solid transparent ; /* Sağ - üçbucağın eni sağa */ mövqe: mütləq; /* Əsas bloka nisbətən mövqe */ top : -10px ; sol: 10px; ) |
Alət ipucu ( mövqe: nisbi; /* Elementi göstərişlər üçün əsas edin */ kursor: kömək;).tooltip span ( mövqe: mütləq; /* Elementi axından çıxarın */ margin-left: -30000px; /* Və onu ekranın kənarında gizlədin */ background-color: rgba(0,0,153,.8); * Padding */ -webkit-border- radius: 5px; /* küncləri yuvarlaqlaşdırın */ -moz-border-radius: 5px; -khtml-border-radius: 5px; ( /* Hover üzərində */ margin-left : 0; /* Bloku ekranın uzaq kənarından yerinə qaytarın */ eni: 250px; /* Genişliyi təyin edin */ z-index: 1000; /* Yerləşdirin ən yuxarıda */ /* Əsas bloka nisbətən yerləşdirin */ top:30px ; /* Üst doldurma */ sol:20px; /* Sol padding */ ).tooltip span:after( content: ""; /* Əlavə edilmiş məzmun */ width:0; /* Gizlət, onu 0-a çevir */ border-bottom: 10px solid #000099 /* Üçbucağın rəngini və hündürlüyünü təyin etmək üçün *; / haşiyə-sağ: 30px şəffaf şəffaf; /* Sağ - üçbucağın eni sağa */ mövqe: mütləq; /* Əsas bloka nisbətən mövqe */ top:-10px; sol: 10px;)
və ya hansı HTML elementlərində alət ipuçları ola bilər
Fəsildə Hipermətn İşarələmə sahəsindən alət ipuçlarının nümunələri var.
Soldakı menyuda müasir və çox ətraflı HTML dərslikləri tapa bilərsiniz.
Onlar sizə veb saytınızı sıfırdan yaratmağa imkan verəcək, lakin hələlik bir az aşağı baxın.
Bu fəsildə biz baxacağıq
HTML göstərişlərinə davam etməzdən əvvəl sizə məlumatı oxumağı təklif edirəm.
Bu maraqlı ola bilər.
Erkən İnternetin Əsas Trendləri
1997-ci ildən, ilk brauzerlərin meydana çıxmasından sonra bəzi istehlakçılar İnternetin müxtəlif sahələrində, həmçinin informasiya texnologiyaları və kompüter avadanlıqlarının təminatı sahəsində fəal şəkildə ixtisaslaşırlar. Bir çox istifadəçi veb-dizayner olur, şəxsi və korporativ veb-saytlar yaratmağa başlayır və yerli kompüter şəbəkələrinin qurulmasında iştirak edir. Bu yolla özlərini tərbiyə edirlər. Bu vəziyyət bu günə qədər gəlib çatmışdır. Bu gün World Wide Web vasitəsilə bilik əldə etmək çox moda və rahatdır. Bu gün və xüsusən o vaxt, keçən əsrin 90-cı illərinin ortalarında keçmiş sosialist ölkələrinin proqramlaşdırma mütəxəssislərinə ehtiyacı var idi. Tələb varsa, təklif də olacaq. Proqramçılar kütləvi şəkildə hazırlanır - bəziləri universitetlərdə, bəziləri evdə kompüter ekranı qarşısında. Bu inanılmaz dövrlərdə proqramlaşdırma forumları böyük populyarlıq qazanır, burada gənc və qeyri-peşəkarlar öz təcrübə və ideyalarını mübadilə edirlər.
HTML keçidi üçün göstərişBurada hər şey demək olar ki, eynidir: başlıq="" atributu müəyyən edir HTML alət ipucu .
Şəklin alt="" işarəsi şəkil göstərilmədiyi təqdirdə səhifədə göstəriləcək alternativ mətni müəyyən edir.
HTML alət ipucu ilə alternativ mətni qarışdırmayın, çünki onlar tamamilə fərqli şeylərdir.
Mətn üçün HTML alət ipucuHTML alət ipucu səhifədəki demək olar ki, hər bir elementə aiddir.
Başqa cür desək, yuxarıdakı misallardan bizə tanış olan başlıq="" bütün səviyyələrin başlıq teqlərinə, paraqraf teqlərinə, bloklarına, şəkillərinə və kimi xətti elementlərə malik ola bilər. və qeyriləri.
Birinci səviyyəli başlıq teqlərində və keçidlərində title="" atributunu yerləşdirmək təcrübəm var.
Şəxsən mən, təbii olaraq, veb sayt mətninin axtarış motorunun optimallaşdırılmasında qaçınılmaz həvəskar təcrübələrin bir hissəsi kimi alət ipuçlarından istifadə edirəm. Təcrübələrimin nə qədər uğurlu olduğunu mühakimə etməyi düşünmürəm. Düzünü desəm, belə optimallaşdırmanın nəticəsini izləmək çətindir, lakin açar sözlər və ifadələrlə onu aşmaq çox asandır. Odur ki, diqqətli olun və reklamınızda həddi aşmayın, çünki həmişə axtarış motorları tərəfindən cəzalandırılma riskiniz var.
Potensial mürəkkəb istifadəçi interfeysi elementləri haqqında əlavə məlumatların təqdim edilməsi istifadəçi üçün əlverişli və əlçatan veb-saytın hazırlanmasında veb-dizaynerin işinin çox vacib hissəsidir.
Səhifədə görünəndən kənar əlavə məlumatların göstərilməsi üçün geniş istifadə olunan mexanizmlərdən biri alət ipuçlarıdır (ekranda müəyyən elementlər haqqında göstərişlərin göstərilməsi üçün dizayn elementləri).
CSS və JavaScript-dən istifadə edən bir çox innovativ həllər (jQuery kimi JavaScript çərçivəsi ilə və ya istifadə etmədən) olsa da, bəzən yeni texnologiyaların uzun müddət davam edən texnikaları necə sarsıtdığına baxmaq faydalıdır.
Bu dərslik sizə sadəcə CSS-dən istifadə edərək necə gözəl çarpaz brauzer alətləri edə biləcəyinizi göstərəcək.
 |
 |
İxtisarı və ya abbreviaturanı izah etmək, sözün mənasını izah etmək və ya nəsə haqqında əlavə məlumat vermək lazım olan hər yerdə, məsləhətlər sadə, lakin effektiv həll yoludur.
Şəkil kimi elementin üstündə görünən və başlıq atributunun (və ya Internet Explorer-dən istifadə etmək üçün kifayət qədər bədbəxtsinizsə, alt atributunun) məzmununu göstərən kiçik sarı mətn blokundan alət ipuçlarından istifadə edərək skript əsaslı, mürəkkəb həllərə qədər, alət ipuçları dizayn cəmiyyətində az populyarlıq qazanan fantastik bir vasitədir.
Əksər brauzerlərdə alət ipuçları üçün standart üslublar var, baxmayaraq ki, onlar çox gözəl görünmürlər.
Yeni texnikalarla sürətlə inkişaf edən standartlar yeni brauzerlər tərəfindən daha yaxşı və daha yaxşı dəstəklənməyə başlasa da, CSS-in yüksəlişi bizə yeni səviyyədə alət məsləhətləri (yuxarıdakı kimi darıxdırıcı brauzer defoltlarını əvəz edən) hazırlamağa imkan verir. detal və dizayn.
Əgər siz əvvəllər jQuery əsaslı həllərdən istifadə etmisinizsə, mütləq qeyd edəcəksiniz ki, JavaScript CSS-in edə bilmədiyi bir çox şeyi edə bilər (məsələn, alət ipucunu yox olmaq üçün gecikdirmək kimi). Ancaq vurğulamaq və üslub etmək dizaynınızı təkmilləşdirən və alət ipuçlarından kənara çıxan digər möhtəşəm dizaynlara ilham verən CSS ilə edilə bilər.
Bu dərslikdə biz təmiz CSS-dən istifadə edərək alət ipuçları hazırlayacağıq.
Bu o deməkdir ki, onlar CSS3-ü dəstəkləməyən (məsələn, Internet Explorer 8 və daha köhnə versiyalar) brauzerlərdə işləyəcəklər - onlar yeni brauzerlərdə olduğu kimi yaxşı görünməyəcəklər.
Rənglər, şriftlər, şəkillər və alət ipucu çərçivələri kimi effektlərin görünüşü son istifadəçinin kompüterində nədən istifadə olunduğundan (brauzer, quraşdırılmış şriftlər və ya monitor kontrastı) asılı olacaq.
CSS3 uzantılarıSərhəd-radius və qutu-kölgə xassələri kimi sadə, lakin təsirli genişlənmələrdən istifadə sadə şar mesajı düzbucağına yeni və gözəl görünüş verə bilər.
Başımızın altında nə var?Nümunəmiz üçün HTML kodu ilə başlayaq.
müxtəlif növ alət ipuçlarıÖz layihələriniz üçün sizə kifayət qədər fikir vermək üçün biz beş müxtəlif növ alət ipucu hazırlayacağıq.
Ekran çıxışını standartlaşdırmaq üçün onların hər biri digərlərinə çox bənzəyir. Ancaq daha sonra onları ətraflı öyrənmək və görünüşünü dəyişdirmək üçün onlarla təcrübə edə bilərsiniz.
Bu mexanizm bütün brauzerlərdə işləməlidir, lakin ehtiyacınız varsa, onu öz zövqünüzə görə dəyişə bilərsiniz.
Əsas işarələməAşağıdakı kodda biz müntəzəm elementi olan XHTML 1.0 Ümumi Şablonundan istifadə edirik.
Elementlərimizi qurmaq üçün CSS-dən istifadə etdiyimiz üçün öyrənmə məqsədləri üçün CSS istifadə edərək sənədə daxil edilmişdir.
İstəsəniz effektləri və funksionallığı artırmaq üçün jQuery və ya JavaScript kodu da əlavə edə bilərsiniz!
HTML İşarələmə Məsləhətləri CSS ilə hazırlanmış alət ipuçlarının nümunəsi!Görmək üçün siçanınızı mətnin üzərinə gətirin: klassik ipucu, tənqidi mesaj 
Critical PostBu, CSS-dən istifadə edərək alət ipuçlarını hazırlamaq üçün sadəcə bir nümunədir!, kömək edin 
HelpBu, CSS!, info istifadə edərək alət ipuçlarını necə hazırlamağın sadəcə bir nümunəsidir 
InfoBu, CSS-dən istifadə edərək alət ipuçlarını hazırlamaq üçün sadəcə bir nümunədir! və xəbərdarlıq 
Xəbərdarlıq: Bu, CSS-dən istifadə edərək alət ipuçlarını hazırlamaq üçün sadəcə bir nümunədir!.
Bu, CSS-dən istifadə edərək alət ipuçlarını necə hazırlamağın sadəcə bir nümunəsidir!
Kod elementdən (onunla əlaqəli xüsusi heç nə yoxdur) və paraqraflardan (
) keçid elementləri olan mətn üçün (bunun üçün "alət ipucu" sinfi təyin olunur).
Niyə etiket alətlər üçün istifadə olunur? ?abbr , dfn və ya span əvəzinə a teqindən istifadə etməyimizin səbəbi odur ki, IE6 a elementindən başqa elementlər üçün hover psevdoselektoru üçün zəif dəstəklənir.
IE6-nı dəstəkləmək fikrində deyilsinizsə, başqa bir etiketdən istifadə edə bilərsiniz.
Nümunədə hər bir aralıq elementi klassik (adi alət ipucu üçün) və ya fərdi (istifadə olunan rəng sxeminə uyğun gəlmək üçün kritik, yardım, məlumat və ya xəbərdarlıq ilə) sinifinə təyin edilmişdir.
Üslubun bu istifadəsi həm də em elementi (alət ipucunun başlığını təyin edir) və şəkil (alət ipucunda ikona kimi istifadə olunur; öz şəkillərinizdən istifadə edə bilərsiniz) şəklində bir neçə bonusa malikdir.
CSSSəhifə üçün HTML kodunu yazdıq və alət ipuçlarını öz işini görməyin vaxtı gəldi.
Səhifənin bir hissəsinə əlavə olunan aşağıdakı kod, alət ipucunu ehtiva edən hər bir keçidi nöqtəli xətt ilə gözəl kiçik bir üsluba təyin edir (onu möhkəm xətt olan adi keçiddən fərqləndirmək üçün) və kursoru təyin edir sual işarəsi ilə (həmçinin vizual fərqləndirmə üçün).
O, həmçinin alt xətti silir və rəngi təyin edir (beləliklə, element adi keçidə daha az bənzəyir).
Kodun ikinci hissəsi sadəcə lazım olana qədər alət ipucunu gizlədir.
Hər şey çox sadədir!
class.tooltip .tooltip üçün CSS üslubları ( haşiyə-alt: 1px nöqtəli #000000; rəng: #000000; kontur: heç biri; kursor: kömək; mətn dekorasiyası: heç biri; mövqe: nisbi; ) .tooltip aralığı ( sol kənar: -999em mövqe: mütləq)Alət məsləhəti məzmunu displeydən daha çox mənfi kənar-sol xassəsindən istifadə etməklə baxışdan silinir: heç biri və ya görünmə: gizlidir, çünki bəzi ekran oxuyucuları bu xassələrə məhəl qoymur.
Alət məsləhətləri üçün CSS üslublarıTezliklə alət ipuçlarını müxtəlif brauzerlərdə eyni şəkildə işlədəcəyik. İndi bir neçə sətir CSS kodu əlavə edək.
Aşağıdakı kod parçasını əlavə etməklə, biz ekranda alət ipuçlarını göstərəcəyik, baxmayaraq ki, onlar bayağı görünəcək və mətnin qalan hissəsindən vizual olaraq ayırmaq çətin olacaq.
Alət ipucunu göstərmək üçün CSS .tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; mövqe: mütləq; sol: 1em; üst: 2em; z-index: 99; margin-left: 0; width : 250px; ) .tooltip:hover img ( sərhəd: 0; kənar: -10px 0 0 -55px; float: sol; mövqe: mütləq; ) .tooltip: hover em ( font-family: Candara, Tahoma, Geneva, sans-serif ; font-size: 1.2em; font-weight: bold: 0.2em 0 0.6em 0; .classic (padding: 0.8em 1em; ) .custom (padding: 0.5em 0.8em; ) ver: ( fon: şəffaf; ) Xətt tələb olunur * htmlYuxarıdakı kodun sonuncu sətirinin niyə daxil edildiyini maraqlandıra bilərsiniz? O, keçidin fonunda şəffaflığı təyin edir. Alət məsləhətlərini sınaqdan keçirərkən mən IE6-da keçid fonu mövcud olduğu müddətcə aradan qaldırıla bilməyən qəribə effekt aşkar etdim!
Yuxarıdakı kod alət ipuçlarının funksionallığını təmin edir. Onlar ekranda göstərilir, lakin onları ümumi mətndən ayırmaq olduqca çətindir. Səhifədə alət ipucu mətnini fərqləndirən rəng sxemləri yoxdur.
Alət məsləhətləri üçün rəng sxemini təyin edin/Aşağıdakı kod beş alət ipucu üslubunun hər biri üçün rəng sxemi təyin edir.
Səhifənin kodunu dəyişdirdikdən və onu brauzerdə yenilədikdən sonra, bütün brauzerlərdə demək olar ki, eyni şəkildə siçanı linkin üzərinə gətirdiyiniz zaman göstərişlər görünəcək.
Rəng sxemi üçün CSS kodu .classic ( fon: #FFFFAA; haşiyə: 1px bərk #FFAD33; ) .kritik ( fon: #FFCCAA; haşiyə: 1px bərk #FF3334; ) .help ( fon: #9FDAEE; haşiyə: 1px bərk # 2BB0D7; ) .info (fon: #9FDAEE; haşiyə: 1px bərk #2BB0D7; ) .Xəbərdarlıq (fon: #FFFFAA; sərhəd: 1px bərk #FFAD33; )CSS kodu çox sadədir, lakin o, göstərişlərə əla görünüş verir və hər yerdə öz işini görür. Rəng sxemi öz istəyinizlə dəyişdirilə bilər.
Təkmil alət ipucu ekranı üçün bir neçə CSS3 toxunuşuBu təlimatı bitirməzdən əvvəl, alət ipuçlarımıza vizual effektlər əlavə etmək üçün bir neçə sətir CSS3 kodu əlavə edəcəyik. border-radius xassəsindən istifadə edərək dairəvi küncləri təyin edək və box-shadow xassəsindən istifadə edərək müəyyən ölçü əlavə edək.
Bu xassələrin heç biri qlobal səviyyədə dəstəklənmədiyi üçün onlar yalnız ən yeni brauzer versiyalarında işləyəcəklər. Ancaq işlədikləri yerdə, alət ipuçları parlaq və seksual görünəcək!
Gəlin aşağıdakı kodu selector.tooltip:hover span-ə əlavə edək və səhifəni yeniləyin.
Haşiyə, kölgə və şəffaflıq üçün vizual effektlər alət ipucunu səhifə mətninin üstündən qaldırır və məlumatı təzadlı və asan oxunur.
Siz qeyd edə bilərsiniz ki, təkcə rəsmi CSS3 xassələri deyil, həm də Mozilla və WebKit üçün genişləndirmələr istifadə olunur.
Yeni brauzerlər üçün əlavə CSS xassələri sərhəd radiusu: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; qutu-kölgə: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-kölgə: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-kölgə: 5px 5px rgba(0, 0, 0, 0.1);
Bu dərslik interfeysin təkmilləşdirilməsinin çox səy tələb etmədiyini nümayiş etdirir. Bundan əlavə, veb tətbiqi üçün yeni interaktivlik səviyyəsini təyin etmək üçün faydalı ola biləcək CSS-dən istifadə təcrübəsini nəzərdən keçirməyə dəyər.
Layout gurusları çətin ki, bu yazıda özləri üçün yeni bir şey tapsınlar. Bu yazı daha çox mənim kimi universal alət ipuçlarını yaratmaq və tərtib etmək problemi olan başlanğıc tərtibat dizaynerləri üçündür.
Bu yaxınlarda kiçik bir bloq hazırlayarkən qəşəng, eyni zamanda sadə alətlər hazırlamaq vəzifəsi ilə qarşılaşdım. Alət məsləhətləri üçün ayrıca div konteynerləri yaratmağın müxtəlif yollarını sınadıqdan sonra və ya təmiz CSS ilə alət ipuçları yaratdıqdan sonra kodu qarışdırmayacaq, brauzerlər arası uyğunlaşacaq və eyni zamanda həyata keçirilməsi çox sadə olacaq universal bir həll tapdım.
Bu sadə problemi həll etmək üsulumla maraqlanan hər kəsdən pişik altında soruşuram.
Alət məsləhətləri Linki
Siyahıdan artıq qeyd etdiyiniz kimi, mən LESS css preprosessorundan istifadə edirəm.
CSS üslublarını və skriptlərini ayrı-ayrı fayllara daxil etdik. Bizdə həmçinin bir keçid və alət ipucu üçün konteyner olacaq div bloku var.
HTML5 spesifikasiyası element və ya blok haqqında bəzi məlumatları saxlaya bilən data-atribut tipli fərdi atributlardan istifadə etməyə imkan verir. Məhz məlumat atributlarında alət ipuçlarının mətnini saxlayacağıq.
Link
Saxlama üçün mən data-tooltip atributundan istifadə edirəm.
HTML ilə işimiz bitdi - üslublara keçə bilərik. Mən LESS Elements kitabxanasından istifadə edirəm və onu hər kəsə tövsiyə edirəm, ona görə də bu çərçivədən istifadə edərək bəzi xassələri yazacağam.
@import "css/element.less"; #alət ipucu ( z-index: 9999; mövqe: mütləq; ekran: heç biri; yuxarı: 0px; sol: 0px; fon rəngi: #000; doldurma: 5px 10px 5px 10px; rəng: ağ; .şəffaflıq(0.5); . yuvarlaqlaşdırılmış (5px)
Siyahıdan aydın olur ki, birinci sətirdə biz LE-ni birləşdiririk, div#tooltip blokunu mütləq yerləşdirməyə təyin edirik və onu gizlədirik. Sonra bloka fon rəngi və mətn rəngi veririk, küncləri yuvarlaqlaşdırırıq (5px) və şəffaflıq dəyərini 50% jQuery-ə təyin edirik. İndi əyləncəli hissə gəlir - jQuery.
$.jQuery(sənəd).ready(funksiya() ( $("").mousemove(funksiya (eventObject)) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "yuxarı" : eventObject.pageY + 5, "sol" : eventObject.pageX + 5 )) .show( )).mouseout(funksiya () ( $("#tooltip.); ").hide() .text("") .css(( "yuxarı" : 0, "sol" : 0 )); )); ));// Hazır son.
İndi biz data-tooltip atributuna malik bütün elementləri seçimə əlavə edirik və siçan ilə istədiyiniz elementin üzərinə gətirdiyimiz zaman alət ipucu qiymətini alırıq və onu dəyişəndə saxlayırıq. Sonra, #tooltip blokuna işarə mətnini əlavə edirik, ona səhifənin kənarından kursor koordinatlarını + 5 px veririk və nəhayət, alət ipucu ilə bloku lazımi yerdə göstəririk. Siçan elementi tərk etdikdən sonra #tooltip blokunu gizlədirik, məzmununu təmizləyirik və onu 0;0; vəziyyətinə qaytarırıq.
Hamısı budur!
Nəticədə belə bir şey əldə edəcəyik: Demo
Bu sadə skript sayəsində, data-tooltip atributuna malik səhifədəki bütün elementlər alət ipucu alacaq.
Diqqətinizə görə təşəkkürlər!
