Ստեղծեք ձեր սեփական վիջեթը `6 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:52

Այս Instructable- ը կսովորեցնի ձեզ, թե ինչպես ստեղծել հիմնական Yahoo! Վիջեթ Այս ձեռնարկի ավարտին դուք կսովորեք որոշ JavaScript և XML:

Քայլ 1: Սկսելու համար

Վիջեթ պատրաստելու համար ձեզ հարկավոր են որոշ գործիքներ. (Գրառման գրքույկը կատարյալ է)- Պատկերի խմբագրման ծրագիր: (Microsoft Paint- ը լավ է:)

Քայլ 2: Թղթապանակի կառուցվածքի ստեղծում

Այժմ դուք պետք է ստեղծեք թղթապանակի կառուցվածքը ՝ վիջեթ կազմող բոլոր ֆայլերը պահելու համար: Կառուցվածքը հետևյալն է. -Widget Name | Բովանդակություն | Widget.kon Main.js ռեսուրսներ | Բոլոր պատկերները, որոնք կօգտագործի վիջեթը Դուք կարող եք ներբեռնել այս վիջեթը `թղթապանակի կառուցվածքը ինքնաբերաբար ստեղծելու համար Կառուցվածքի նախապատվությունները փոխեք հետևյալի վրա. Արմատ. Գնացեք դեպի ձեր վիջեթների պանակ: (Տեղադրված է «Իմ փաստաթղթերը» Windows- ում)

Քայլ 3: Ստեղծեք բոլոր անհրաժեշտ ֆայլերը

Մենք կսկսենք widget.xml ֆայլի ստեղծմամբ, որը վիջեթների շարժիչի մասին տեղեկություններ է հաղորդում ձեր վիջեթի մասին: Ներբեռնեք մի ձևանմուշ, որը ստեղծել եք ձեզ համար: Ներբեռնման հղումը ստորև: Տեղադրեք ֆայլը «Բովանդակություն» պանակում, որը գտնվում է ավելի վաղ ընտրված անունով պանակում: Բացեք ֆայլը ձեր ընտրած տեքստային խմբագրիչով և ձեր անունը փոխարինեք YourNameHere- ով: Պահել և փակել: Հաջորդը մենք կստեղծենք.kon ֆայլը, որը հիմնական ֆայլն է, որը վիջեթին կասի, թե ինչ անել:. Kon ֆայլը պարզապես XML ֆայլ է ՝ վերանվանված ընդլայնմամբ: Ներբեռնեք այս հիմնական widget.kon ֆայլը և տեղադրեք այն «Բովանդակություն» պանակում: Կրկին բացեք ֆայլը տեքստային խմբագրիչով: Առաջին տողը նշանակում է, որ ֆայլը XML ֆայլ է, որը ստեղծվել է UTF-8 կոդավորմամբ: Հաջորդ պիտակը, որը պետք է ավելացնել, վիջեթի պիտակն է. Հետո հայտարարում եք ձեր կարգավորումները, ինչպես կարգաբերում;. Այժմ դուք պատրաստ եք ավելացնել ձեր պատուհանի տարրերը.. Վիջեթներն ունեն բազմաթիվ օբյեկտներ, որոնք կատարում են որոշակի գործողություններ և ունեն որոշակի հատկություններ: Օրինակ ՝ տեքստի օբյեկտը,, ստեղծում է տեքստ: Ահա տեքստի օբյեկտի որոշ հատկությունների ցանկ. -vOffset (aka y) -լայնություն -բարձրություն Այդ ասելով, եկեք սկսենք կոդավորումը: Կոն ֆայլին ավելացրեք հետևյալ ծածկագիրը ՝ պիտակների մեջ ՝ myText Բարև աշխարհ! Arial տառատեսակով, կապույտ գույնով և չափով 12. Պահեք ձեր կոն ֆայլը և շարունակեք քայլ չորրորդը:

Քայլ 4: Ուրախացեք:

Կրկնակի սեղմեք kon ֆայլի վրա և ձեր վիջեթը կբեռնվի: Շնորհավորում եմ: Դուք ստեղծել եք ձեր առաջին վիջեթը: Բայց մենք դեռ չենք ավարտել կոդավորումը: Դուք, հավանաբար, մտածում եք. «Այսքանը՞»: Շարունակեք քայլ 5 -ում ՝ ձեր վիջեթին ինչ -որ գործառույթ ավելացնելու համար:

Քայլ 5: Ֆունկցիայի ավելացում

Այժմ մենք ստիպելու ենք widget- ը ցուցադրել ընթացիկ ժամանակը: Սա կպահանջի ամեն րոպե թարմացվող ժամաչափ և մեկ այլ ֆայլ: Հաջորդ ֆայլը կլինի JavaScript ֆայլ, որը կմտնի «Բովանդակություն» պանակում: Բացեք ձեր տեքստային խմբագրիչը և ստեղծեք ֆայլ, որը կոչվում է main.js. Addամանակն ավելացնելու համար մենք կօգտագործենք «Ամսաթիվ օբյեկտը»: Ամսաթվի օբյեկտը կարգավորելու համար դուք ստեղծում եք գործառույթ: Այս գործառույթն ավելացրեք js ֆայլին ՝ functionTextText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = լարային (theTime.getMinutes ()); myText.data = "isամանակն է."+ժամը+"."+theminutes; տպել ('թարմացում');} Ձեր վիջեթը դեռ ցույց չի տա ժամանակը, քանի որ չգիտի, թե ինչ անել js ֆայլի հետ: Այս խնդիրը լուծելու համար մենք իրադարձությունների մշակողը ավելացնում ենք Kon ֆայլում ՝ պիտակների մեջ, բայց ոչ պիտակների մեջ. Kon ֆայլը, պիտակների մեջ, բայց ոչ պիտակների մեջ. Պահեք ֆայլերը և տեղադրեք վիջեթը: Այն պետք է ցույց տա ժամանակը: Եթե դա չի աշխատում, ներբեռնեք և՛ կոն, և՛ js- ն ներքևից և փոխարինեք հինով:

Քայլ 6: Ամփոփելով ամեն ինչ

Օգտագործեք վիջեթի փոխարկիչ վիջեթը ՝ վիջեթը.widget ֆայլի փոխարկելու համար: ՈEՇԱԴՐՈԹՅՈ:Ն. Քաշեք թղթապանակը, որը վերնագրված է ձեր վիջեթի անունով փոխարկիչի վրա, այլ ոչ թե kon ֆայլի: Եթե ցանկանում եք ձեր վիջեթով նույնիսկ ավելի հեռուն գնալ, այստեղ որոշ ռեսուրսներ վերցրեք: Ահա այն բաների ցանկը, որոնք կարող եք փորձել կատարել ձեր վիջեթով. Ավելացրեք որոշ միջոցառումներ, ինչպիսիք են onClick- ը, օգտագործելով թե