T Чист текст | // Верзија за штампање

Побољшани <abbr>

Они који су користили Микрософтов систем помоћи, вероватно су приметили да се скраћенице у њему могу активирати, тако да прикажу или сакрију њихову дефиницију. То се лако може реализовати и у jQuery-ју.

Ово је пасус текста у коме се користе скраћенице, као што је УРЛ (енгл. URL). Садржај атрибута title ознака <abbr> се додаје када се те ознаке притисну на HTML страници.

Код којим је ово постигнуто је сасвим једноставан:

$(document).ready(function(){
  $('abbr').click(function(){
    if ($(this).hasClass('expanded'))
    {
        $(this).removeClass('expanded');
        $(this).find('+ span.definition').remove();
    }
    else
    {
        $(this).addClass('expanded');
        $(this).after('<span class="definition">'+$(this).attr('title')+'</span>');
    }
  })
});

Наравно, сами елементи су улепшани преко КСС-а.

abbr
{
    border-bottom: 1px dotted #00f;
    cursor: pointer;
}

.definition
{
    border: 1px dotted #080;
    margin-left: 0.5em;
    background-color: #f0f080;
}