Muallifdan: Ushbu qo'llanmada biz sizga brauzerning ko'rish oynasining to'liq kengligi bo'ylab cho'ziladigan fon tasvirini yaratishning oddiy texnikasini ko'rib chiqamiz. Buning uchun bizga CSS-ning fon hajmi kerak; JavaScript kerak emas.
To'liq fon rasmlariga misollar
Hozirgi kunda butun veb -sahifani egallaydigan ulkan fotosuratni fon sifatida ishlatish juda mashhur bo'lib ketdi. Bu erda bir nechta saytlarning misollari, ular to'liq fon rasmlariga javob beradi:
Agar siz keyingi veb -loyihangizda ham shunga o'xshash natijaga erishmoqchi bo'lsangiz, unda bu maqola sizga kerak bo'ladi.
Asosiy tamoyillar
Mana bizning harakat rejamiz.
Ko'rish maydonini to'liq to'ldirish uchun background-size xususiyatidan foydalaning
Fon o'lchamidagi CSS xususiyati qamrab olindi. Muqova qiymati brauzerga fon tasvirining kengligi va balandligini avtomatik ravishda va mutanosib ravishda o'lchashini bildiradi, shunda u har doim ko'rish maydonining kengligi / balandligidan teng yoki undan katta bo'ladi.
Kichik fon rasmlarini qayta ishlash uchun media -so'rovdan foydalaning mobil qurilmalar
Kichik ekranlarda sahifalarni yuklash tezligini oshirish uchun biz fon rasmining kichikroq versiyasini qayta ishlash uchun media -so'rovdan foydalanamiz. Bu shart emas. Bu texnika usiz ishlaydi. Lekin nima uchun mobil qurilmalar uchun kichik fon tasviridan foydalanish yaxshidir?
Men demoda ishlatgan rasm 5500x3600 piksel. Bu o'lcham hozirda bozorda bo'lgan ko'p ekranli kompyuter monitorlari uchun etarli. Lekin buning uchun 1,7 MB hajmdagi faylni qayta ishlash kerak.
Orqa fon rasmini joylashtirish uchun qilingan bunday katta yuk baribir yaxshilikka olib kelmaydi. Va, albatta, bu ulanishlar uchun juda yomon bo'ladi Mobil Internet... Kichik ekranli qurilmalar uchun ham bunday qaror kerak emas (bu haqda keyinroq). Keling, butun jarayonni ko'rib chiqaylik.
Html
Belgilash uchun sizga faqat quyidagilar kerak:
Biz tayinlamoqchimiz fon rasmi tana elementi uchun, tasvir har doim brauzerning butun ko'rinishini to'ldiradi.
Biroq, bu usul har qanday blok darajasidagi element uchun ham ishlaydi (div yoki forma kabi). Agar sizning blok elementingizning kengligi va balandligi suyuq bo'lsa, u holda fon tasviri har doim butun konteynerni to'ldirish uchun o'lchanadi.
CSS
Biz korpus elementi uchun quyidagi uslublarni o'rnatdik:
tanasi ( / * Tasvirga yo'l * / fon-tasvir: url (rasmlar / fon-foto.jpg); / * Fon rasmi har doim vertikal va gorizontal markazda joylashgan * / fon-pozitsiyasi: markazning o'rtasi; / * Fon rasmi takrorlanmaydi * / fon-takrorlash: takrorlanmaydi; / * Fon tasviri ko'rish maydoniga o'rnatiladi, shuning uchun kontent balandligi tasvir balandligidan katta bo'lganda u o'zgarmaydi * / background-attachment: fixed; / * Bu ruxsat beradi konteyner o'lchamiga moslashtirish uchun fon rasmi * / background-size: cover; / * Fon rasmi yuklanayotganda ko'rsatiladigan fon rangini belgilaydi * / background-color: # 464646;)
tana ( / * Rasmga yo'l * / fon - rasm: url (rasmlar / fon - photo.jpg); / * Fon rasmi har doim vertikal va gorizontal markazda joylashgan * / / * Fon rasmi takrorlanmaydi * / fon - takrorlash: yo'q - takrorlash; / * Fon rasmi ko'rish maydoniga o'rnatiladi, shuning uchun kontent balandligi tasvir balandligidan katta bo'lganda u o'zgarmaydi * / / * Bu fon tasvirini konteyner o'lchamiga moslashtirishga imkon beradi * / fon - hajmi: qopqog'i; / * Fon rasmi yuklanayotganda ko'rsatiladigan fon rangini o'rnatadi * / fon - rang: # 464646; |
E'tibor qilish kerak bo'lgan eng muhim mulk / qiymat juftligi:
fon o'lchami: qopqoq;
fon - hajmi: qopqog'i; |
Bu erda sehr boshlanadi. Bu xususiyat / qiymat juftligi brauzerga fon tasvirini mutanosib ravishda o'lchashini aytadi, ya'ni. shuning uchun uning kengligi va balandligi elementning kengligi / balandligiga teng yoki undan kattaroqdir (bizda bu tananing elementi).
Biroq, bu xususiyat / qiymat juftligida bitta muammo bor: agar fon tasviri korpus elementining o'lchamidan kichik bo'lsa - ekranlarda nima bo'ladi yuqori aniqlik va / yoki sahifada juda ko'p miqdordagi kontent bo'lsa - brauzer tasvirni kattalashtiradi. Va biz o'lchamini kattalashtirganimizda bilamiz bitmap, tasvir sifati yomonlashadi (boshqacha aytganda, piksellanish sodir bo'ladi).
Rasm hajmini asl hajmidan kattalashtirish tasvir sifatiga ta'sir qiladi. Tegishli tasvirni tanlashda buni yodda tuting. Demo keng ekranli monitorlar uchun 5500x3600 pikselli ulkan fotosuratni ishlatadi katta ekran sifatini buzish uchun. Keling, davom etamiz. Orqa fon tasvirini ko'rish oynasining markazida saqlash uchun quyidagilarni qo'shamiz:
fon-pozitsiya: markaziy markaz;
fon - pozitsiya: markazning o'rtasi; |
Bu yozuv fonni koordinata o'qiga ko'rish maydonining markaziga qo'yadi. Keyinchalik, kontent balandligi ko'rish oynasining ko'rinadigan balandligidan oshib ketganda nima bo'lishini aniqlashimiz kerak. Bu sodir bo'lganda, aylantirish paneli paydo bo'ladi.
V bu ish Foydalanuvchi sahifani pastga aylantirganda ham biz fon tasvirini asl holatida saqlashimiz kerak. Bunday holda, tasvir faqat aylantirish bilan tugaydi yoki u aylanayotganda siljiydi (bu foydalanuvchi uchun chalg'itishi mumkin). Fonni tuzatish uchun biz fon-biriktiruvchi xususiyatini sobit qilib o'rnatdik.
fon biriktirilishi: belgilangan;
fon - biriktirma: belgilangan; |
Namoyish paytida men "kontentni yuklash" funksiyasini qo'shdim, shunda fon-biriktirma xususiyati sobit bo'lganida brauzerda aylantirish paneli paydo bo'lganda nima bo'lishini ko'rishingiz mumkin. Shuningdek, siz demoni yuklab olishingiz va joylashishni aniqlash xususiyatlarini (masalan, fon biriktirilishi va orqa fon pozitsiyasi) o'ynashingiz mumkin, bu sahifani aylantirish va fon tasviriga qanday ta'sir qilishini ko'rishingiz mumkin. Qolgan mulk qiymatlari o'z-o'zidan tushunarli.
Stenografiya CSS
Men tushuntirishni osonlashtirish uchun fon xususiyatlarini batafsil bayon qildim. Qisqartirilgan yozuv ham ekvivalent bo'ladi:
tana (fon: url (background-photo.jpg) markaziy markaziy qopqoq takrorlanmagan;)
tana ( fon: url (fon - photo.jpg) markaziy qopqoq markaziy raqami - takrorlash tuzatilgan; |
Siz qilishingiz kerak bo'lgan narsa bu sizning fon rasmingiz yo'lini ko'rsatish uchun url qiymatini o'zgartirish.
Majburiy emas: kichik ekranlar uchun media -so'rov
Men kichik ekranlar uchun ishlatardim Photoshop dasturi Dastlabki fon tasvirini 768x505 pikselga mutanosib ravishda pastga tushirish uchun, men ham Smush.it -dan foydalanib, uni biroz kattalashtirdim. Bu fayl hajmini 1741KBdan 114KBgacha kamaytirdi. Bular. tasvir hajmi 93%ga qisqardi.
Iltimos, xato qilmang, 114KB - bu faqat estetik dizayn elementi uchun juda ko'p. 114KB qo'shimcha yukni hisobga olgan holda, agar men foydalanuvchi tajribasini (UX) sezilarli darajada yaxshilash imkoniyatini ko'rsam, bunday faylni ishlatardim. Hozirgi vaqtda Internet -trafikning katta qismi mobil qurilmalar fonidan keladi - rasm: url (rasmlar / fon - foto - mobil - qurilmalar. jpg);
Media so'rovining maksimal kengligi: 767 pikselli kenglik chegarasi bor, demak, agar brauzerning ko'rish porti 767 pikseldan katta bo'lsa, katta fon rasmi yuklanadi.
Ushbu media -so'rovni ishlatishning nochorligi shundaki, agar siz brauzer oynasining kengligini o'zgartirsangiz, masalan, 1200 pikseldan 640 pikselgacha (yoki aksincha), siz fon rasmining kichik yoki katta yuklanishini darhol ko'rasiz.
Bunga qo'shimcha ravishda, kichik ekranli ba'zi qurilmalar ko'proq pikselni ko'rsatishi mumkinligi sababli - masalan, iPhone 5c retina displeyi o'lchamlari 1136x640 pikselni ko'rsatishga qodir - kichik fon tasviri pikselli bo'ladi.
sarhisob qilar ekanmiz
Siz ko'proq ko'rishingiz mumkin joriy versiya manba kodi GitHub -dagi ushbu qo'llanmadan. Men sizni faqat bitta narsa haqida ogohlantira olaman: iltimos, bu texnikani ehtiyotkorlik bilan ishlating, chunki katta fayllar UXga jiddiy zarar etkazishi mumkin, ayniqsa oxirgi foydalanuvchi sekin va ishonchsiz Internetga ulangan bo'lsa. Bu fon rasmi yuklanayotganda foydalanuvchi tarkibni o'qishi uchun sizga mos fon rangini tanlashingizning yana bir sababi.
Savdo tahlillari
PBX bilan integratsiya
Sayt bilan integratsiya
Maxsus vidjetlarni ulash sizni tizimga kontaktlar va kontaktlarni qo'lda o'tkazish muammosidan qutqaradi! Saytingizda maxsus shakllar yarating. Ularni mijoz to'ldirgandan so'ng, kontakt yoki bitim avtomatik ravishda amoCRM tizimiga o'tadi.
IPhone yoki Android uchun ilova
IPhone va Android uchun amoCRM ilovalari mijozlar ro'yxatini, etakchilarni, vazifalar ro'yxatini va voqealar tasmasini ko'rish imkoniyatiga ega.
Qulay ish stoli
amoCRM avtomatik ravishda barcha eng muhim jadvallarni ko'rsatadi va agar asosiy paketda ba'zi ma'lumotlar yo'q bo'lsa, siz har doim vidjet panellarining cheksiz sonini qo'shishingiz mumkin.
Kengaytmalar va vidjetlar
AmoCRM bilan ishlashni tanish va qulay qiling! O'zingizning elektron pochta kampaniyalaringizni ikki marta bosish bilan yarating. AmoCRM -ni telefon bilan birlashtirish va mutaxassislar vaqtini tejash. Fayllaringizni qulay tarzda saqlang bulutli saqlash Dropbox.
Mijozlar, kompaniyalar va bitimlar ma'lumotlar bazasi
Unda har bir mijoz, faol muzokaralar, joriy shartnomalar va kelgusidagi sotuvlar haqidagi barcha ma'lumotlar mavjud. Bundan tashqari, dastur "aqlli" qidiruv, teglar va filtrni taqdim etadi. Har bir kelishuvda voqealar tasmasi mavjud bo'lib, unda barcha eslatmalar, taklif fayllari saqlanadi, bu erda siz ham yangi vazifalarni belgilashingiz mumkin. Mijozlar bilan o'zaro munosabatlarning butun tarixi bir joyda.
amoCRM har bir tranzaksiya uchun harakat rejalashtirilganligini ta'minlashga yordam beradi va vazifa kechiktirilganligini yoki hech narsa rejalashtirilmaganligini eslatadi. Shartnomaga o'ting, eslatma qoldiring va vazifani qo'shing. Missiya amalga oshirildi? Buni kesib tashlang. Ular interfeysning maxsus yorlig'ida joylashgan. Sergeyga qo'ng'iroq qilishni unutdingizmi? Qo'ng'iroq qildingizmi? Biz bu erda vazifa bajarilganligini ta'kidlaymiz.
Sizning pochtangiz bilan to'liq integratsiya
Cheklanmagan miqdordagi pochta qutilarini ulang va sizning yozishmalaringiz avtomatik ravishda amoCRM -da ko'rsatiladi. Biz mijozning har bir yangi xatiga avtomatik ravishda yangi bitimlar tuzamiz. Biz hatto kiruvchi so'rovlarning ishlash tezligini ham kuzatib boramiz.
Savdo tahlillari
AmoCRM tranzaktsiyalarni status, menejer yoki siz uchun qulay bo'lgan boshqa ko'rinishda taqsimlash sxemalarini taqdim etadi. Bundan tashqari, tizim ilgari to'plangan statistik ma'lumotlarga va joriy holatga asoslanib sotish prognozlarini ishlab chiqaradi.
PBX bilan integratsiya
AmoCRM qo'ng'iroqlar qilish va yo'naltirishda sizning almashtirib bo'lmaydigan yordamchingizga aylanadi. Uning yordami bilan siz barcha mijozlaringizning ismlarini "eslab" qolasiz. Shuningdek, dastur kiruvchi va chiquvchi qo'ng'iroqlaringizning barcha statistikasini saqlaydi. ATS bilan aloqa o'rnatilgandan so'ng, amoCRM interfeysida telefon ko'rinishidagi maxsus belgi paydo bo'ladi. Bir marta bosish va raqam avtomatik ravishda menejerning telefoniga teriladi. Qo'ng'iroqlarni ro'yxatlardan ham, kontakt yoki bitim kartasidan ham qilishingiz mumkin.
Veb -saytlar fonidagi katta videolar veb -dizayndagi juda mashhur tendentsiya. Aqlli qo'llanilgan videolar veb -saytni yanada dramatik va foydalanuvchilarni jalb qilishi mumkin.
Bunga qo'shimcha ravishda, video fonlarni silliq va "tormozsiz" ijro etish mumkin JavaScript yordamida Foydalanuvchi animatsiya natijasini ko'rmaguncha ma'lum kod va tasvirlarni yuklashni talab qiladi.
Powerhouse yoki Adidas kabi kompaniyalar borki, ular foydalanuvchiga mahsulot yoki xizmat haqida ma'lum bir xabar yoki hikoyani etkazish uchun videoni veb -sayt sifatida ishlatadi.
Garchi video fon yaratishning eng mashhur usuli bu HTML5 -dan foydalanish video ba'zi CSS parametrlari bilan bir qatorda, boshqa video manbalarga ham e'tibor qaratish lozim, masalan, YouTube. Bunday holda, serverning sekin javob berishidan xavotir olmang, chunki so'rov to'g'ridan -to'g'ri YouTube -ga yuboriladi.
Ushbu maqolada men sizga qanday qilib YouTube videolarini fon sifatida ishlatadigan ajoyib veb -sayt yaratishingiz mumkinligini ko'rsataman. Biz jQuery.mb.YTPlayer.js yordamida videomiz ko'rinishini tahrir qilamiz va nazorat qilamiz. Shunday qilib, boshlaylik!
Manbalarni yuklab oling
Demo
Sizga kerak bo'ladi:
// Bu erda katta ma'lumot
Endi siz har bir bo'limni tarkib bilan to'ldirishingiz kerak. Katta fon va kichik fon bo'limida sinfni joylashtiring naqsh, videomizda engil tekstura yaratish uchun. Siz h1, h2, paragraf va tugmani qo'shishingiz kerak.
YOUTUBE
FON VIDEO
Men buni o'rganmoqchimanYouTube -ning istalgan videosini saytning orqa foniga qo'ying
Veb -saytingizning foniga videoni qanday qo'shishni bilasizmi?
Bu nok otish kabi oson! JQuery MB.YTPlayer, jQuery plagini yordamida siz istalgan YouTube videosini saytingiz fonida joylashtirishingiz mumkin.
Siz har qanday videoni osongina HTML fonga aylantira olasiz. Sahifani yuklash va serverni yuklashda kechikishlar yo'q!
Biz ijtimoiy tarmoqlardanmiz
Men bo'limda joylashgan ijtimoiy piktogrammalar uchun Font Awesome shriftidan foydalandim kichik fon bo'limi... Keyin biz plagin yordamida videomiz uchun shablon qo'shamiz jQuery.mb.YTPlayer. Quyidagi kodni darhol qo'ying .
Videoni sozlashda biz quyidagilarni ishlatganmiz.
- sinf o'yinchi- bu sinf plagin tomonidan ishlatiladi mb.YTPlayer
- videoURL- videoga havola
- cheklash – CSS tanlovchisi videoni qayerda ko'rishni xohlaysiz
- avtomatik- videoni avtomatik ijro etish
- ovozini o'chirish- ovozning mavjudligi
- startAt- videoni ko'rishni boshlash vaqti
- shaffoflik- video shaffofligi
CSS
Saytimizga uslublar qo'shamiz. Birinchidan, biz aniqlaymiz tashqi ko'rinish html, tanasi, paragraf teglari va belgilangan ro'yxat teglari.Html (balandligi: 100%) tanasi (shrift: 15px / 23px "Raleway", sans-serif; chekka: 0; to'ldirish: 0; balandlik: 100%; kenglik: 100%; webkit-text-size-adjust: 100%) p (shrift o'lchami: 20px; chiziq balandligi: 140%; matnni tekislash: o'rtada) ul li (displey: inline-blok; ro'yxat uslubi: yo'q; o'ngda to'ldirish) : 10 piksel;)
O'rash (z-indeks: 600; pozitsiya: nisbiy). Naqsh (fon-rasm: url (../ rasmlar / naqsh.png); fon-takrorlash: takrorlash; fon-biriktirma: aylantirish; kenglik: 100%; balandlik: 100%; pozitsiya: mutlaq; tepada: 0; chapda: 0). Bo'luvchi (fon tasviri: url (../ tasvirlar / bo'linuvchi.png); ko'rsatish: blok; kenglik: 300 piksel; balandlik: 35 piksel; marj: 10 pikselli avtomatik ) #colorize (rang: # f1c40f; shrift-oilasi: "Lato", sans-serif; shrift o'lchami: 40px)
Katta fonli bo'limni bezash vaqti keldi. O'rnatish z-indeks yoqilgan 550 va parametr to'lib toshish yashirin. Bu YouTube tarkibini (subtitrlar, izohlar) veb -saytimizda ko'rsatilishiga yo'l qo'ymaslik uchun qilingan. Qolgan uslublar sarlavhalar, tugmalar va standart tasvir uchun kerak bo'ladi (bu haqda keyinroq).
Katta fon (z-indeks: 550; matnni tekislash: markaz; balandlik: 100%; min-balandlik: 100%; pozitsiya: nisbiy; to'lib toshish: yashirin). Katta-fon. Katta-fon-konteyner (kenglik: 830 piksel) ; maksimal kenglik: 100%; displey: inline-blok; pozitsiya: mutlaq; yuqori: 50%; chap: 50%; -webkit-transform: tarjima (-50%,-50%); -moz-transform: tarjima (-50%,-50%); -ms-transform: tarjima (-50%,-50%); -o-aylantirish: tarjima (-50%,-50%); aylantirish: tarjima qilish (-50%, -50%)) .big-background-title (shrift-oilasi: "Raleway", sans-serif; shrift o'lchami: 78px; rang: #fff; shrift-vazni: 300; matnni o'zgartirish: katta harf; matnni tekislash : markaz; chegara-past: 22 piksel; to'ldirish-tepa: 20 piksel; ko'rsatish: inline-blok; fon-biriktirma: aylantirish; fon-takrorlash: takrorlash-x; fon-pozitsiyasi: yuqori markaz) a.big-background-btn ( shrift oilasi: "Lato", sans-serif; shrift o'lchami: 13 piksel; matnni o'zgartirish: katta harf; matnni bezatish: yo'q; rang: #fff; fon: shaffof; chegara: 2 pikselli qattiq #fff; to'ldirish: 10 piksel 14 piksel ; kursor: ko'rsatgich; harflar oralig'i: 2 piksel; matnni tekislash: markaz; displey: ichki blok; -webkit-o'tish: .4s fonni osonlashtirish; -moz-o'tish: .4s fonni osonlashtirish; -o-o'tish: .4s fonni osonlashtirish; o'tish: .4s fon qulayligi; ) .big-background-btn: hover (rang: #fff; background: rgba (255,255,255,0,20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-takrorlash : takrorlanmaydi; fon-pozitsiya: markaziy markaz; fon o'lchami: qopqoq; kenglik: 100%; balandlik: 100%; z-indeks: 0; orqa yuzasi ko'rinishi: yashirin)
Endi bo'limga o'tamiz haqida bo'lim... Keling, parametrni sozlaylik fon rangi oq rangga va to'ldirish Yuqori va pastda 60 piksel va chap va o'ngda 20 piksel.
Bo'lim haqida (shrift oilasi: "Lato", sans-serif; rang: # 7f8c8d; fon: #fff; to'ldirish: 60px 20px) .bo'lim-bo'lim-konteyner haqida .about-bo'lim-sarlavha (shrift-oilasi: "Raleway", sans-serif; shrift o'lchami: 40px; fon: #fff; rang: # 3d566e; to'ldirish: 0 35 piksel; chekka-pastki: 22 piksel; fon ilova: aylantirish; fon-takrorlash: takrorlash-x; fon-pozitsiyasi: markaziy markaz; matnni o'zgartirish: katta harf) a.about-section-btn (shrift oilasi: "Lato", sans-serif; shrift o'lchami: 13 piksel; matn) -o'zgartirish: katta harf; matnni bezash: yo'q; rang: # 34495e; fon: shaffof; chegara: 2 piksel qattiq # 34495e; to'ldirish: 10 piksel 14 piksel; kursor: ko'rsatgich; harflar oralig'i: 2 piksel; matnni tekislash: markaz; displey: Inline-block; (rang: #fff; fon: # 34495e;)
Kichik fon bo'limi uchun ham altbilgi vazifasini bajaradi, biz 100% kenglik va parametrni belgilaymiz. to'lib toshish yashirin. Biz ham biroz qo'shamiz to'ldirish yuqoridan va pastdan, shuning uchun bizning videomiz ko'rinadi. Nihoyat, ijtimoiy tarmoq tugmachalari uchun uslublar qo'shamiz.
Kichik-fon bo'limi (shrift-oilasi: "Raleway", sans-serif; to'ldirish: 100 piksel 0; pozitsiya: nisbiy; kenglik: 100%; to'lib ketish: yashirin). Kichik-fon-konteyner (pozitsiya: nisbiy; matnni tekislash Kichik-fon-sarlavha (shrift o'lchami: 40px; rang: # f1c40f; shrift-og'irlik: 300; z-indeks: 10; displey: inline-blok; matnni o'zgartirish: katta harf; chegara-pastki: 20 piksel) ; margin-top: 20px; pozitsiya: nisbiy; fon-biriktirma: aylantirish; fon-takrorlash: takrorlash-x; fon-pozitsiya: yuqori markaz) .sotsiallar a (rang: #fff) .jamiyatlar a: hover (rang: #) bdc3c7)
Media so'rovlari
Saytimizga javob berish uchun keling, ba'zi ommaviy axborot vositalariga so'rovlar qo'shaylik.@media ekrani va (maksimal kengligi: 768 piksel) (.bo'lim bo'limi sarlavhasi (chiziq balandligi: 1)) @media ekrani va (maksimal kengligi: 480 piksel) (. katta fon fon sarlavhasi (shrift o'lchami: 58 piksel) ) .small-background-title (line-height: 1) / *. player (display: none;)-> Agar siz videoni ma'lum bir ko'rish oynasida plaginsiz olib tashlashni xohlasangiz * /) @media ekranida va ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media ekrani va (max-width: 320px) (.mall-background-title (shrift-size: 30px))
jQuery
Endi YouTube videoimizni yoqamiz. Keling, sinfga qo'ng'iroq qilaylik o'yinchi jQuery kodi ichida. Quyidagi kodni yopilish tanasining tagidan oldin va teglar ichiga joylashtiring .$ (funktsiya () ($ (". o'yinchi"). mb_YTPlayer ();));
Qaytarilish varianti
YouTube -dagi fon videolari mobil qurilmalarda yoki planshetlarda ijro etilmaydi, chunki YouTube qoidalari bunga ruxsat bermaydi.Ammo, agar biz brauzer foydalanuvchining saytga mobil qurilmadan kirganini aniqlasa, biz jQuery -dan foydalanib, standart fon rasmini qo'shishimiz mumkin.
Qo'lda yechim
Foydalanuvchining mobil qurilmadan yoki planshetdan kirganligini aniqlash uchun biz elementni ekranning ma'lum hajmida yashirishimiz mumkin. Masalan, biz 480 pikselli keng ekranli video fonini olib tashlamoqchimiz. Siz faqat pleer elementiga display: none ni qo'shishingiz kerak:
@media ekrani va (maksimal kengligi: 480 piksel) (.pleyer (ko'rsatish: yo'q;))
JQuery -ga kelsak, bu erda biz o'zgaruvchini o'rnatamiz is_mobile false parametri bilan. Keyin, sinf ekanligiga ishonch hosil qiling o'yinchi displeyga ega: parametrlar yo'q. Agar shunday bo'lsa, unda sinfni qo'shing katta-fon-standart-tasvir bo'limlarga katta fon va kichik fon bo'limi standart fon rasmini ishlatish uchun. Aks holda, hech narsa o'zgarmaydi.
(funktsiya ($) ($ (hujjat) .ready (funktsiya () (var is_mobile = noto'g'ri; agar ($ (". o'yinchi"). css ("ko'rsatish") == "hech biri") (is_mobile = rost;) if (is_mobile == true) (// Bu erda shartli skript $ (". katta-fon,. kichik-fon-bo'lim"). addClass ("katta-fon-standart-tasvir");) boshqa ($ (". o'yinchi "). mb_YTPlayer ();)));)) (jQuery);
JQuery plaginlari bilan yechim
Standart tasvirni o'rnatishning yana bir usuli - bu jQuery plagini qurilma.js(http://matthewhudson.me/projects/device.js/). Bu mobil qurilmalarning turli ekran o'lchamlari uchun shartlarni tasvirlash jarayonini soddalashtiradi. Ushbu plagin yordamida biz quyidagi kodni yozishimiz mumkin:(function ($) ($ (document) .ready (function () (//Device.js) u Tablet yoki Mobile ekanligini tekshiradi - http://matthewhudson.me/projects/device.js/ if (! qurilma). tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery standart fonni $ (". big-background, .small-) sinfiga qo'shib qo'yadi. fon-bo'lim "). addClass (" katta-fon-standart-tasvir ");)));)) (jQuery);
Bu erda men usullarni qo'lladim device.mobile () va qurilma.tablet () foydalanuvchi tizimga kirgan qurilmani tekshirish uchun. Agar shart bajarilsa, sinf qo'shiladi katta-fon-standart-tasvir bo'limga katta fon va kichik fon bo'limi... Aks holda sinf o'yinchi o'zgarishsiz qoladi va video ijro etiladi.
Biz tartibga solamiz
Video - bu o'z xabarlaringizni tomoshabinlarga etkazishning ajoyib usuli. Aylanishi mumkin kuchli vosita saytingizdan to'g'ri foydalanish uchun.Ishonchim komilki, veb -dizayn rivojlanishi va takomillashishi bilan veb -saytlar dizaynida videodan foydalanish bo'yicha ijodiy g'oyalar tobora ko'payib boraveradi. Umid qilamanki, siz bu darslikda bir -ikki narsani o'rgandingiz. Fikr va mulohazalaringizni izohlarda yozing.
Tarjimondan. Tarjimaga oid barcha istak va mulohazalaringiz bo'lsa, iltimos, men bilan shaxsiy aloqada bo'ling. Rahmat!
Mashhur Zadarma xizmatini 1C ga ulash endi bir necha daqiqaga to'g'ri keladi. 1C va Zadarma integratsiyasi uchun tayyor kengaytmani ulash kifoya. Har qanday xodim o'rnatishni osonlikcha bajarishi mumkin, hatto tozalovchi xonim, tozalash bo'yicha mutaxassis Masha xola.
Avvalo, biz Zadarma ATS va 1C konfiguratsiyasidan faol foydalanadigan kichik korxonalarga e'tibor qaratdik: Kichik firmani boshqarish 1.6.
Oldin bo'lgani kabi
Zadarma bilan integratsiyalashish uchun siz 1C -ga o'rnatilgan maxsus teruvchi - SIP fon deb nomlangan qurilmadan foydalanishingiz kerak edi. Bu variant bir nechta "if" uchun mos edi:
- agar 1C o'rnatilgan bo'lsa mahalliy kompyuter terminal serverida emas
- agar foydalanuvchi stol telefoni o'rniga 1C raqam teruvchidan foydalanishga rozi bo'lsa
Umuman olganda, agar barcha "agar" rozi bo'lsa, unda integratsiya mumkin edi.
Hozir qanday bo'ldi
Endi, 1C va Zadarma integratsiyasi uchun, qo'ng'iroqlar uchun qaysi qurilmadan foydalanish muhim emas. Bu har qanday bo'lishi mumkin:
- stol telefoni
- operatsion tizimga o'rnatilgan yumshoq telefon
- brauzerda ishlaydigan veb -fon
Zadarma uchun 1C kengaytmasi teruvchi bilan emas, balki API bilan ishlaydi. Shuning uchun, foydalanuvchi aynan nimani chaqirishi muhim emas.
O'rnatish oson
O'rnatish 1 bosqichdan iborat. Keling, sizga 2 ta skrinshotni ko'rsataylik.
Bosh sahifada joylashtirish
Telefonda Zadarma paneli avtomatik ravishda paydo bo'ladi bosh sahifa... Agar to'satdan foydalanuvchiga bu kerak bo'lmasa, u shunchaki "Ko'rish" - "Bosh sahifa sozlamalari" menyusini olib tashlashi mumkin.
O'rnatish oson
Biz API kalitlarini olamiz shaxsiy hisob Zadarma
va ularni 1C ga joylashtiring
Va, albatta, biz login / parolni simplit.io saytiga kiritamiz.
Hammasi shu, endi sizning 1C Zadarma -ga ulangan.
Qo'ng'iroqlar 1C da bosiladi
Qaerda "telefon" belgisini ko'rsak, biz uni bosishimiz mumkin va Zadarma raqamni terishni boshlaydi.
"Aloqa ma'lumotlari" rekvizitlari ko'plab hujjatlar ro'yxatida va ma'lumotnomalarda mavjud - endi qo'ng'iroq qilish uchun mijozning kartasiga yugurishning hojati yo'q. Masalan, siz buyurtmalar, hisob -fakturalar, sarf materiallari ro'yxatidan to'g'ridan -to'g'ri qo'ng'iroq qilishingiz mumkin
Kirish qo'ng'irog'i uchun mijoz kartasi
1C va PBXni birlashtirishda aslida standart va majburiy bo'lib qolgan funksiya. Shuni ta'kidlash kerakki, u har doim ham talabga ega emas, shuning uchun uni Telefoniya paneli sozlamalarida o'chirib qo'yish mumkin.
Voqea hujjati bilan qo'ng'iroqlarni ro'yxatdan o'tkazish
Xuddi shunday, siz "Voqea-telefon qo'ng'irog'i" hujjatini avtomatik ravishda yaratish zarurligini boshqarishingiz mumkin. Ushbu hujjatdan foydalanib, qo'ng'iroqqa izoh qoldirish qulay.
Va eng muhimi, ushbu hujjat asosida siz Buyurtma, Hisob -fakturani kiritishingiz mumkin va shu tariqa qo'ng'iroq va sotish o'rtasidagi munosabatlar aniq ko'rinadi.
Siz telefon qo'ng'irog'i hujjatiga eslatmani qo'shishingiz mumkin, agar xodim keyinchalik mijozga qo'ng'iroq qilishga va'da bergan bo'lsa, bu juda qulay.
PBX qo'ng'iroqlar tarixi
Qo'ng'iroqlar tarixi, albatta, juda muhim narsa. 1C va Zadarma integratsiyasi kengaytmasi tarix bilan ishlashning bir nechta variantlarini taqdim etadi.
Masalan, foydalanuvchi hikoyani o'zi ko'rishni xohlaydi. Mobil telefonimizdagi so'nggi qo'ng'iroqlar ro'yxatiga o'xshash. Bu tarixni bosh sahifadagi "Tarix" yorlig'ini ochish orqali ko'rish mumkin.
Ko'pincha men ma'lum bir mijozning tarixini ko'rishni xohlayman, aloqa qiluvchi shaxs yoki jismoniy shaxs... Agar mijoz bo'lsa, biz ham kontragentning raqamlariga, ham uning barcha aloqador shaxslarining raqamlariga qo'ng'iroqlarni ko'rishimiz kerak.
Mijoz tanlagan holda qo'ng'iroqlar tarixini to'g'ridan -to'g'ri uning kartasida ko'rish mumkin. Tarix mijozning qo'ng'iroqlarini va uning barcha kontaktlarini o'z ichiga oladi. Raqam kontragentning o'ziga tegishli bo'lsa, "Kontakt" maydoni to'ldirilmaydi.