Jinsi Ya Kutengeneza Nyara Kwenye Wavuti

Orodha ya maudhui:

Jinsi Ya Kutengeneza Nyara Kwenye Wavuti
Jinsi Ya Kutengeneza Nyara Kwenye Wavuti

Video: Jinsi Ya Kutengeneza Nyara Kwenye Wavuti

Video: Jinsi Ya Kutengeneza Nyara Kwenye Wavuti
Video: Jinsi ya Kutengeneza Tovuti (Website) S01 2024, Novemba
Anonim

Kuharibu ni zana rahisi kwa wavuti. Inatumiwa sana katika vikao na blogi anuwai, ikiruhusu mtumiaji kuficha kipengee maalum wakati wa bonyeza kitufe. Kwa kuongezea, mharibifu anaonekana mzuri kwenye wavuti na husaidia kuficha sehemu hizo ambazo hupakia ukurasa bila lazima.

Jinsi ya kutengeneza nyara kwenye wavuti
Jinsi ya kutengeneza nyara kwenye wavuti

Ni muhimu

Maktaba ya jQuery

Maagizo

Hatua ya 1

Mwangamizi anaweza kutekelezwa kwa kutumia maktaba maarufu ya jQuery iliyoandikwa katika lugha ya programu ya Hati ya Java. Inatumika kutekeleza mwingiliano kamili wa lugha ya programu na nambari ya alama ya HTML ya ukurasa. Uunganisho wa jQuery hufanywa kwa kutumia HTML kwa kutumia tag . Lazima ueleze mahali ambapo hati iko na uweke aina yake: $ (hati). Tayari (kazi ()

Hatua ya 2

Sehemu ya maandishi iliyoainishwa ndani ya aya fulani lazima ifungwe kwa safu tofauti - div, kwa msaada wa ambayo nyara yenyewe itadhibitiwa: Sasha alitembea kando ya barabara kuu na kukausha kukausha.

Hatua ya 3

Ifuatayo, unahitaji kuunda mbele ya divs zote zilizoitwa vifungo vinavyolingana vya nyara ambavyo vitaanguka na kupanua maandishi. Kwanza, nyara yenyewe imefichwa kwa kutumia kazi ya kawaida "ficha ()": $ ("div [name = 'spoil']") Ficha (); Ifuatayo, unahitaji kuunda maandishi na picha kwa waharibifu wote, ambayo itatumika kama msingi wa vifungo: $ ("P [name = 'spoilbutton']"). Html ("Onyesha maandishi");

Hatua ya 4

Pata vifungo vyote kwenye ukurasa na angalia vichwa vya ngazi ya kwanza mbele ya kitufe. Ili kufanya hivyo, tengeneza hali ambayo itatafuta vitambulisho vya h1 kwa jina. Maandishi ya kichwa yaliyotajwa hujifunga kwenye div yenyewe: $ (“p [name = 'spoilbutton']”). Kila moja (function () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (this).prev (this).html () + "Onyesha maandishi"; $ (this). Prere (this).replaceWith ("); $ (this) mahali paWith (NewSpoilButton);}}})

Hatua ya 5

Ifuatayo, unahitaji kushughulikia bonyeza ya kitufe cha panya kwa kubofya. Ikiwa bonyeza imegunduliwa, inaweza kuonyeshwa: $ (“div [name = 'spoilbutton']”) Bonyeza (fanya kazi) (Kama ($ (hii). Karibu (hii).css ("onyesha") = = "Kizuizi") {

Hatua ya 6

Kisha andika urithi. Ndani ya div, maandishi yamo katika aya p, yaliyomo yamewekwa kwenye lebo ya span: $ (this). Watoto ("p"). Watoto ("span"). Html ("Onyesha maandishi"); Collapse kufungua nyara. Ikiwa haijafunguliwa, panua maandishi. Hatua hii inategemea sheria ya urithi: $ (this).next (this).slideUp ("normal");} mwingine {$ (this). Watoto ("p"). Watoto ("span"). Html ("Ficha maandishi"); $ (hii). Karibu (hii). Upungufu wa chini ("kawaida"); })

Hatua ya 7

Kisha bonyeza sana ya panya kwenye kifungo imeandikwa, ambayo hati itaficha na kufunua nyara. $ (“P [name = 'spoilbutton']”)) Bonyeza (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (hii).slideUp ("kawaida"); $ (hii).html ("Ficha");} rudisha uongo;}); Spoiler iko tayari. Itaonekana wakati kizuizi cha DIV kinachofanana kinapatikana.

Ilipendekeza: