• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • HTML • JavaScript • jQuery • Web  /  Թաքնված Հուշումներ (Tooltips)
11 Փետրվարի 2016

Թաքնված Հուշումներ (Tooltips)

Հեղինակ Մկրտիչ
CSS, HTML, JavaScript, jQuery, Web

Հարգելի ընթերցող իմ այս հոդվածով ես ցանկանում եմ Ձեզ ներկայացնել 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 մտահղացումները կյանքի կոչելու հարցում։ Շնորհակալություն մեր բլոգից օգտվելու համար։

Կապված գրառումներ

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Icon տառատեսակներ 02/21/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Սուպերգլոբալ փոփոխականներ (superglobals) 03/24/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։