јКуери: финд ()

јКуери је велики ЈаваСкрипт оквир. Ако нисте имали прилику да раде са њим, надам се да следеће публикација, биће Вам саветујемо да искористите ово нарочито решење. Зато што се одликује брзином, оптимизацију кода да га прими у онолико претраживачима, као што вероватно многи од најинтересантнијих - једноставан за изградњу комплексних решења.

У данашњем члану ће се фокусирати на веома користан метод финд ().

Ако нисте баве овом оквиру, ја позивам да се упознате са основама селектора, користећи званични АПИ на селецторов , или са припремио Бартосз Медониа Основе јКуери наравно . Ово знање ће увелико олакшати разумевање решења представљених овде.

Најбоље хајде да добијете неки конкретан пример овог метода. На већини страница, један од основних елемената за навигацију у менију. Ми ћемо покушати да креирају сопствени анимирани мени користећи минималан број компоненти и послују под сваком прегледачу који подржава ЈаваСцрипт.

Прво Припрема елемената

Почнимо тако што ћете креирати празан ХТМЛ документ:

  <ДОЦТИПЕ хтмл ПУБЛИЦ "- / / В3Ц / / ДТД КСХТМЛ 1.0 Транситионал / / ЕН" "хттп://ввв.в3.орг/ТР/кхтмл1/ДТД/кхтмл1-транситионал.дтд">
 <хтмл кмлнс="хттп://ввв.в3.орг/1999/кхтмл">
 <хеад>
 <мета хттп-екуив="Цонтент-Типе" цонтент="тект/хтмл; цхарсет=утф-8" />
 <титле> Мени </ титле>
 </ Хеад>
 <боди>
 </ БОДИ>
 </ Хтмл> 

Затим узмите најновију верзију са јКуери званичном сајту пројекта (производња) и копирајте га у фолдер наших ХТМЛ датотека.

У оквиру овог документа, могла да користи неки садржај узорка, а нашем менију. Користи се за овај див и спан таговима. Наравно, ставке на нашем менију, треба да буде линк, па их ставите у блоку. Цео стави унутар блока са див ид = менија. Додато датотеку помоћу јКуери скрипту ознаку. Цео би требало да изгледа отприлике овако:

  <див ид="мену">
 <див>
 а хреф # 1 Мени </>
 <спан>
 а хреф # 1.1 Мени </>
 а хреф # 1.2 Мени </>
 а хреф # 1.3 Мени </>
 </ Спан>
 </ Див>
 <див>
 а хреф # 2 Мени </>
 <спан>
 а хреф # 2.1 Мени </>
 а хреф # 2.2 Мени </>
 а хреф # 2.3 Мени </>
 а хреф # 2.4 Мени </>
 а хреф # 2.5 Мени </>
 </ Спан>
 </ Див>
 <див>
 а хреф # 3 Мени </>
 <спан>
 а хреф # 3.1 Мени </>
 а хреф # 3.2 Мени </>
 а хреф # 3.3 Мени </>
 а хреф # 3.4 Мени </>
 </ Спан>
 </ Див>
 <див>
 а хреф # 4 Мени </>
 <спан>
 а хреф # 4.1 Мени </>
 а хреф # 4.2 Мени </>
 </ Спан>
 </ Див>
 </ Див> <- # Крај Мену ->
 Постоје неки узорак садржај.  Постоје неки узорак садржај.
 Постоје неки узорак садржај.  Постоје неки узорак садржај.
 Постоје неки узорак садржај.  Постоје неки узорак садржај.
 Постоје неки узорак садржај.  Постоје неки узорак садржај.
 Постоје неки узорак садржај.  Постоје неки узорак садржај.
 <сцрипт типе="тект/јавасцрипт" срц="јкуери.јс"> </ сцрипт> 

Посебно ставити многе ставке у менију да покаже колико лако ће привући многе од њих са јКуери, у зависности од тога који блок се померите миша.

Други Дефинисати изглед менија (ЦСС)

