Հարգելի ընթերցող իմ այս հոդվածով ես ցանկանում եմ Ձեզ ներկայացնել Tooltipster – ի բավականին պարզեցված տարբերակը։ Ովքեր ծանոթ են Tooltipster – ին, գլխի կընկնեն, թե մոտավորապես ինչի մասին է խոսքը, իսկ ովքեր ծանոթ չեն, կփորձեմ հակիրճ ներկայացնել թե ինչ է այն իրենից ներկայացնում։
Եվ այսպես, Tooltipster – ը jQuery խրվակ է (Plugin), որն օգտագործվում է տարբեր տեսակի սահուն բացվող հուշումներ կամ ինֆորմացիաներ ստեղծելու համար։ Այն շատ օգտակար կարող է լինել Ձեր պրոյեկտներում։ Սակայն լինում են դեպքեր, երբ Ձեզ անհրաժեշտ է լինում ոչ շատ մեծ այդպիսի հուշումներ օգտագործել։ Եվ, բնականաբար, այնքան էլ նպատակահարմար չի լինի այդտեղ օգտագործել Tooltipster խրվակը ամբողջությամբ։ Հենց նման դեպքերում կարելի է ստեղծել սեփական Tooltip – ը և զերծ մնալ բոլոր տեսակի դժվարություններից։ Այս հոդվածում մենք միասին կփորձենք ստեղծել մեր իսկ պարզ Tooltip – ը և կիրառել այն բոլոր անհրաժեշտ տեղերում։ Այստեղ գտնվում է արդեն պատրաստի տարբերակը, որը մենք միասին հիմա պետք է կառուցենք։
Սկզբի համար մեզ անհրաժեշտ է որևէ տեքստ, որն իր մեջ պարունակում է ինչ-որ button (կոճակ) կամ link(հղում), որոնց վրա կարող ենք click անել՝ մեր tooltpster – ը բացելու համար։
<div class="container">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur eligendi rem quasi perferendis, aliquam nostrum aut qui saepe, aspernribus natus soluta provident animi ea cupiditate similique nesciunt nam quibusdam cumque quam accusantium, distinctio eos enim explicabo placeat recusandae repudiandae corrupti</p>
<div class="button">
<button class="click">Click me</button>
</div>
<p> incidunt quaerat nemo at optio! Similique expedita dolore aliquid, tempora maiores. Excepturi laboriosam magnam alias earum eos, adipisci laudantium, consectetur, veniam iusto, quisquam non voluptatibus doloribus quas tempora modi aut assumenda explicabo. A molestiae in perspiciatis tenetur incidunt voluptatum impedit culpa modi ipsam nisi architecto minus cumque, quibusdam accusamus, saepe eaque et magnam quisquam qui, nobis magni repellat asperiores! Consequuntur nihil ducimus necessitatibus, dolorum mollitia distinctio odit iure maxime facere delectus nisi enim fuga porro beatae optio nemo incidunt nesciunt, consectetur doloremque officia similique omnis ipsa. Aut, dolor, soluta veniam architecto id quasi!</p>
<div class="link-container">
<a href="#">Link</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate consequatur laboriosam explicabo facere labore dolore tempornventore voluptatum, commodi ad voluptatibus earum! Labore dolorum dicta quae exercitationem inventore consectetur odit deserunt ex rerum sapiente, architecto cumque a, dolor, earum deleniti aliquam soluta.</p>
</div>
Button կլասսով div- ի մեջ <button class=”click”>Click me</button> էլեմենտից հետո ավելացնենք div` tooltipster կլասսով <div class=”tooltipster”></div>, որն իր մեջ կպարունակի այն ինֆորմացիան, ինչը պետք է բացվի քլիքից հետո։ Եկեք օրինակի համար վերցնենք ինչ-որ մի ցանկ։
<ul class="list">
<li><a href="">Link 1</a></li><hr>
<li><a href="">Link 2</a></li><hr>
<li><a href="">Link 3</a></li><hr>
<li><a href="">Link 4</a></li><hr>
</ul>
Եկեք առայժմ հարմարության համար Tooltipster – ը չթաքցնենք, որպեսզի կարողանանք հեշտությամբ կառուցել և կառավարել այն։ Ամեն ինչ պատրաստելուց հետո այն կփակենք` քլիքի դեպքում բացվել-փակվելը սարքելու համար։ tooltipster կլասսով div – ին տանք կոնկրետ լայնություն, որոշակի եզրագծեր, անկյունների ոչ շատ կորացում և տարբերվող ֆոն։
.tooltipster{
border: 2px solid #000;
border-radius: 8px;
width: 150px;
background: #4c4c4c;
}
list կլասսով ul-ին և նրա մեջ գտնվող link-երին տանք իրենց բնորոշ ստանդարտ ձևավորումից որոշ տարբեր ձևավորում։
ul.list{
list-style: none;
padding: 5px 10px;
margin: 0;
}
ul.list li{
margin: 2px auto;
text-align: center;
}
ul.list a{
color: #ddd;
text-decoration: none;
}
Իսկ li – երի տակ ընդգծող hr-ին տանք մի փոքր սահուն շարժ li – ի վրա hover անելու դեպքում (մի փոքր հետաքրքրությունն ավելացնելու համար ։) ):
hr{
width: 40%;
transition: all .2s linear;
}
ul.list li:hover+hr{
width: 100%;
}
Այժմ մեզ անհրաժեշտ է ունենալ վերևի այն փոքրիկ եռանկյունը, որը կարծես ցույց է տալիս, թե որտեղից է դուրս եկել այդ փոքրիկ պատուհանը։ Դրա համար իրականում մեզ անհրաժեշտ է կառուցել 2 փոքր եռանկյուններ <span class=”big”></span> <span class=”small”></span> էլեմենտների միջոցով։ Նախ կառուցենք առաջինը։ <span class=”big”></span> – ին տանք inline-block, որպեսզի այն իրեն դրսևորի նաև որպես բլոկ։ Այնուհետև, քանի որ սլաքը պետք է ուղղված լինի դեպի վեր, նրան տանք հաստ սև եզրագիծ ներքևից, մոտավորապես նույն հաստության թափանցիկ եզրագծեր աջից և ձախից, իսկ վերևի մասը թողնենք առանց եզրագծի։ Մինչև երկրորդ եռանկյան կառուցմանն անցնելը, եկեք նախկինում ստեղծած և ձևավորած էլեմենտներից մի քանիսի մեջ ավելացնենք որոշ style-ներ։ Մասնավորապես՝ մեզ անհրաժեշտ է tooltipster կլասսով div-ը դարձնել position: absolute; , որպեսզի կարողանանք այն տեղադրել մեզ համար հարմար տեղում, և որպեսզի կարողանանք դա անել button կլասսով div – ի նկատմամբ, մենք պետք է վերջինիս նույնպես տանք static-ից տարբեր position, այս դեպքում relative :
div.button{
position: relative;
}
Այժմ մենք կարող ենք div.tooltipster -ը հեշտությամբ տեղադրել մեր ուզած դիրքում՝ ձախից և վերևից տալով համապատասխան հեռավորություններ։ div.tooltipster – ի style-ները այժմ արդեն կունենան հետևյալ տեսքը․
div.tooltipster{
border: 2px solid #000;
border-radius: 8px;
width: 150px;
background: #4c4c4c;
position: absolute;
top: 47px;
left: -38px;
}
Իսկ հիմա նույն ձևով մեզ անհրաժեշտ տեղում տեղադրենք նաև span.big – ը, որից հետո կունենանք՝
span.big{
display: inline-block;
border-bottom: 20px solid #000;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
position: absolute;
top: 30px;
left: 20px;
}
Եթե ուշադրություն դարձրեցիք, մեր կառուցած tooltipster – ը մի փոքր տարբերվում է դեմո տարբերակի մեջ բացված tooltipster-ից։ Քանի որ այնտեղ սլաքը ոչ թե ամբողջությամբ է սև, ինչպես մեզ մոտ, այլ միայն եզրագիծն է սև, իսկ սլաքն ունի ավելի բաց գույն։ Այստեղ արդեն պարզ է դառնում, թե ինչի համար էր պետք մեզ երկրորդ span – ը (<span class=”small”></span>): Այժմ նրան տանք ձևավորում և տեղադրենք իր համապատասխան դիրքում։ Նրա style-երը գրեթե համընկնում են span.big – ի հետ, այն տարբերությամբ, որ span.small – ի գույնը ավելի բաց է (ճիշտ այնպես ինչպես div.tooltipster ֆոնը), այն տեղադրված է մի փոքր ավելի ներքև և ունի ավելի մեծ z-index:
span.small{
display: inline-block;
border-bottom: 20px solid #4c4c4c;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
position: absolute;
top: 36px;
left: 20px;
z-index: 2;
}
Կրկնություններից խուսափելու և ավելի գրագետ կոդ ունենալու համար span.small և span.big style – երի փոխարեն գրենք այսպես․
div.button span{
display: inline-block;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
position: absolute;
left: 20px;
}
span.big{
border-bottom: 20px solid #000;
top: 30px;
}
span.small{
border-bottom: 20px solid #4c4c4c;
top: 36px;
z-index: 2;
}
Եվ այսպես, մեր խնդրի CSS մասը, կարելի է ասել, ավարտեցինք։ Այժմ անցնենք jQuery հատվածին։
Դրա համար նախ մեզ պետք է մեր ֆայլին կցել jQuery՝
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
հետևյալը գրելով մեր ֆայլի head – ի մեջ։ Որից հետո պետք է կցենք մեր կողմից ստեղծված script.js ֆայլը՝ head – ի մեջ ավելացնելով
<script src="script.js" type="text/javascript"></script>
արտահայտությունը։
Այնուհետև script.js ֆայլի մեջ hide() ֆունկցիայի միջոցով կթաքցնենք div .tooltipster-container
$(".tooltipster-container").hide(0);
Իսկ հետո button.click էլեմենտին քլիք անելու դեպքում div .tooltipster-container – ի վրա կիրառենք toggle() ֆունկցիան։
$(document).ready(function(){
$(".click").click(function(){
$(".tooltipster-container").toggle(200);
});
}); //end ready
Ահա և այն, ինչ մենք որոշել էինք ստեղծել։ Մենք ունեցանք միանգամայն աշխատունակ tooltipster, որը կարող ենք կիրառել մեր պրոյեկտների մեջ։ Համաձայնեք, որ այն իրենից այնքան էլ բարդ բան չէր ներկայացնում։ Արդեն պատրաստի կոդը կարող եք տեսնել այստեղ https://jsfiddle.net/psxjxt04/4/
Չենք մոռանում, որ ցանկացած հարցերի դեպքում կարող ենք գրել մեկնաբանությունների բաժնում կամ ուղարկել էլ․նամակ մեր էլ․հասցեներին։ Մեծ հաճույքով պատրաստ ենք օգնել Ձեզ` Ձեր բոլոր IT մտահղացումները կյանքի կոչելու հարցում։ Շնորհակալություն մեր բլոգից օգտվելու համար։
