Добавянето на jQuery библиотеки прави сайта много по-привлекателен и подобрява използваемостта.

Drupal 7 в момента включва предварително популярната jQuery UI библиотека

В този пример ще ви покажа как можете да използвате JQuery, за да получите раздели-раздели на обикновена страница на сайта, без да свързвате допълнителни модули, филтри и т.н.

Разделите ще изглеждат по следния начин, щракнете върху изображението, за да отидете на демонстрационната страница:

Първо, в типа съдържание активирайте PHP филтъра, за да активирате манипулатора на PHP код в текста на страницата. След това заредете JQuery библиотеките с помощта на PHP:

1 2 3

Сега добавете JQuery раздели, които ще съдържат JQuery UI. За да изпълните JavaScript, използвайте функцията drupal_add_js():

1 2 3 4 5 6

Сега нека създадем раздели в HTML. В този пример ще създам три раздела, всеки с текст и изображение и уникално заглавие.

Първо, нека дефинираме три раздела (този кодов фрагмент съдържа отворен div, той ще се затвори в продължение на кода):

1 2 3 4 5 6
 
    

  • Оригинална хистограма
    • 

  • Коригирана хистограма
    • 

  • Готова снимка
    •

Сега нека запълним разделите със съдържание, всеки от тях ще бъде в отделен контейнер div със същия ID като по-горе в хипервръзките (тук div отвореният в първия фрагмент е затворен).

1 2 3 4 5 6 7 8 9 10 11 12 13
 
Текст, текст, текст.Текст, текст, текст.Текст, текст, текст.

И ето пълния код:

PHP код за поставяне в горната част на страницата:

1 2 3 4

HTML код с раздели и полезен текст, който се поставя на правилното място на страницата:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
 
    

  • Оригинална хистограма
    • 

  • Коригирана хистограма
    • 

  • Готова снимка
    • 


Текст, текст, текст.Текст, текст, текст.Текст, текст, текст.

Използвах тези раздели, за да създам миниатюрни фотогалерии, премахнах това, което смятах за неподходящо, рамка и фон от стандартните стилове на раздели и залепих заглавията на разделите към изображението.Премахнах фона и рамката, като зададох CSS стила на основния div и за да залепя разделите към горния край на снимката, поставих списък с водещи символи с хипервръзки в div, за който зададох подходящите стилове, по-специално отрицателна най-долна стойност на маржа. Можете също така да видите примерна фотогалерия на демонстрационната страница и пример за практическа употреба в статията „Как да използвате Curves (Криви) във Photoshop“.

Категория:

Полезно