Přidání knihoven jQuery činí web mnohem atraktivnějším a zlepšuje použitelnost.

Drupal 7 v současné době předem obsahuje oblíbenou knihovnu uživatelského rozhraní jQuery

V tomto příkladu vám ukážu, jak můžete pomocí JQuery získat karty-karty na běžné stránce webu bez připojování dalších modulů, filtrů atd.

Záložky budou vypadat nějak takto, kliknutím na obrázek přejdete na ukázkovou stránku:

Především v typu obsahu povolte PHP filtr, aby se v textu na stránce povolila obsluha PHP kódu. Poté načtěte knihovny JQuery pomocí PHP:

1 2 3

Nyní přidejte karty JQuery, které budou obsahovat uživatelské rozhraní JQuery. Pro spuštění JavaScriptu použijte funkci drupal_add_js():

1 2 3 4 5 6

Nyní vytvoříme karty v HTML. V tomto příkladu vytvořím tři karty, každou s textem a obrázkem a jedinečným názvem.

Nejprve definujme tři záložky (tento úryvek kódu obsahuje otevřený div, v pokračování kódu se zavře):

1 2 3 4 5 6
  • Původní histogram
  • Opravený histogram
  • Hotová fotka

Nyní naplníme karty obsahem, každá z nich bude v samostatném kontejneru div se stejným ID jako výše v hypertextových odkazech (zde je div otevřená v prvním fragmentu uzavřena).

1 2 3 4 5 6 7 8 9 10 11 12 13
Text, text, text.Text, text, text.Text, text, text.

A tady je celý kód:

PHP kód pro umístění v horní části stránky:

1 2 3 4

HTML kód s kartami a užitečným textem, který je umístěn na správném místě na stránce:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • Původní histogram
  • Opravený histogram
  • Hotová fotka
Text, text, text.Text, text, text.Text, text, text.

Použil jsem tyto karty k vytvoření miniaturních fotogalerií, odstranil jsem to, co jsem považoval za nevhodné okraje a pozadí z výchozích stylů karet, a přilepil názvy karet k obrázku.Pozadí a ohraničení jsem odstranil tak, že jsem styl CSS nastavil na hlavní div, a abych tabulátory přilepil k hornímu okraji fotky, vložil jsem do divu seznam s odrážkami s hypertextovými odkazy, kterému jsem nastavil vhodné styly, konkrétně záporná hodnota margin-bottom. Na ukázkové stránce si také můžete prohlédnout ukázkovou fotogalerii a ukázku praktického použití v článku "Jak používat křivky (Curves) ve Photoshopu" .

Kategorie: