Oxirgi darsda siz o'zingiz qanday yaratishni o'rgandingiz o'z yon paneli va bu darsda siz o'rganasiz WordPress -da o'z vidjetini qanday yaratish kerak... Vidjet - bu yon panelda joylashtirish uchun mo'ljallangan modul.
Nega bizga vidjetlar umuman kerak? Ular saytga yordamchi tarkibni tartibli joylashtirish, shuningdek, uni keyinchalik tahrir qilish uchun kerak. Masalan, vidjetlarga joylashtirish juda keng tarqalgan: havolalar, reklama birliklari, obuna shakllari va boshqa muhim ma'lumotlar.
Yoqilgan WordPress administrator konsolining chap tomonida ko'rish mumkin bo'lgan standart vidjetlar allaqachon mavjud. Yorliqda - Tashqi ko'rinish/ Vidjetlar, O'ng tomonni sichqoncha yordamida barcha mavjud vidjetlarni sudrab olib boradigan yon panellar egallaydi.
O'z WordPress vidjetini qanday yaratish kerak
Keling, ochaylik WordPress kodeksi va hujjatlarda nima borligini ko'ring o'z vidjetini yaratish. WordPress standart sinfni uzaytirishni taklif qiladi WP_Widget va uning funktsiyalari va bitta matnli tugallangan kodning namunasini ko'rsatadi. Yangi_Vidjet kengaytirilgan WordPress vidjet WP_Widget.
New_Widget klassi WP_Widget -ni kengaytiradi (
Uchun kod yangi vidjet yaratish standart nom bilan Foo_Widget, bu nomni hamma joyda o'z ismingiz bilan almashtirishingiz kerak - Yangi_Vidjet.
Yangi sinf qo'shilishi kerak Yangi_Vidjet, dan kodni nusxalash Misol kodeksga joylashtiring va faylga joylashtiring funktsiya.php... Shuningdek, siz yangi vidjetni ro'yxatdan o'tkazishingiz kerak, bu ilgak yordamida amalga oshiriladi widgets_init, ilgak qo'shilgan vidjetni yadroga ilib qo'yadi WordPress... Quyida vidjetni ro'yxatdan o'tkazishga misol keltirilgan Yangi_Vidjet, ushbu kodni faylga qo'shing funktsiya.php, sinf bilan koddan keyin.
Register_new_widget () funktsiyasi
Register_widget ("Yangi_Vidjet");
}
add_action ("widgets_init", "register_new_widget");
Endi bizning vidjetimiz qo'shilishi mumkin bo'lgan vidjetlar maydonida paydo bo'ldi To'g'ri joy yon panelda.
Saytda biz yaratgan vidjetni ko'rishimiz mumkin. Yangi vidjet mutlaqo befoyda, chunki u faqat sarlavhani ko'rsatadi, lekin men uchun yaratilish tamoyilini ko'rsatish juda muhim edi.
Function.php fayli suyuq emas
Agar sizda juda ko'p maxsus kod bo'lsa, men har bir yangi vidjet sinfining kodini alohida biriga ko'chirishni maslahat beraman. PHP vidjetli shaxsiy papkaga joylashtirgan fayl. Bundan tashqari, barcha maxsus vidjetlar uchun ro'yxatdan o'tish kodi uchun siz boshqa fayl yaratishingiz kerak. Endi siz ushbu fayllarni ulashingiz kerak funktsiya.php funktsiya orqali talab qilish.
Get_template_directory () talab qilinadi. "/widgets/custom-widget-1.php";
get_template_directory () talab qilinadi. "/widgets/custom-widget-2.php";
Vidjetlarni qanday o'chirish mumkin
Agar siz standart yoki maxsus vidjetlardan foydalanmoqchi bo'lmasangiz, ularni o'chirib qo'yishingiz mumkin. Buning uchun bor WordPress funktsiya mavjud - unregister_widget (), vidjetlarni o'chirmaydi WordPress yaxshi, lekin ularni oddiygina boshqaruv konsolidan olib tashlaydi. Faylga joylashtirish funktsiya.php o'chirib qo'yishingiz kerak bo'lgan vidjetlarning nomlari.
Remove_calendar_widget () funktsiyasi ()
unregister_widget ("WP_Widget_Calendar");
}
Bundan tashqari, yadroga ulanadigan ilgakni olib tashlashni unutmang. WordPress.
Add_action ("widgets_init", "remove_calendar_widget");
Agar siz yangi veb-ishlab chiquvchi bo'lsangiz, albatta vidjetli tayyor plaginlardan foydalanishingiz mumkin. O'z tajribamdan bilaman, hozirda qaysi vidjetlar saytlarda ko'proq talabga ega.
Aloqa shakli 7 - aloqa shakli plagini
Bu plagin eng ommabop, garchi u o'z vidjetini yaratmasa ham, siz yaratgan barcha shakllarning o'z qisqa kodi bor. Siz kerakli shaklning qisqa kodini nusxa ko'chirasiz va rejimda matn vidjetiga joylashtirasiz "Matn" berilgan qisqa kod.
Tayyor teskari aloqa shakli bo'lgan vidjet saytda yon panelda paydo bo'ladi.
WordPress vidjetlari foydalanuvchilarga o'z saytlarida narsalarni joylashtirishni osonlashtiradi. Foydalanuvchilarga o'z sxemalarini yaratishga imkon beradigan vidjetlardan foydalanadigan WordPress mavzular va plaginlari juda ko'p. Vidjet boshqaruvini yaxshilash uchun turli xil plaginlar mavjud. Ushbu maqolada biz sizga WordPress saytingiz uchun maxsus vidjetni qanday yaratishni ko'rsatamiz.
WordPress vidjeti nima?
Taqdim etish uchun vidjetlar yaratilgan oson yo'l WP mavzusidagi materiallarning dizayni va tuzilishini boshqarish. Vidjetlarning ajoyib tomoni shundaki, siz ularni yon panelga yoki saytingizning vidjetga tayyor joylariga sudrab tashlab qo'yishingiz mumkin. Ular plaginlarga katta moslashuvchanlikni beradi, shuning uchun ular mavzuni ishlab chiquvchilar tomonidan tez -tez ishlatiladi. ishlab chiquvchilarga o'z mahsulotlariga funksionallikni qo'shish imkonini beradi, bu esa foydalanuvchilarga hech qanday kod yozmasdan kirishga ruxsat beradi.
Albatta, foydalanuvchi sifatida siz har doim o'zingiz yaratishingiz mumkin, keyinchalik uni har qanday mavzuda ishlatishingiz mumkin.
WordPress -da vidjet yaratish
Vidjet kodini ikki xil usulda yozish mumkin: uni mavzuning function.php fayliga qo'shing yoki alohida funktsional plagin yarating.
Ushbu qo'llanmada biz tashrif buyuruvchilarni kutib oladigan oddiy vidjet yaratamiz. Quyidagi kodni nusxa ko'chiring va uni plaginingizga yoki mavzuingizdagi functions.php -ga joylashtiring.
// wpb_widget vidjetlar sinfini yaratish WP_Widget (__construct () funktsiyasi (ota -ona :: __ qurish (// "vidjetingizning asosiy identifikatori" wpb_widget "), // Vidjet nomi UIda paydo bo'ladi __ (" WPBeginner vidjeti "," wpb_widget_domain ") ), // Vidjetlar tavsifi majmuasi ("tavsif" => __ ("WPBeginner qo'llanmasiga asoslangan namuna vidjeti", "wpb_widget_domain"),));) // vidjetning oldingi qismini yaratish // Bu erda umumiy vazifa bajariladi. vidjet ($ args, $ misol) ($ title = apply_filters ("widget_title", $ instance ["title"]); // vidjet argumentlari mavzular bilan aniqlanganidan oldin va keyin echo $ args ["before_widget"]; agar (! bo'sh ($ title)) echo $ args ["before_title"]. $ title. $ args ["after_title"]; // Bu erda siz kodni ishga tushirasiz va chiqish echosini __ ko'rsatasiz ("Salom, dunyo!", " wpb_widget_domain "); echo $ args [" after_widget "];) // Widget Backend umumiy funktsiyasi shakli ($ instansiya) (agar (isset ($ instansiya [" sarlavha "]))) ($ title = $ instansiya [" sarlavha "] ;) boshqa ($ title = __ ("Yangi sarlavha", "wpb_widget_domain");) // Widge admin shakli?>
"ismi ="get_field_name ("sarlavha"); ?> "type =" text "value =" (! LANG:!}" />
Endi "Tashqi ko'rinish - vidjetlar" bo'limiga o'ting va uni ko'rish uchun WPBeginner vidjetini yon paneliga torting.
Juda oddiy, shunday emasmi? Birinchidan, biz maxsus vidjet yaratamiz. Keyin biz vidjet aniq nima qilishini va uning orqa qismida qanday ko'rsatilishini aniqlaymiz. Keyin biz vidjet tomonidan kiritilgan o'zgarishlarni qanday hal qilish kerakligini aniqlaymiz. Nihoyat, biz ro'yxatdan o'tamiz va vidjetni yuklaymiz.
Ushbu kodda ba'zi narsalar sizga savollar tug'dirishi mumkin. Masalan, wpb_text_domain nima qilayotganini aytaylik. WordPress tarjima va mahalliylashtirish uchun gettext -dan foydalanadi. Shunday qilib: wpb_text_domain va __e gettextga bu satrlarni tarjima qilish mumkinligini aytadi. , ko'rsatmamizga qarang.
Biz hammamiz bir xil tarzda video ilovalardan foydalanamiz, chunki ular Android tizimiga xosdir, hatto iPhone egalari ham ularga yashirincha qarashadi. Siz qanday vidjetlardan foydalanasiz? Soat, ob -havo - barchasi "ish", to'g'rimi? Ehtimol, sizda chiroyli vidjetlar, Premium vidjetlar yoki shunga o'xshash ilovalar o'rnatilgan. Bu dasturlar, albatta, yaxshi, lekin ular ijodkorlikning yurishiga yo'l qo'ymaydi. O'zingiz smartfoningiz uchun vidjet yaratmoqchimisiz? Keling, buni Editor vidjetlar ilovasi yordamida qanday qilish mumkinligini ko'rib chiqaylik.
Biz chiroyli fonni, soatning katta yuzini, haftaning bir kunini olamiz, lekin ob -havo bo'lmasa -chi? Va biz uni ideal vidjetimizga qo'shamiz va hatto 3 kunga birdaniga. Shunday qilib, bularning barchasi Android Editor vidjetlar ilovasi yordamida amalga oshirilishi mumkin. Biz yaratishni boshlaymiz.
[
Odatiy bo'lib, bizda sakkizta vidjet tartibi bor, birini tanlang va yaratishni boshlang. Bu vaqtda hech kim bizni imkoniyatlarimizga chek qo'ymaydi. Fonni tanlash. Bu rasm yoki rangni to'ldirish bo'lishi mumkin, siz qatlamning shaffofligini sozlashingiz mumkin. Ramkani tanlash. Ularning ko'pchiligi bor va ularning barchasi juda chiroyli, albatta ta'mi va rangi ... Keyin biz vidjetimizni to'ldirishga o'tamiz. Buning uchun bizda turli xil elementlar mavjud: soat, haftaning kuni, sana, bir nechta proektsiyalarda batareyaning zaryadlanishi, o'tkazib yuborilgan qo'ng'iroqlar va xabarlar haqida bildirishnomalar, ob -havo elementlari. Siz tasavvur qilganingizdek, tanlov juda keng. Biz kerakli narsani olamiz va kerakli tarzda tartibga solamiz. Shuningdek, biz ob'ekt rangi va shrift uslubini o'zgartirishimiz mumkin. Umuman olganda, biz to'liq go'zallikni boshqaramiz va har birining o'ziga xosligi bor - axir, biz hammamiz o'ziga xosmiz!
Editor vidjetlari ilovasi juda zo'r. Shuning uchun, ishning natijasi faqat bizning tasavvurimizning uchishiga bog'liq.
Vidjetlar har xil o'lchamda bo'lishi mumkin va ularni kattalashtirish mumkin.
Aytgancha, sozlamalarda biz vaqt va sana formatini tanlashimiz mumkin. Shuningdek, vidjetni bosish orqali "harakat" ni belgilang. Bu ham telefon holati haqida qo'shimcha ma'lumot bo'lishi mumkin, ham oldindan tanlangan dasturni ishga tushirilishi, masalan, ovoz yozuvchisi. Yoki telefon raqamini terish, bundan ham g'ayrioddiy, lekin kimgadir foydali bo'lishi mumkin.
Umuman olganda, agar siz android qurilmangiz uchun vidjet yaratmoqchi bo'lsangiz, unda muharrir vidjetlari sizning to'g'ri yordamchingiz bo'ladi.
AppWidget yoki oddiygina "vidjet" - bu Android operatsion tizimidagi foydalanuvchi interfeysining eng samarali va qulay elementlaridan biri bo'lib, uni tegishli dasturning ba'zi funktsiyalariga tezkor kirish uchun ish stoliga qo'shish mumkin. Ushbu maqolada biz o'z qo'llarimiz bilan vidjetni qanday yaratishni bilib olamiz.
Vidjet konstruktiv nima? Vidjet unga tegishli bo'lgan ilovaga tegishli ba'zi ma'lumotlarni ko'rsatish yoki ushbu dastur bilan to'g'ridan -to'g'ri ish stoli orqali o'zaro ta'sir o'tkazish uchun kerak. Eng oddiy misol - bu ish stolidagi soat. Tabiiyki, vidjetlarni ish stoliga osongina qo'shish yoki olib tashlash mumkin.
Yaxshi bajarilgan vidjetlar qurilma bilan o'zaro aloqani sezilarli darajada optimallashtiradi. Bundan tashqari, ko'pincha eng qulay vidjetlar ish stolida minimal bo'sh joyni egallaydi va ayni paytda eng ma'lumotli hisoblanadi. Deyarli har qanday foydalanuvchi Android gadjetining ish stoliga maksimal ma'lumotni joylashtirishga harakat qiladi va muhim jihat shundaki, joy cheklangan.
Vidjet dizaynidan boshlaylik. Yaxshiyamki, Google dasturiy ta'minot ishlab chiqaruvchilari uchun dizayn jarayonini va asosiy ergonomik tamoyillarini batafsil bayon qiladigan juda foydali UI ko'rsatmalarini taqdim etdi. Vidjet yaratish bo'yicha alohida rasmiy ko'rsatma ham mavjud, uni havolada topish mumkin: //developer.android.com/guide/practices/ui_guidelines/widget_design.html.
Ish stolidagi bitta "katakchani" egallagan vidjetning o'lchamlari mos ravishda 80x100 piksel, uzunligi 4 katak va balandligi bitta cho'zilgan vidjet yaratish uchun sizga mos ravishda 320x100 piksel kerak bo'ladi. Biz bu o'lchamni yaratayotgan vidjet uchun asos qilib olamiz.
Endi vidjetni chizish kerak. Umuman olganda, vidjetda hech qanday grafik qism bo'lmasligi mumkin va fon va ramkasiz faqat matn yoki boshqaruv elementlarini ko'rsatishi mumkin, lekin, albatta, chiroyli va ko'zni qamashtiruvchi vidjet yuqori sifatli dizaynga ega bo'lishi kerak. Shunday qilib, fonni chizamiz. Keling, yuqoridagi UI qo'llanmasining asosini olaylik. Biz Photoshop -da yoki boshqa grafik muharririda mavjud bo'lgan bo'sh joyni ochamiz va xohlagan narsani qilamiz, shundan so'ng olingan tasvirni .png formatida saqlaymiz. Bizga kerak bo'lgan format PNG-24, 8-bitli rang va shaffof fon. Shunday qilib, bizning vidjetimiz uchun tayanch tayyor.
Endi dasturiy ta'minot qismini yaratishga o'tamiz. Vidjetda dasturiy qism bo'lmasligi mumkin. Oddiy qilib aytganda, u vidjetlarni qo'shish menyusida bo'ladi, lekin asosiy dastur menyusida emas. Biz aynan shu turdagi vidjet yaratamiz. Yangi loyiha yarating va unga qulaylik uchun nom bering, shunda asosiy sinf widget.java deb nomlanadi.
Tahrirlash AndroidManifest. xml... Biz vidjetni e'lon qilamiz:
paket = "com.example.widget"
android: versionCode = "1"
android: versionName = "1.0 ″>
android: resurs = "@ xml / widget_info" />
Endi widget.java -ni tahrir qilaylik. Bu erda vidjet turli xil sharoitlarga qanday munosabatda bo'lishini tasvirlash kerak. AppWidgetProvider sinfida quyidagi usullar mavjud:
onUpdate - bu usul vidjet yaratilganda, shuningdek belgilangan vaqt o'tganidan keyin chaqiriladi. Vaqt ushbu vidjet konfiguratsiya faylida o'rnatiladi. E'tibor bering, u ko'pincha ishlatiladi.
onDeleted - bu usul vidjet ish stolidan o'chirilganda bajariladi.
onEnabled - bu usul vidjet birinchi marta yoqilganda chaqiriladi. Ammo aynan bir xil vidjet qo'shilsa, bu usul bajarilmaydi.
onDisabled - bu usul vidjetning oxirgi nusxasi ish stolidan o'chirilganda bajariladi. Shunga ko'ra, bu usul onEnabled -ning teskarisidir.
onReceive - bu usul hamma bilan bir vaqtda chaqiriladi. Ko'pincha umuman ishlatilmaydi.
Biz vidjetning dastur qismiga chuqur kirmaymiz va shuning uchun biz o'z namunamizni hech qanday ishlovchilar bilan to'ldirmaymiz, balki barcha funksiyalarni Layouts orqali amalga oshiramiz. AppWidgetProvider sinfini quyidagicha e'lon qilishingiz kerak:
com.example.widget to'plami;
android.appwidget.AppWidgetProvider -ni import qilish;
umumiy sinf vidjeti AppWidgetProvider -ni kengaytiradi (
}
Keyinchalik, biz vidjetni tasvirlaymiz - bu mobil qurilma nima bilan shug'ullanayotganini tushunishi uchun kerak. Buning uchun siz papka yaratishingiz kerak xml papkada rez... Unda biz nomli fayl yaratamiz vidjet_ ma'lumot. xml... Biz yaratilgan faylni ochamiz va unga quyidagi kodni yozamiz:
android: minWidth = "294dp"
android: minHeight = "72dp"
android: updatePeriodMillis = "0 ″
android: initialLayout = "@ layout / widget">
Bu erda ko'rsatilgan parametrlarning qisqacha tavsifi:
minWidth - vidjet ishlashi uchun zarur bo'lgan minimal kenglik.
minHeight - vidjet ishlashi uchun zarur bo'lgan minimal balandlik.
updatePeriodMillis - vidjet yangilanadigan davr, millisekundlarda ko'rsatilgan. Parametr juda foydali, chunki belgilangan vaqt oralig'idan keyin AppWidgetProvider ob'ektining onUpdate usuli ishga tushiriladi.
initialLayout - parametr bizning vidjetimiz interfeysini tavsiflovchi manbaga ishora qiladi.
Vidjet hajmini hisoblash formulasi quyidagicha: (yacheykalar soni * 74) - 2.
Keling, biz yaratayotgan vidjet interfeysini tasvirlashni boshlaylik. Bu erda biz ilgari yaratgan fon yordam beradi. Fon rasmini papkaga import qilish dwawable(yoki barcha uchta papkada chizilgan har xil ekran o'lchamlari uchun). Jildda tartib nomli fayl yarating vidjet. xml... Interfeys oddiy tadbirlar uchun ta'riflangan, lekin ba'zi cheklovlar mavjud. Quyidagi elementlardan foydalanish mumkin:
Keling, LinearLayout yarataylik, unga biz yaratilgan fon tasvirini qo'llaymiz va masalan AnalogClock qo'shamiz. Soatning o'zi ramkaga to'g'ri kelmaydi, lekin misol sifatida u mos keladi. Shunday qilib:
android: id = "@ + id / vidjet"
android: layout_height = "fill_parent"
android: orientatsiya = "gorizontal"
android: gravity = "center_vertical"
android: background = "@ drawable / frame">
android: layout_width = "fill_parent"
android: layout_height = "wrap_content" />
21 may , 2016
Har safar o'z saytlarimda disqus yoki google analytics kabi xizmatlardan tayyor echimni ulaganimda, men juda murakkab funksiyalarni birlashtirish osonligidan hayron qolaman. Men kodga 3 satr javascript kodini qo'ydim - va sizda sharhlar bilan blok mavjud. Yana 2 qator - va Google yoki Yandex tahlillari mavjud. Albatta, bu holda hech qanday sehr bo'lmaydi, xuddi shu 3 qatorli kod barcha kerakli kodni uzoq serverdan olib tashlaydi va aslida saytingiz sahifalarida kichik veb -ilovasini joylashtiradi. Lekin u ichkarida qanday ishlaydi va buni o'zingiz qanday qilishingiz mumkin? Bu bilan shug'ullanish juda qiziq edi va oxir -oqibat men shunday oddiy joylashtirish sxemasiga muvofiq ishlaydigan va ayni paytda foydali narsalarni bajaradigan kichik vidjetga ega bo'ldim. Qo'shimcha tafsilotlar.
Vidjetlar nima uchun kerak?
Iframe bu maqsad uchun juda mos keladi. Bu aslida "ota -onasi" ga kirishga ruxsatisiz boshqa sahifalarga joylashtirilgan alohida HTML -sahifalar. Ya'ni, bizning veb -ilovamiz iframe -ga joylashtirilishi mumkin, u asosiy saytga aralashmasdan o'z ishini xotirjam bajaradi. Va sizning vidjetingiz nima qiladi, sahifada sharhlar tizimini tuzish, ajoyib o'yinchoq ko'rsatish yoki interaktiv reklama bannerini chizish - bu sizning xohishingiz va tasavvuringizga bog'liq.
Ushbu maqolada biz o'yinchoqni maqsad qilmaymiz, balki ob -havoni aniqlash uchun qanday o'rnatilgan vidjetni yaratishni ko'rib chiqamiz. Albatta, buning uchun ob-havo xizmatlari juda ko'p, lekin biz tayyor echimni ishlatishga qiziqmaymiz. Umuman qanday ishlashini tushunish va kelajakda ba'zi foydali narsalar uchun bilimlarni qo'llash uchun o'z qo'llarim bilan oddiy vidjet yaratmoqchiman. Shu bilan birga, biz o'z bilimlarimizni javascript va php tillarida yangilaymiz.
Nima qilamiz?
Biz ertangi ob -havo ma'lumoti shaklini oladigan vidjet yaratamiz. Misol sifatida faqat haroratni olaylik, lekin ko'rib turganingizdek, boshqa ma'lumotlarni ham qo'shish oson bo'ladi. Vidjetda ertangi kun uchun havo harorati haqidagi ma'lumotlar, shaharni tanlash imkoniyatiga ega ochiladigan ro'yxat bo'ladi. Yangilash tugmasi serverga so'rov yuboradi, u o'z navbatida ob-havoni aniqlash uchun uchinchi tomon xizmatiga murojaat qiladi va kerakli ma'lumotlarni bizga qaytaradi. Biz bu ma'lumotlarni qayta ishlaymiz va mijozning brauzeriga qaytaramiz. Bu erda vidjetning mijoz tomoni ma'lumotni qabul qiladi va foydalanuvchiga ko'rsatadi.
Bu erda biz ob -havoni qanday aniqlashni bilamiz degan sahifani ko'ramiz. Va biz tashrif buyuruvchilarga ob -havoni aniqlab olishlariga ishonch hosil qilishlari uchun qolipni ko'rsatamiz.
Formaning joylashuvi menga yoqmadi, bu maqolaning maqsadi emas. Haqiqiy dunyoda, albatta, biz diqqatni tortadigan yoqimli shaklni yaratardik.
Shunday qilib, orqaga qaytaylik. Odamlar ob -havoni bilishadi, ehtimol ular aslida boshqa xizmatdan foydalanayotgani haqida o'ylamasdan ham. Lekin hamma baxtli va baxtli, siz saytingizga tashrif buyuruvchilarni, mijozlarni - kerakli ma'lumotlarni olasiz.
Bu erda ozgina tushuntirish kerak: vidjetlarning maqsadi - o'ziga xos, qulay va qiziqarli funksionallikni ta'minlash. Biz o'z misolimizda aniq ma'lumot bermaymiz. Siz ob -havoni istalgan joydan bilib olishingiz mumkin. Ammo ta'lim maqsadlari uchun, biz hali hech narsa qilishni bilmaymiz, biz Rossiya va MDHdagi ob -havo ma'lumotlari xizmatidan ob -havo ma'lumotlarini olamiz. Ular xushmuomalalik bilan bizdan foydalanadigan bepul api taqdim etishadi.
Texnologiya bo'yicha
Hech narsa murakkab emas. Men allaqachon iframe haqida sir qoldirganman. javascript kodi bitta qo'shimcha kutubxonasiz vanillaJS da yoziladi. DOM manipulyatsiyasi uchun jQuery bo'lmasa ham. Bizning maqsadimiz, shuningdek, vidjetni iloji boricha engilroq qilishdir va ularning ishini engillashtirish uchun foydalanuvchining brauzeriga qo'shimcha kutubxonalarni yuklashning hojati yo'q. Shunday qilib, keling, DOM bilan ishlashni va ajax so'rovlarini mahalliy javascriptda yuborishni eslaylik va mijozlarimiz bizga minnatdorchilik bildiradilar. Server tomoni php kodining o'nlab qatorlari.
Biz kodni yozamiz. Asosiy sahifani yarating
Bizning kelajakdagi vidjetimiz joylashgan sahifa. Biz u erdagi ob -havoni bashorat qilish qobiliyatimiz qanchalik zo'r ekanligimiz haqida bir necha satr matn yozamiz. Bu index.html fayli bo'ladi - oddiy html sahifasi. Bosh qismida shunday yozamiz:
Vebdevkin. Ob -havo vidjet demo
Tana bo'limida shunday:
Bu erda nima qiziq? Biz sahifa uslublarini (vidjet uchun emas!) CSS / style.css faylida saqlaymiz. Va kerakli joyda iframe..html yarating. Biz chegarani va undan siljish qobiliyatini olib tashlaymiz va qo'llarimiz bilan vidjet hajmini o'rnatamiz. Albatta, javob berishni yaratish qiziqroq, lekin biz buni keyinroq ko'rib chiqamiz.
Sahifa uslublari, ortiqcha bezovtalarsiz:
Tanasi (shrift oilasi: Arial; shrift o'lchami: 14 piksel;). O'rash (kengligi: 960 piksel; chegara: 0 avtomatik;). Ob-havo-vidjet-konteyner (chegara: 30 piksel 0;)
Vidjet stubi
Vidjet oddiy html hujjati. Farqi nima? Birinchidan, keraksiz meta teglar bilan bezovta qilmaymiz, chunki qidiruv tizimlariga bizning vidjetimiz kerak emas. Ikkinchisi-biz ikkala uslubni ham, js-kodni ham html-sahifa kodiga yozamiz. Vidjet yuklanishini iloji boricha tezroq qilish uchun bizga bu kerak va veb -serverga so'rovlar sonini kamaytirish bizga bu masalada yordam beradi. Biz hamma narsani bitta faylga yuklaymiz.
Bosh bo'limda bizda quyidagi kod bo'ladi:
Tana bo'limida:
Keling, ushbu bloklarni batafsil ko'rib chiqaylik.
Vidjet uchun belgi
Ertaga harorat ° C
Mana odatiy shakl. Yuqorida biz haroratni ko'rsatadigan kichik panel. Keyin shaharni tanlash bilan tanlang. Shaharlar uchun qiymatlar meteoservice.ru xizmatidan olingan, bu erda men sizga keyinroq aytaman, biz to'g'ridan -to'g'ri ob -havo ma'lumotlarini olamiz. Va oxirida yangilash tugmasi mavjud. Joylashuv sinflarda bo'ladi, identifikatorlar javascript kodidan kirishni talab qiladigan elementlarga beriladi. Wbd- prefiksi (webdevkin-dan) qulaylik uchun ishlatiladi, vidjet va asosiy sahifani belgilashni chalkashtirib yubormaslik uchun.
Vidjet uchun uslublar
html, body, body * (chegara: 0; to'ldirish: 0;) .wbd-vidjet, .wbd-vidjet * (qutining o'lchamlari: chegara-quti; shrift-oilasi: Ubuntu;) .wbd-vidjet (chegara: qattiq 1px # 333; to'ldirish: 20 piksel; rang: qora;) .wbd-widget__info (rang: po'lat rang; shrift o'lchami: 16 piksel; matnni tekislash: markaz;). Wbd-vidjet__form-yorlig'i (ko'rsatish: blok; chiziq balandligi: 30 piksel;)Vidjet uchun uslublar iloji boricha sodda - ularni xohlaganingizcha yozishingiz mumkin. Shuni unutmangki, biz uslublarni to'g'ridan -to'g'ri "head style" bo'limidagi vidjetning html -fayliga joylashtiramiz.
vidjetning javascript kodi.
Keling, serverni ishga tushirish, hodisalarni bog'lash va ma'lumotlarni qabul qilish usullarini o'z ichiga olgan sinf yozaylik. Shuni unutmangki, biz kodni mahalliy jsda yozamiz, chunki biz foydalanuvchilarga kutubxonalarning keraksiz yukini yuklamoqchi emasmiz.
Var WeatherWidget = (function () (// ajax so'rovlarini bajarish uchun yangi XMLHttpRequest () da XHR = ("onload")? XMLHttpRequest: XDomainRequest; // Vidjet konstruktor funktsiyasi Widget () (this..php "; this. Ui) = (updateBtn: null, citySelect: null, temperatureSpan: null); this.init ();) // Ob -havo ma'lumotlarini yangilash Widget.prototype._updateData = function (e) (// serverga ajax so'rovini yuborish) / / Initializing ui komponentlari Widget.prototype._initUI = function () (this.ui.updateBtn = document.getElementById ("wbd-widget-update"); this.ui.citySelect = document.getElementById ("wbd-widget-city"); this.ui.temperatureSpan = document.getElementById ("wbd-vidjet-harorat");) // Bog'lanish hodisalari Widget.prototype._bindHandlers = function () (this.ui.updateBtn.addEventListener ("chertish", Vidjet. prototipi). _updateData.bind (bu));) // Vidjetni ishga tushiring Widget.prototype.init = function () (this._initUI (); this._bindHandlers (); this._updateData ();) // Butun vidjet sinfini qaytarish vidjetini aylantirish; )) (); yangi WeatherWidget ();
Bu erda nima bo'lyapti? Biz WeatherWidget yopilishiga asoslangan modul yaratamiz, uning ichida biz Vidjet sinfini yozamiz, uning prototipida biz kerakli usullarni tashlaymiz va yopilishidan qaytaramiz. Oxirgi satrda biz vidjet namunasini yaratamiz - yangi WeatherWidget ();
XHR o'zgaruvchisi ajax so'rovlarini bajarish uchun kerak. Konstruktorda biz ob -havo ma'lumotlarini oladigan url xususiyatini ishga tushiramiz. 3 ta maydonni saqlaydigan ui obyekti ham bor - biz js -koddan kirishimiz kerak bo'lgan DOM elementlari. Ular keyinroq _initUI () usulida ishga tushiriladi. Init () usuli interfeysni ishga tushirishni, hodisalarni bog'lashni va serverdan ma'lumotlarni yangilashni chaqiradi (biz foydalanuvchini vidjetni chizish paytida ob -havoni darhol "Yangilash" ni bosmasdan ko'rishini xohlaymiz). _BindHandlers -da _updateData usuli "Yangilash" tugmasini bosish bilan bog'liq. Bu bizning vidjetimizning yagona "interaktiv" qismi.
Widget.prototype._updateData.bind (bu) qurilishiga e'tibor bering. Bu erda biz kontekstni aniq bog'laymiz - bizga kerak _updateData usulida bu har doim Vidjet sinfining misolini ko'rsatadi. Keling, buning sababini tushunamiz - keling, _updateData usulining kodini ko'rib chiqaylik
Ma'lumotni serverdan olish, _updateData usuli
// Ob -havo ma'lumotlarini yangilang Widget.prototype._updateData = function (e) (e && e.preventDefault (); var xhr = new XHR (), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, ma'lumotlar = "shahar =" + shahar, resp; xhr.open ("POST", this.url, rost); xhr.setRequestHeader ("Kontent turi", "application / x-www-form-urlencoded"); xhr .send (ma'lumotlar); xhr.onreadystatechange = function () (agar (this.readyState! = 4) qaytish; agar (this.status! = 200) JSON.parse (this.responseText); temperatureSpan.innerHTML = resp.temperature;))E'tibor bering, biz e (hodisa) xususiyatini usul parametrlariga o'tkazamiz. Vidjetni qayta yuklamaslik uchun, eng avvalo preventDefault -ni o'rnatish kerak (aks holda yuborish shakli ishlaydi).
Lekin biz bu chiziq bilan qilamiz
e && e.preventDefault ();
E parametrining mavjudligini qo'shimcha tekshirish kerak, chunki biz bu._updateData () ni chaqirganimizda, e parametri aniqlanmaydi va shunga mos ravishda e.preventDefault () istisno qiladi.
Shundan so'ng, biz kerakli o'zgaruvchilarni yaratamiz, ajax so'rovi uchun ob'ekt, tanlangan shahar va DOM elementi, biz serverdan olingan harorat qiymatini chiqaramiz. ma'lumotlar ajax so'rovida yuboriladi, server javobidir. Keyin biz ulanishni ochamiz va serverga ma'lumotlarni yuboramiz. Biz serverdan 200 ta javobni kutmoqdamiz va natijada paydo bo'ladigan haroratni ko'rsatamiz. Keling, json-string serverdan qabul qilinadi ("kod": "muvaffaqiyat", "harorat": "harorat oralig'i"). An'anaga ko'ra, men xatolarni vijdoningizga topshiraman, hamma buni boshqacha qiladi. Va nihoyat, biz serverdan ob -havo ma'lumotlarini qanday olishni bilishimiz kerak.
Ob -havoni qanday bilsam bo'ladi?
Men ushbu xizmatdan ehtiyotkorlik bilan foydalanishni maslahat beraman. Maqola deyarli tayyor bo'lgach, ob -havo talabiga javob shakli kutilmaganda o'zgardi. Dastlab men vidjetda ko'rsatmoqchi bo'lgan kunduzgi prognozning chiqishi to'xtatildi. Men kodni qisman qayta yozishim va vidjetning funksionalligini kamaytirishim kerak edi, bu menga yoqmadi. Men ular bilan qanchalik tez -tez uchrab turishini bilmayman, lekin men xizmatni haqiqiy ilovada ishlatishni tavsiya etmayman.
Ob -havo ma'lumotlarini olish uchun php kodini yozing
Ma'lumotni qanday olish kerakligi allaqachon aniq, algoritm oddiy: biz shahar parametrini - $ _POST dan tanlangan shaharni olib tashlaymiz, http://xml.meteoservice.ru/export/gismeteo/point/$cityId kabi qator hosil qilamiz. .xml. Bu ob -havo fayliga yo'l. Biz unga curl bilan get-so'rov yuboramiz. Qabul qilingan javob tahlil qilinadi va biz undan kerakli parametrlarni chiqaramiz: minimal va maksimal haroratlar. Olingan raqamlarni json ob'ektida brauzerga qaytaramiz.
$ cityId = (int) $ _ POST ["shahar"]; $ url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $ harorati = ""; if ($ curl = curl_init ()) (curl_setopt ($ curl, CURLOPT_URL, $ url); curl_setopt ($ curl, CURLOPT_RETURNTRANSFER, true); $ result = curl_exec ($ curl); curl_close ($ simple_curl); natija); $ object = $ xml-> HISOB-> SHAHR-> TA'MINOT; $ harorat = $ ob'ekt ["min"]. "-". $ object ["max"];) echo json_encode (qator ( "kod" => "muvaffaqiyat", "harorat" => $ harorat));
Simplexml_load_string haqida tushuntirishga ruxsat bering - bu funksiya xml ob'ektini yaratadi, biz uni allaqachon tahlil qila olamiz. Ob'ekt ob -havo xizmatidan olingan xml satridan yaratilgan.
HISOB-> SHAHR-> PROQOZ-> TEMPERATURA-bu xml tugunlari orqali kerakli harorat qiymatlariga o'tish yo'li. Yuqoridagi havolaga rioya qiling (Moskva ob -havosi) va siz bu yo'llarni aniq ko'rasiz.
Agar biror narsa aniq bo'lmasa, izohlarda so'rang.
Jami
Va bu hammasi! Biz ob -havo haqida ma'lumot olish uchun oddiy vidjet yaratdik. Uning asosiy xususiyati shundaki, uni istalgan saytga joylashtirish juda oson, html-kodga bunday satrlarni kiritish kifoya.
Men ishonamanki, bunday vidjetlardan foydalanishning turli variantlari bor, har xil ma'lumotlarni to'plashdan tortib reklama bannerlarigacha. Qo'llash mumkin bo'lgan fikrlaringiz bormi? Sharhlarda baham ko'ring!