Wpisy oznaczone tagiem "jquery" (8)  

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…