Timeline z artykułów

Demo:

Pizza Margaritta

15 May 2015

Everyone knows that famous pizza comes from Italy.

pizza

Flowers

01 May 2015

The flowers are blooming in spring.

flowers

Chile

09 April 2015

Beautifull country in South America.

chile

Venice

25 March 2015

Is one of the most interesting and mysterious city in the world.

venedig

Bardzo popularne i dość efektowne są materiały wyświetlana w formie linii czasu. Można ten efekt wykorzystać na wiele różnych sposobów, np. eventy, posty, wiadomości, portfolio, itd. Poniższy przykład stworzy linię czasu na przykładzie artykułów. Do tego skryptu wykorzystujemy HTML, CSS, oraz jQuery.

Konstrukcja prezentowanych wiadomości

Aby zobrazować to od czego zaczęliśmy zamieszczam pierwotny kształt wiadomości:

Pizza Margaritta

15 May 2015

Everyone knows that famous pizza comes from Italy.

pizza

Flowers

01 May 2015

The flowers are blooming in spring.

flowers

Chile

09 April 2015

Beautifull country in South America.

chile

Venice

25 March 2015

Is one of the most interesting and mysterious city in the world.

venedig

Konstrukcja html wygląda tak:

<section>

	<article>
		<div class="header">
			<h1>Pizza Margaritta</h1>
			<p id="data" data="2015-05-15">15 May 2015</p>
			<p>Everyone knows that famous pizza comes from Italy.</p>
		</div>
		<img src="img/pizza.jpg" />
		
	</article>
	
	<article>
		<div class="header">
			<h1>Flowers</h1>
			<p id="data" data="2015-05-01">01 May 2015</p>
			<p>The flowers are blooming in spring.</p>
		</div>
		<img src="img/flowers.jpg" />
		
	</article>
	<article>
		<div class="header">
			<h1>Chile</h1>
			<p id="data" data="2015-04-09">09 April 2015</p>
			<p>Beautifull country in South America.</p>
		</div>
		<img src="img/nature.jpg" />
		
	</article>
	
	<article>
		<div class="header">
			<h1>Venice</h1>
			<p id="data" data="2015-03-25">25 March 2015</p>
			<p>Is one of the most interesting and mysterious city in the world.</p>
		</div>
		<img src="img/venedig.jpg" />
		
	</article>
</section>

Jak widać, jest to bardzo prosta forma wykorzystania znaczników HTML5. Wiele modułów i komponentów właśnie w bardzo podobny sposób wyświetla wiadomości.

Stworzenie osi czasu za pomocą jQuery

W takich przykładach język JavaScript staje na wysokości zadania. Poniżej prezentuje kolejne wykonane kroki w JS.

Stworzenie 2 kolumn

Etap ten można wykonać w CSS, jednak ja z pewnych względów stworzyłem to w bardzo prosty sposób w jQuery.

 $('article').each(function(i,e){			
      if (((i+1) % 2) == 0)
        $(this).after('<br style="clear:both" />');
    });

Moja pętla po każdych dwóch postach wstawi przerwę z odpowiednim stylem (clear:both();).

Dodanie stylów do znaczników za pomocą jQuery

Kolejnym elementem to zobrazowanie daty postów. Te które są starsze będą nieco obniżone, tak, żeby powstała pewna linia czasu. Zrobienie tego w css, w ten sposób co robię w js wydaje się być o wiele lepszym rozwiązaniem. Jednak jak sprawdzicie sami, jak te style włożone w css różnią się od tych wstawionych w js.

$("article:visible:nth-child(2n)").before().css("margin-top","80px");

A więc dla każdego elementu parzystego w linii dodaje styl margin. Warto zwrócić uwagę, że została tu wykorzystana bardzo przydatna funkcja before, która wstawi funkcję, czy jak w tym przypadku styl przed znacznik article. Jak zrobimy to w css poprzez:

article:nth-child(2n) {margin-top: 80px;}

Nie da to tego samego efektu co kod js. Możecie spróbować sami.
Takim moim dodatkiem jest umieszczenie tooltipa to kursora, z datą posta. Można to oczywiście ominąć, albo inaczej wykorzystać. Ja z tego wiele razy korzystałem i myślę, że taka instrukcja może się przydać na przyszłość.

  var moveLeft = 20;
  var moveDown = 10;
$('article').hover(function(e) {
	var dat = $(this).find("#data").attr("data");
    $('div#pop-up').empty().append(dat);
	
	$('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });

  $('article').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
	
  });

Bardzo prosta konstrukcja, która do div’a #pop-up dodaje datę posta i wyświetlana jest w momencie najechania kursorem na dany obiekt.

Ułożenie elementów w CSS

Float:left, float: right

Bardzo często wykorzystywaną funkcją css jest znacznik float. W moim przypadku określa on kolumny i pozycje do niego przypisane.

article:nth-child(1n), article:nth-child(2n)
	{
		float:left;

	}
img.time_image
	{
		display: block;
    float: right;
    height: 100px;
	}
	article div.header
	{
		float:left;
		width:240px;
	}

Pozostałe elementy css to już wyłącznie moja estetyka, która pewnie dla każdego jest inna.

article
	{
		margin:0 10px;
		position:relative;
		padding:0px;
		width:400px;
		background:#555;
		height:100px;
	}

	article h1
	{
		padding:5px;
		margin: 0;
		color:#333;
		background:#ff9591;
		font-weight:lighter;
		text-transform:uppercase;
		font-size:16px;
		width:300px;
	}
	article p
	{
		margin:0;
		padding:5px;
		color:#ddd;
	}
div#pop-up {
  display: none;
  position: absolute;
 
  padding: 10px;
  background: #ff9591;
  color: #000000;
  border: 1px solid #333;
  font-size: 90%;
}

Nasz timeline jest już gotowy. Jest to bardzo prosty przykład, ale myślę, że dość dosłownie pokazuje jak można stworzyć coś ciekawego poprzez proste elementy.
Wiele z nich można również wykorzystać dla innych potrzeb – ja większość tych elementów nieustannie wykorzystuję w innych przykładach.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code