У овом одељку ћемо дефинисати изглед који се користи у хтмл фајл, код блокова. Ја сам спреман, следећи код у стилу, који се налази у главној секцији:

  <стиле типе="тект/цсс">
 <-!
 * {Маргин: 0пк, бордер: 0пк;}
 а {тект-децоратион: ноне; фонт-сизе: 20пк Грузија, "Тимес Нев Роман", Тимес, Шерифа;}
 хтмл, боди {маргин: 10пк;}

 # Мени {Топ: 0пк; флоат: лефт; ширина: 100%;}
 Див # мену {позиција: релативна; флоат: лефт;}
 Див # мену: активан, п # мени а: линк, мени п #: виситед {дисплаи: блоцк; позиција: релативна; вертицал-алигн: средња бацкгроунд: # ццц; цолор: # ффф; паддинг: 10пк 5пк; ширина: 150пк;}
 Див # мени а: ховер {бацкгроунд: # 999;}
 Див # мену тд {дисплаи: ноне; позиција: апсолутна, врх: 100%; лево: 0, флоат: лефт;}
 Див див # мену: активна, # мени див див: веза, п # мени а: виситед п {поситион: релативни; дисплаи: блоцк; флоат: лефт; Топ: 0пк; бацкгроунд: # ДДД; цолор: # ффф; бордер: 5пк 10пк, ширина 150пк;}
 Див див # мени а: ховер {бацкгроунд: # 999;}
 ->
 </ Стиле> 

У нашем примеру, креирали смо једноставну само два-ниво менија, али не постоји ништа на путу да их модификује и прилагоди било који број нивоа.

Ако смо у овом тренутку, требало би да се односе на оквир за креирање цсс'овего мени .

Трећи Наил програма - наћи.

До таквих мера, спремни смо да спроведе на целој страни ЈаваСцрипт код. Ми такође знамо, као што је поменуто, каже селектор. У нашем случају, пример је сасвим једноставна, јер постоје само четири главна мени, али није тешко замислити да може бити више, а свака може имати више гране. Ово дисквалификује петље методу, такође искључује и бруталне силе, Размотривши све случајеве понаособ. Али захваљујући наћи начина, проблем се своди на једну веома јасну линију кода која извршава цео посао за нас. Добро је да је наша код ЈаваСкрипт био у $ (документ) Спреман, обезбеђујући мислимо на њега. Када се страница учита, све спољне скрипте, стилови и друге датотеке.

  <сцрипт типе="тект/јавасцрипт">
 <-!
 / / <[ЦДАТА [
 $ (Документ) реади (фунцтион (). {
	 $ ("Див # мени") Прелаз. (
		 функција () {
			 . $ (Овај) Финд ("п"), ЦСС ({непрозирност: 0.98}) СлидеТоггле ("Фаст");..
		 }
		 функција () {
			 . $ (Овај) Финд ("п") СлидеТоггле ("Фаст").;
		 }
	 );
 });
 / /]]>
 ->
 </ Сцрипт> 

Код горе Препоручујем да стави ознаку скрипту, која мислимо да јКуери, на дну.

У главном селектора, погледајте Таг ид = "мени", у коме је див. Метод. Ховер (), значи појава инвазију миша, изабране ставке као и параметара, узима једну или две функције које се обављају током покретања овог догађаја. Друга функција је опционална и врши се када се миш напусти подручје нашег елемента. Покушао да уведе код тако да обе функције су транспарентни читаоцу, али ја препоручујем минимизирање код у постојећим пројектима.

Дозволите нам да анализирамо сада код унутар функције. Опет, овде користимо селектор, овог пута мислимо на предмет у коме живимо Сваки враћа јКуери селектор, који може да реши ове клаузуле.. Али ако желите унутар елемента се односе на ставке унутар ставке, користите Потражи метод, који проналази и враћа све одговарајуће елементе. Имајте ово у виду, јер ако желите да се односи на одређену ставку, можете да користите ту класу и после жалбе Финд ("ЦлассНазва.").. Наравно, унутра наћи, ми такође може односити на више компликованих структура елемената, као и селектори јКуери.

Прва функција као што можете видети, мењати пронаћи метод враћа објекат и промените своју транспарентност, а затим користите слидеТоггле метода (), покреће се анимацију, у овом случају, то је анимација, "силази" на дну, који одређује параметар подешен да приказује нико у подешавањима елемента (елемент је невидљив, тако повуците једино може да уради је да га покаже).

У другој функцији, све изгледа врло слично, осим што ми више не треба да мењате провидност, јер је већ промењен. Урадили смо то на јКуери, укључујући јер у ЦСС-у, не би било могуће, на такав начин да се постигне пуна усаглашеност са В3Ц Валидатор, и да је транспарентност је исправно приказује у свим модерним прегледачима који подржавају ЈаваСцрипт.

4. Резиме

Сврха овог члана, је учење како да креирате анимиране меније, али, упознавање много занимљивих питања која се тичу метода финд (), као и јКуери. Могућности су огромне, и надам се да након читања овог члана, ће добити неколико ентузијаста.

Док ефекат нашег рада, можемо видети демонстрације .

Будите Дружељубив, Схаре

• 

Сродне ставке

• Посетите # 2
• Креирање графике на веб страницама
• јКуери: опозовите избор опција ВебКит?
• Проблеми са тинимце и АЈАКС?
• Вреди да се види # 3