4en3rgY Romania
TooL Tip TuToRiaL 2z8bv910
Welcome To 4EN3RGY Romania
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!

4en3rgY Romania


Nu sunteti conectat. Conectati-va sau inregistrati-va

TooL Tip TuToRiaL

Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

1TooL Tip TuToRiaL Empty TooL Tip TuToRiaL la data de Vin 05 Aug 2011, 12:57 am

trojan4u[:X]

trojan4u[:X]Moderator Global

Ce este un tooltip?

Un tooltip reprezintă un şablon suprapus ce apare când pui cursorul peste (hover) o imagine / text, conţinând o descriere încadrată înăuntrul acestuia.
Vezi demo: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Cum îl pot utiliza?

HTML:

Adăugăm class="with-tooltip" imaginii / linkului dorit.
Vom folosi opţiunea "title" pentru a personaliza descrierea încadrată în şablonul tooltip.

exemplu:
Cod:
<a href="#" title="Acesta e un tooltip !" class="with-tooltip">Mută cursorul peste mine</a>



jQuery:

Pentru a funcţiona trebuie să folosim 2 fişiere jQuery.
Vom crea fişierele jQuery inroducand următorul cod într-un editor text (notepad e perfect) pe urmă le veţi salva cu extensia ".js".


Cod:
/**
*
*  simpleTooltip jQuery plugin, by Marius ILIE
*  visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
  return this.each(function() {
      var text = $(this).attr("title");
      $(this).attr("title", "");
      if(text != undefined) {
        $(this).hover(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            $(this).attr("title", "");
            $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
            if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
            else var tipWidth = $("#simpleTooltip").width()
            $("#simpleTooltip").width(tipWidth);
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        }, function(){
            $("#simpleTooltip").remove();
            $(this).attr("title", text);
        });
        $(this).mousemove(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            var tipWidth = $("#simpleTooltip").outerWidth(true);
            var tipHeight = $("#simpleTooltip").outerHeight(true);
            if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
            if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        });
      }
  });
}})(jQuery);

şi acesta:

Cod:
$(document).ready(function(){
  $(".with-tooltip").simpletooltip();
});


Ne vom ajuta de tagul "script" pentru a insera codurile jQuery ce trebuie mai întâi să fie urcate pe un host.

exemplu:
Cod:
<script type="text/javascript" src="http://netcustoms.webs.com/jquery.tooltip.v.1.1.js"></script>

Cod:
<script type="text/javascript" src="http://netcustoms.webs.com/jquery.tooltip.execute.js"></script>



CSS:

Vom avea nevoie şi de un cod CSS pentru a personaliza şablonul.
Dacă ştiţi CSS îl puteţi personaliza după bunul plac.
Adăugaţi codul următor pe pagină între tagul sau în foaia de stil CSS.

exemplu:
Cod:
#simpleTooltip { padding: 7px; border: 1px solid #A6A7AB; background: #F2F3F5; }



NOTAŢIE:

În cazul în care folosiţi tooltip într-o pagină HTML separată de forum va trebui să adăugaţi şi următorul cod:

Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Mult noroc!



[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Vezi profilul utilizatorului

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum