tworzenie elementów w jquery – długość tekstu w px

W jQuery można tworzyć elementy na wiele sposobów, albo dodając jako atrybut jako w metodzie html() albo też korzystać z document.createElement() lub append(obj). W zależności od przypadku każde rozwiązanie ma swoje wady i zalety.

Założenie

Zakładamy że operujemy na obiekcie div#main. Oczywiście wczytujemy jquery.js oraz jquery.dimensions.js

1
2
3
<div id="main">

</div>

html()

Po prostu, używając html bez argumentu – otrzymujemy kod znajdujący się w obiekcie, podając w parametrze string – zamieniamy kod na podany w argumencie

1
$('#main').html('<div>aasc</div>');

append()

Używając append – dodajemy kod do obiektu – nie zastępujemy istniejącego, jako parametr również możemy podawać obiekt js, albo jquery

1
$('#main').append('<div>aasc</div>');

document.createElement()


Tak to jest część o którą mi chodziło :) Tworząc element jak na poniższym przykładzie na starcie mamy obiekt jQuery i możemy na nim operować.

1
2
3
4
5
6
7
8
9
10
$(document.createElement('div'))
    .html('a')
    .addClass('active')
    .css('fontWeight', 'bold')
    .appendTo($('#main'));

  var list = $(document.createElement('div')); //tworzenie
  list.html('<div>1element</div>'); //wpisywanie html'a
  list.append('<div>2element</div>'); // dodawanie
  $('#main').append(list); // dodanie do dokumentu

Długość tekstu w pikselach

A teraz część właściwa. Bardzo rzadko, ale naprawde bardzo rzadko zdarza się ze zanim wyświetlimy element musimy posiadać jego szerokość, problem pojawia się gdy mamy spory mętlik cssowy a wyświetlenie elementu za szerokiego może popsuć wygląd. Ja miałem taką sytuację :)
Wtedy musimy sprawdzić szerokość tekstu przed wyświetleniem – mi się przydało znać taką szerokość aby ustalić szerokość rodzica…
Załóżmy, że mamy diva „.list”, w którym znajdują się różne „.elementOfList”, kod html/css wygląda tak

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>

.list{border:black solid 1px;width:100px;}
.elementOfList{font-size:12px;font-family:Tahoma}

</style>

<div id="main">

</div>

<div class="list">
  <div class="elementOfList">pierwszy element</div>
  <div class="elementOfList">drugi element dluzszy</div>
  <div class="elementOfList">trzecie element dosc krotki</div>
  <div class="elementOfList">czwarty...</div>
</div>

Jak widać element .list jest za wąski i tekst w „elementOfList” się zawija, nalezy więc znaleźć największą szerokość tekstu w elementOfList i ustawić taką na .list, tak więc znajdujemy…

1
2
3
4
5
6
7
8
9
  var max = 0;
  $('.list .elementOfList').each(function(){ //petla po wszystkich elementach
      var  m = $(this).width() //pobranie szerokosci
      if(m>max)
        max=m
 
 
  });
  alert(max)

… i co się okazuje – mamy 100 px, no ale to jest właśnie za mało, dlatego powinniśmy zrobić tak….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  var max = 0;
 
 
  var obj = $(document.createElement('div')); //tworzenie nowego elementu
  var firstElement =$('.list .elementOfList:first') // pobranie elementu z listy
   
  obj
    .css('fontSize', firstElement.css('fontSize'))
    .css('fontFamily', firstElement.css('fontFamily'))
    .hide(); //nadanie atrybutów, oraz ukrycie dodatkowego diva
   
  $('body').append(obj); // dodanie go do dokumentu
 
  $('.list .elementOfList').each(function(){
    obj.html($(this).html()) // wpisanie tekstu do obj
      var  m = obj.width() //pobranie szerokosci
      if(m>max)
        max=m
 
 
  });
  obj.remove(); // usuniecie
  alert(max) // wynik u mnie: 148
  $('.list').width(max);

Takim oto kodem otrzymujemy właściwą szerokość, po przypisaniu tej wartości do .list, tekst w dzieciach się nie zawija :).
Uwaga: Tworząc ten dodatkowy element musimy pamiętać o textindent, paddingach, letterspacing, wordspacing i innych atrybutach css mających wpływ na szerokość elementu zawierającego tekst. Tworzony element do wyszukania szerokości powinien je zawierać – inaczej wynik nie będzie poprawny.

Podsumowanie

Tym artykułem chciałem pokazać sposób na wyciągnięcie szerokości tekstu w px, nie używając do tego skomplikowanych bibliotek wykorzystujących czcionki itp. Kolejnym powodem jest zaprezentowanie możliwości jQuery – otóż możemy tworzyć przeróżne sztuczki dzięki którym osiągamy poprawny wynik. Wystarczy tylko trochę wyobraźni – problem z znalezieniem rozwiązania dla odnalezienia szerokości tekstu trapił mnie z dwa dni :) Ale się udało :)

 

Tagi: , , ,

Komentarze: 1 do “tworzenie elementów w jquery – długość tekstu w px”

  1. 1 gTg     2009-01-23 15:53:07

    Mat, począwszy od jQuery 1.2.6 nie trzeba dodawać już dimensions, bo został on włączony do core’a…

    Tu masz krótkie info:
    http://ajaxian.com/archives/jquery-release-126-performance-improvements-and-dimensions-plugin-added-to-core

    Pzdr
    [gTg]

Napisz komentarz


Wersja mobilna