Սպոյլերը կայքի համար հարմար գործիք է: Այն լայնորեն օգտագործվում է տարբեր ֆորումներում և բլոգներում ՝ թույլ տալով օգտվողին կոճակի սեղմման պահին թաքցնել որոշակի տարր: Ավելին, spoiler- ը լավ տեսք ունի կայքում և օգնում է թաքցնել այն հատվածները, որոնք անհարկի ծանրաբեռնում են էջը:
Դա անհրաժեշտ է
Jquery գրադարան
Հրահանգներ
Քայլ 1
Սպոյլերը կարող է իրականացվել `օգտագործելով հայտնի jquery plug-in գրադարանը, որը գրված է Java Script ծրագրավորման լեզվով: Այն օգտագործվում է ծրագրավորման լեզվի ամբողջական փոխազդեցություն էջի HTML նշանշման կոդի հետ իրականացնելու համար: jquery կապը կատարվում է HTML- ի միջոցով, օգտագործելով պիտակը: Դուք պետք է նշեք այն վայրը, որտեղ գտնվում է սցենարը և սահմանեք դրա տեսակը ՝ $ (փաստաթուղթ): պատրաստ (գործառույթ ()
Քայլ 2
Որոշակի պարբերության մեջ նշված տեքստի հատվածը պետք է կցված լինի առանձին շերտի մեջ `div, որի օգնությամբ կվերահսկվի ինքնին փչացողը. Սաշան քայլեց մայրուղով և չորացրեց ծծելը:
Քայլ 3
Հաջորդը, դուք պետք է ստեղծեք բոլոր div- ների անունով, որոնք փչացնում են համապատասխան կոճակները, որոնք կփլուզվեն և կտարածվեն տեքստը: Նախ, սպոյլերը ինքնին թաքնված է `օգտագործելով ստանդարտ« թաքցնել () »գործառույթը. $ (« Div [name = 'spoil'] "): Թաքցնել (); Հաջորդը, անհրաժեշտ է ստեղծել տեքստ և պատկեր բոլոր փչացնողների համար, որը կօգտագործվի որպես ֆոն կոճակների համար ՝ $ («P [name = 'spoilbutton']»): Html («textուցադրել տեքստը»);
Քայլ 4
Գտեք էջի բոլոր կոճակները և ստուգեք կոճակի դիմաց առաջին մակարդակի վերնագրերը: Դա անելու համար ստեղծեք պայման, որը կփնտրի h1 պիտակներն ըստ անունների: Նշված վերնագրի տեքստը փաթաթվում է ինքնանպատակին ՝ $ («p [name = 'spoilbutton']»): Յուրաքանչյուր (գործառույթ () {If ($ (սա).prev (սա). Վերցրու (0).tagName == «H1») {Var NewSpoilButton = «” + $ (սա).prev (սա).html () +”textուցադրել տեքստը”; $ (սա).prev (սա).փոխելWith (“”); $ (սա).փոխարինել With (NewSpoilButton);}})
Քայլ 5
Հաջորդը, անհրաժեշտ է սեղմել սեղմելով մկնիկի կոճակի կտտոցը: Եթե կտտոց հայտնաբերվի, այն կարող է ցուցադրվել ՝ $ (“div [name = 'spoilbutton']”): Կտտացնել (ֆունկցիան () {If ($ (սա). Հաջորդ (այս).css (“ցուցադրում”) = =”Բլոկ”) {
Քայլ 6
Դրանից հետո գրեք ժառանգություն: Div- ի շրջանակներում տեքստը գտնվում է p պարբերության մեջ, որի բովանդակությունը տեղադրվում է span պիտակի մեջ. $ (Սա). Երեխաներ («p»): Երեխաներ («span»): HTML («textույց տալ տեքստը»). Փլուզվել բաց սպոյլեր: Եթե այն բաց չէ, ընդարձակիր տեքստը: Այս քայլը հիմնված է ժառանգության կանոնի վրա. $ (Սա). Հաջորդ (այս).slideUp («նորմալ»);} ուրիշ {$ (այս). Երեխաներ («p»): Երեխաներ («span»): Html («Թաքցնել տեքստը»); $ (սա). Հաջորդ (այս).slideDown («նորմալ»);} վերադարձնել կեղծ; })
Քայլ 7
Դրանից հետո գրանցվում է մկնիկի հենց կտտոցը կոճակի վրա, որով սցենարը կթաքցնի և կբացվի սպոյլերը: $ («P [name = 'spoilbutton']»): Կտտացրեք (ֆունկցիան () {Եթե ($ (սա). Հաջորդ (այս).css («ցուցադրում») = «բլոկ») {$ (սա). Հաջորդ (սա).slideUp («նորմալ»); $ (այս).html («Թաքցնել»);} վերադարձ կեղծ;}); Փչիչը պատրաստ է: Այն կհայտնվի, երբ համապատասխան DIV բլոկ գտնվի:
