Popüler Zadarma hizmetini 1C'ye bağlamak artık birkaç dakika meselesi. 1C ve Zadarma entegrasyonu için hazır bir uzantı bağlamak yeterlidir. Herhangi bir çalışan, hatta temizlik uzmanı olan temizlikçi Masha Teyze bile kurulumu kolayca yapabilir.
Her şeyden önce, Zadarma PBX ve 1C konfigürasyonunu aktif olarak kullanan küçük işletmelere odaklandık: Küçük bir firmanın yönetimi 1.6.
Daha önce olduğu gibi
Zadarma ile entegre olmak için, SIP arka planı olarak adlandırılan 1C'de yerleşik özel bir çevirici kullanmanız gerekiyordu. Bu seçenek birkaç "eğer" için uygundu:
- 1C yerel bir bilgisayara kuruluysa ve bir terminal sunucusunda bir yere kurulmadıysa
- kullanıcı masa telefonu yerine 1C çevirici kullanmayı kabul ederse
Genel olarak, eğer tüm "eğer"ler kabul edildiyse, entegrasyon mümkündü.
Şimdi nasıl oldu
Şimdi, 1C ve Zadarma'nın entegrasyonu için, aramalar için hangi uç cihazın kullanıldığı hiç önemli değil. Herhangi bir şey olabilir:
- masa telefonu
- işletim sisteminde yüklü yazılım telefonu
- tarayıcıda çalışan web arka planı
Zadarma için 1C uzantısı, çeviriciyle değil, API ile etkileşime girer. Bu nedenle, kullanıcının tam olarak ne arayacağının bir önemi yoktur.
Kurulumu kolay
Kurulum 1 adımdan oluşmaktadır. Size sadece 2 ekran görüntüsü gösterelim.
Ana sayfada yerleşim
Zadarma telefon paneli otomatik olarak ana sayfada belirir. Birdenbire kullanıcının buna ihtiyacı olmazsa, "Görünüm" - "Başlangıç sayfası ayarları" menüsünün işaretini kaldırabilir.
Kurulumu kolay
API anahtarlarını Zadarma kişisel hesabından alıyoruz
ve onları 1C'ye yerleştirin
Ve tabi ki simplit.io'da hesabın login/şifresini giriyoruz.
İşte bu, şimdi 1C'niz Zadarma'ya bağlı.
1C'de tıklandığında çağrılar
“Telefon” simgesini gördüğümüz her yerde, üzerine tıklayabiliriz ve Zadarma numarayı çevirmeye başlayacaktır.
Gereklilikler "İletişim bilgileri" birçok belge listesinde, referans kitaplarında bulunur - artık arama yapmak için müşterinin kartına gitmeniz gerekmez. Örneğin, doğrudan siparişler, faturalar, sarf malzemeleri listesinden arayabilirsiniz.
Gelen bir arama için müşteri kartı
1C ve PBX'i entegre ederken gerçekten standart ve zorunlu hale gelen bir işlev. Her zaman talep edilmediğine dikkat edilmelidir, bu nedenle Telefon paneli ayarlarından kapatılabilir.
Etkinlik belgesi ile çağrı kaydı
Aynı şekilde, "Etkinlik-Telefon Görüşmesi" belgesinin otomatik olarak oluşturulması ihtiyacını da kontrol edebilirsiniz. Bu belge ile görüşmeye yorum bırakmak uygundur.
Ve en önemlisi, bu belgeye dayanarak Sipariş, Fatura girebilirsiniz ve böylece arama ile satış arasındaki ilişki net bir şekilde görünür olacaktır.
Çalışanın müşteriyi daha sonra tekrar arayacağına söz vermesi durumunda çok uygun olan Telefon görüşmesi belgesine bir hatırlatıcı ekleyebilirsiniz.
PBX arama geçmişi
Çağrı geçmişi elbette çok önemli bir şeydir. 1C ve Zadarma entegrasyonunun uzantısı, tarihle çalışmak için çeşitli seçenekler sunar.
Örneğin, bir kullanıcı bir hikayeyi kendi başına görüntülemek istiyor. Cep telefonumuzdaki son aramaların listesine benzer. Bu geçmiş, ana sayfadaki Geçmiş sekmesi açılarak görüntülenebilir.
Çok sık olarak belirli bir müşterinin geçmişini görmek istiyorum, ilgili kişi veya kişi. Bir müşteri söz konusu olduğunda, hem karşı tarafın numaralarına hem de tüm irtibat kişilerinin numaralarına yapılan aramaları görmemiz gerekir.
Müşteri tarafından seçilen arama geçmişi, doğrudan kartında görüntülenebilir. Geçmiş, müşteriden gelen aramaları ve tüm bağlantılarını içerir. Numara karşı tarafa ait olduğunda "İletişim" alanı doldurulmaz.
Yazardan: Bu öğreticide, tarayıcının görüntü alanının tam genişliği boyunca tamamen uzayacak bir arka plan görüntüsü oluşturmak için basit bir teknikte size yol göstereceğiz. Bunun için arka plan boyutundaki CSS özelliğine ihtiyacımız var; JavaScript gerekli değildir.
Duyarlı tam arka plan resimleri örnekleri
Günümüzde, bir web sayfasının tamamını kaplayan büyük bir fotoğrafı arka plan olarak kullanmak oldukça popüler hale geldi. Duyarlı tam arka plan resimlerinin ayarlandığı birkaç siteye örnekler:
Bir sonraki web projenizde benzer bir sonuç elde etmek istiyorsanız, bu makale ihtiyacınız olan şeydir.
Temel prensipler
İşte eylem planımız.
Görünüm alanını tamamen doldurmak için arka plan boyutu özelliğini kullanın
background-size CSS özelliği, kapsayacak şekilde ayarlanmıştır. Kapak değeri, tarayıcıya arka plan görüntüsünün genişliğini ve yüksekliğini otomatik olarak ve orantılı olarak ölçeklendirmesini söyler, böylece görüntü alanının genişliğine / yüksekliğine her zaman eşit veya ondan daha büyük olur.
Mobil cihazlar için küçük arka plan resimlerini işlemek için bir medya sorgusu kullanın
Küçük ekranlarda sayfa yükleme hızını iyileştirmek için arka plan resmimizin daha küçük bir sürümünü işlemek için bir medya sorgusu kullanacağız. Zorunlu değil. Bu teknik onsuz çalışacaktır. Ancak mobil cihazlar için küçük bir arka plan resmi kullanmak neden iyi bir fikirdir?
Demoda kullandığım resim 5500x3600px. Bu çözünürlük, şu anda piyasada bulunan çoğu geniş ekran bilgisayar monitörü için yeterlidir. Ancak bunun için 1.7MB'lık bir dosyayı işlemeniz gerekiyor.
Sırf arka plan fotoğrafı koymak uğruna böylesine büyük bir ek yük zaten hiçbir işe yaramaz. Ve elbette bu, mobil İnternet kullanan bağlantılar için son derece kötü olacaktır. Ayrıca, küçük ekranlı cihazlar için böyle bir çözünürlük gerekli değildir (bundan sonra daha fazlası). Tüm sürece bir göz atalım.
HTML
İşaretleme için sadece buna ihtiyacınız var:
Gövde öğesine bir arka plan resmi atayacağız, böylece resim her zaman tüm tarayıcı görünüm alanını dolduracaktır.
Bununla birlikte, bu teknik aynı zamanda herhangi bir blok seviyesindeki eleman için (bir div veya bir form gibi) çalışacaktır. Blok öğenizin genişliği ve yüksekliği değişkense, arka plan görüntüsü her zaman tüm kabı dolduracak şekilde ölçeklenir.
CSS
Gövde öğesi için aşağıdaki stilleri belirledik:
body (/ * Resmin yolu * / background-image: url (images / background-photo.jpg); / * Arka plan resmi her zaman dikey ve yatay olarak ortalanır * / background-position: center center; / * Arka plan resmi tekrar etmez * / background-repeat: no-repeat; / * Arka plan görüntüsü görünüm alanında sabitlenmiştir, bu nedenle içerik yüksekliği görüntü yüksekliğinden büyük olduğunda kaymaz * / background-attachment: sabit; / * Bu, kabın boyutuna göre ayarlanacak arka plan görüntüsü * / background-size: cover; / * Arka plan görüntüsü yüklenirken görüntülenecek arka plan rengini ayarlar * / background-color: # 464646;)
vücut ( / * Resmin yolu * / arka plan - resim: url (resimler / arka plan - photo.jpg); / * Arka plan resmi her zaman dikey ve yatay olarak ortalanır * / / * Arka plan resmi tekrar etmiyor * / arka plan - tekrar: hayır - tekrar; / * Arka plan görüntüsü görünüm alanında sabitlenmiştir, bu nedenle içerik yüksekliği görüntü yüksekliğinden büyük olduğunda kayma yapmaz * / / * Arka plan görüntüsünün kabın boyutuna göre ayarlanmasını sağlayan şey budur * / arka plan - boyut: kapak; / * Arka plan görüntüsü yüklenirken görüntülenecek arka plan rengini ayarlar * / arka plan - renk: # 464646; |
Dikkat edilmesi gereken en önemli özellik/değer çifti:
arka plan boyutu: kapak;
arka plan - boyut: kapak; |
İşte sihir burada başlıyor. Bu özellik / değer çifti, tarayıcıya arka plan görüntüsünü orantılı olarak ölçeklendirmesini söyler, yani. böylece genişliği ve yüksekliği, elemanın genişliğine / yüksekliğine eşit veya ondan daha büyüktür (bizim durumumuzda bu, gövde elemanıdır).
Bununla birlikte, bu özellik/değer çiftinin bir sorunu vardır: arka plan görüntüsü gövde öğesinden daha küçükse - bu yüksek çözünürlüklü ekranlarda gerçekleşir ve/veya sayfada çok miktarda içerik olduğunda - tarayıcı kaçınılmaz olarak yakınlaştırır görüntü üzerinde. Ve bildiğimiz gibi, bitmap boyutunu büyüttüğümüzde görüntü kalitesi düşüyor (yani pikselleşme oluyor).
Görüntü boyutunu orijinal boyutundan büyütmek görüntü kalitesini etkiler. Uygun bir resim seçerken bunu aklınızda bulundurun. Demo, geniş ekran monitörler için büyük bir 5500x3600px fotoğraf kullanır, bu nedenle kalite bozulmasının oluşması için çok büyük bir ekran gerekir. Hadi devam edelim. Arka plan görüntüsünü görünüm alanının ortasında tutmak için şunu ekleriz:
arka plan konumu: merkez merkez;
arka plan - konum: merkez merkez; |
Bu giriş, arka planı görünüm alanının ortasındaki koordinat eksenine yerleştirir. Ardından, içerik yüksekliği görünümün görünür yüksekliğini aştığında ne olacağını tanımlamamız gerekiyor. Bu olduğunda, bir kaydırma çubuğu görünür.
Bu durumda, kullanıcı sayfayı aşağı kaydırdığında bile arka plan görüntüsünün orijinal konumunda kaldığından emin olmamız gerekir. Bu durumda, görüntü ya kaydırıldığında sona erecek ya da kayarken hareket edecektir (bu, kullanıcı için çok dikkat dağıtıcı olabilir). Arka planı düzeltmek için background-attachment özelliğini sabit olarak ayarladık.
arka plan eki: sabit;
arka plan - ek: sabit; |
Demoda, arka plan eki özelliği sabit olarak ayarlandığında tarayıcıda kaydırma çubuğu göründüğünde ne olduğunu görebilmeniz için "içerik yükle" özelliğini ekledim. Ayrıca demoyu indirebilir ve bunun sayfa kaydırmayı ve arka plan görüntüsünü nasıl etkilediğini görmek için konumlandırma özelliği değerleriyle (örneğin, arka plan eki ve arka plan konumu) oynayabilirsiniz. Mülk değerlerinin geri kalanı oldukça açıklayıcıdır.
Steno CSS
Açıklamayı kolaylaştırmak için arka plan özelliklerini detaylandırdım. Kısaltılmış gösterim de eşdeğer olacaktır:
gövde (arka plan: url (background-photo.jpg) merkez orta kapak tekrarsız sabit;)
vücut ( arka plan: url (arka plan - fotoğraf.jpg) orta merkez kapak numarası - tekrarlama düzeltildi; |
Tek yapmanız gereken, url değerini arka plan resminizin yolunu gösterecek şekilde değiştirmek.
İsteğe bağlı: küçük ekranlar için medya sorgusu
Küçük ekranlar için, orijinal arka plan görüntüsünü 768x505 piksele orantılı olarak küçültmek için Photoshop kullandım ve boyutu biraz daha küçültmek için Smush.it'i de kullandım. Bu, dosya boyutunu 1741KB'den 114KB'ye düşürdü. Onlar. resim boyutu %93 oranında küçültüldü.
Lütfen beni yanlış anlamayın, 114KB tamamen estetik bir tasarım öğesi için hala oldukça fazla. Ek 114 KB ek yük göz önüne alındığında, böyle bir dosyayı yalnızca kullanıcı deneyimini (UX) önemli ölçüde iyileştirme fırsatı görürsem kullanırdım. Şu anda İnternet trafiğinin önemli bir kısmı mobil cihazlardan geliyor arka plan - resim: url (resimler / arka plan - fotoğraf - mobil - cihazlar. jpg);
Medya sorgusunun maksimum genişlik: 767 piksel genişlik sınırı vardır; bu, tarayıcı görünüm alanı 767 pikselden büyükse büyük bir arka plan görüntüsünün yükleneceği anlamına gelir.
Bu medya sorgusunu kullanmanın dezavantajı, tarayıcı pencerenizin genişliğini örneğin 1200 pikselden 640 piksele (veya tam tersi) değiştirirseniz, küçük veya büyük bir arka plan görüntüsünün yüklendiği anı hemen görmenizdir.
Ayrıca, küçük ekranlı bazı cihazların daha fazla piksel gösterebilmesi nedeniyle - örneğin, retina ekranlı iPhone 5, 1136x640 piksel çözünürlük gösterebiliyor - küçük arka plan görüntüsü pikselleşecektir.
Özetleme
GitHub'daki bu öğreticiden kaynak kodun daha güncel bir sürümünü görüntüleyebilirsiniz. Sizi yalnızca bir şey hakkında uyarabilirim: lütfen bu tekniği dikkatli kullanın, çünkü büyük dosyalar, özellikle son kullanıcı yavaş ve güvenilmez bir İnternet bağlantısı kullanıyorsa, UX'e ciddi şekilde zarar verebilir. Bu, arka plan resmi yüklenirken kullanıcının içeriği okuyabilmesi için uygun bir arka plan rengi seçmenizin başka bir nedenidir.
Web sitelerinin arka planındaki büyük videolar, web tasarımında oldukça popüler bir trend. Akıllıca uygulanan videolar, bir web sitesini daha dramatik ve kullanıcılar için ilgi çekici hale getirebilir.
Ayrıca, JavaScript ile oluşturulan ve kullanıcı animasyonun sonucunu görmeden önce belirli kod ve görüntülerin yüklenmesini gerektiren arka planların aksine, video arka planları sorunsuz ve "fren" olmadan oynatılabilir.
Kullanıcıya bir ürün veya hizmet hakkında belirli bir mesaj veya hikaye iletmek için videoyu bir web sitesinin arka planı olarak kullanan Powerhouse veya Adidas gibi şirketler var.
Video arka planı oluşturmanın en popüler yolu HTML5 kullanmak olsa da video etiketini bazı CSS parametreleriyle birlikte kullanabiliyorsanız, örneğin YouTube gibi alternatif video kaynaklarına da dikkat etmelisiniz. Bu durumda, istek doğrudan YouTube'a gönderileceğinden, sunucunun yavaş yanıt vermesi konusunda endişelenmenize gerek yoktur.
Bu yazıda, YouTube videolarını arka plan olarak kullanan harika bir web sitesini nasıl oluşturabileceğinizi göstereceğim. Videomuzun görünümünü düzenlemek ve kontrol etmek için jQuery.mb.YTPlayer.js kullanacağız. O halde başlayalım!
Kaynakları indir
Demo
İhtiyacın olacak:
// Burada Büyük Arka Plan İçeriği
Şimdi her bölümü içerikle doldurmanız gerekiyor. Büyük arka plan ve küçük arka plan bölümünde, sınıfı yerleştirin Desen, videomuzda hafif bir doku oluşturmak için. Ayrıca h1, h2, paragraf ve düğme eklemeniz gerekir.
YOUTUBE
ARKA PLAN VİDEOSU
bunu öğrenmek istiyorumHerhangi bir YouTube videosunu sitenin arka planına koyun
Web sitenizin arka planına nasıl video ekleyeceğinizi mi merak ediyorsunuz?
Armut bombardımanı kadar kolay! Bir jQuery eklentisi olan jQuery MB.YTPlayer ile herhangi bir YouTube videosunu sitenizin arka planına gömebilirsiniz.
Herhangi bir videoyu kolayca bir HTML arka planına dönüştürebilirsiniz. Sayfa yüklemesinde ve sunucu yüklemesinde gecikme yok!
Biz sosyal ağlardan geliyoruz
bölümünde bulunan sosyal simgeler için Font Awesome yazı tipini kullandım. küçük arka plan bölümü... Ardından eklentiyi kullanarak videomuz için bir şablon ekleyeceğiz. jQuery.mb.YTPlayer. hemen sonra aşağıdaki kodu yerleştirin .
Videoyu özelleştirmek için kullandığımız şey:
- sınıf oyuncu- bu sınıf eklenti tarafından kullanılıyor mb.YTPlayer
- Video linki- videoya bağlantı
- muhafaza- Videonun oynatılacağı CSS seçici
- otomatik oynatma- otomatik oynatma videosu
- sessiz- sesin varlığı
- başlamak- videoyu oynatmaya başlama zamanı
- opaklık- video şeffaflığı
CSS
Sitemize stiller ekleyelim. Öncelikle html, body, paragraf etiketlerinin ve madde işaretli listenin görünümünü tanımlayalım.Html (yükseklik: %100) gövde (yazı tipi: 15px / 23px "Raleway", sans-serif; kenar boşluğu: 0; dolgu: 0; yükseklik: %100; genişlik: %100; -webkit-font-smoothing: kenar yumuşatma; - webkit-text-size-adjust: %100) p (font-size: 20px; line-height: 140%; text-align: center) ul li (ekran: satır içi blok; liste stili: yok; sağ dolgu : 10 piksel;)
Sarıcı (z-endeksi: 600; konum: göreli) .pattern (arka plan resmi: url (../ resimler / desen.png); arka plan tekrarı: tekrar; arka plan eki: kaydırma; genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0) .divider (arka plan resmi: url (../ görüntüler / bölücü.png); ekran: blok; genişlik: 300 piksel; yükseklik: 35 piksel; kenar boşluğu: 10 piksel otomatik ) #colorize (renk: # f1c40f; yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 40 piksel)
Büyük arka plan bölümünü şekillendirmenin zamanı geldi. Düzenlemek z-endeksiüzerinde 550 ve parametre taşma gizli. Bu, YouTube içeriğinin (alt yazılar, ek açıklamalar) web sitemizde görüntülenmesini engellemek içindir. Geri kalan stiller başlıklar, düğmeler ve varsayılan görüntü için gereklidir (daha sonra anlatacağız).
Büyük arka plan (z-endeksi: 550; metin hizalama: merkez; yükseklik: %100; minimum yükseklik: %100; konum: göreli; taşma: gizli) .big-background .big-background-container (genişlik: 830 piksel) ; maksimum genişlik: %100; görüntüleme: satır içi blok; konum: mutlak; üst: %50; sol: %50; -webkit-dönüşüm: tercüme (-50%, - %50); -moz-transform: tercüme (-50%, - %50); -ms-dönüşüm: çevir (-50%, - %50); -o-dönüştür: çevir (-50%, - %50); dönüştür: çevir (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: büyük harf; metin hizalama : merkez; kenar boşluğu: 22 piksel; üst dolgu: 20 piksel; görüntü: satır içi blok; arka plan eki: kaydırma; arka plan tekrarı: tekrar-x; arka plan konumu: üst orta) a.big-background-btn ( yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 13 piksel; metin dönüştürme: büyük harf; metin dekorasyonu: yok; renk: #fff; arka plan: şeffaf; kenarlık: 2 piksel katı #fff; dolgu: 10 piksel 14 piksel ; imleç: işaretçi; harf aralığı: 2 piksel; metin hizalama: merkez; ekran: satır içi blok; -webkit-geçiş: .4s arka plan kolaylığı; -moz-geçiş: .4s arka plan kolaylığı; -o-geçiş: .4s arka plan kolaylığı; geçiş: .4s arka plan kolaylığı; ) .big-background-btn: üzerine gelin (renk: #fff; arka plan: rgba (255,255,255,0.20)) .big-background-default-image (arka plan: url (../ images / günbatımı.jpg); arka plan tekrarı : tekrar yok; arka plan konumu: merkez merkez; arka plan boyutu: kapak; genişlik: %100; yükseklik: %100; z-endeksi: 0; arka yüz görünürlüğü: gizli)
Şimdi bölüme geçelim hakkında-bölüm... Parametreyi yapılandıralım arka plan rengi beyaza ve dolgu malzemesi 60px üst ve alt ve 20px sol ve sağ.
Hakkında bölümü (yazı tipi ailesi: "Lato", sans-serif; renk: # 7f8c8d; arka plan: #fff; dolgu: 60px 20px) .about-section-container (metin hizalama: merkez; dolgu-alt: 50 piksel) .about-section-title (font-family: "Raleway", sans-serif; yazı tipi boyutu: 40 piksel; arka plan: #fff; renk: # 3d566e; dolgu: 0 35 piksel; kenar boşluğu: 22 piksel; arka plan eki: kaydırma; arka plan-tekrar: tekrar-x; arka plan-konumu: merkez merkez; metin-dönüşümü: büyük harf) a.about-section-btn (yazı tipi ailesi: "Lato", sans-serif; yazı tipi boyutu: 13 piksel; metin -transform: büyük harf; metin dekorasyonu: yok; renk: # 34495e; arka plan: şeffaf; kenarlık: 2 piksel katı # 34495e; dolgu: 10 piksel 14 piksel; imleç: işaretçi; harf aralığı: 2 piksel; metin hizalama: merkez; ekran: satır içi blok; -webkit-geçişi: .4s arka plan kolaylığı; -moz-geçişi: .4s arka plan kolaylığı; -o-geçişi: .4s arka plan kolaylığı; geçiş: .4s arka plan kolaylığı;) .about-section-btn: üzerine gelin (renk: #fff; arka plan: # 34495e;)
Altbilgi işlevi de gören küçük arka plan bölümü için %100 genişlik atayacağız ve parametre taşma gizli. Biz de biraz ekleyeceğiz dolgu malzemesi videomuzun görülebilmesi için üst ve alt. Son olarak sosyal medya butonları için stiller ekleyelim.
Küçük arka plan bölümü (yazı tipi ailesi: "Raleway", sans-serif; dolgu: 100 piksel 0; konum: göreli; genişlik: %100; taşma: gizli) .small-background-container (konum: göreli; metin hizalama : merkez) .small-background-title (yazı tipi boyutu: 40 piksel; renk: # f1c40f; yazı tipi ağırlığı: 300; z-endeksi: 10; görüntü: satır içi blok; metin dönüşümü: büyük harf; kenar boşluğu: 20 piksel ; üst kenar boşluğu: 20 piksel; konum: göreceli; arka plan eki: kaydırma; arka plan tekrarı: tekrar-x; arka plan konumu: üst orta) .socials a (renk: #fff) .socials a: vurgulu (renk: # bdc3c7)
Medya sorguları
Sitemizi duyarlı hale getirmek için bazı medya sorguları ekleyelim.@media ekranı ve (maks-genişlik: 768 piksel) (.hakkında-bölüm-başlığı (satır-yüksekliği: 1)) @medya ekranı ve (maks-genişlik: 480 piksel) (.big-arka plan-başlığı (yazı tipi-boyutu: 58 piksel) ) .small-background-title (line-height: 1) / *.player (display: none;) -> Videoyu belirli bir viewport üzerinde eklentisiz olarak kaldırmak istiyorsanız * /) @media ekranı ve ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen ve (max-width: 320px) (.small-background-title (font-size: 30px))
jQuery
Şimdi YouTube videomuzu açalım. sınıfı arayalım oyuncu jQuery kodunun içinde. Kapanış gövde etiketinin önüne ve etiketlerin içine aşağıdaki kodu yerleştirin .$ (fonksiyon () ($ (". oyuncu").mb_YTPlayer ();));
geri dönüş seçeneği
YouTube politikaları buna izin vermediğinden, YouTube'dan gelen arka plan videoları mobil cihazlarda veya tabletlerde oynatılmaz.Ancak, tarayıcının kullanıcının siteye bir mobil cihazdan girdiğini algılaması durumunda varsayılan bir arka plan resmi eklemek için jQuery kullanabiliriz.
Manuel çözüm
Kullanıcının bir mobil cihazdan veya tabletten giriş yaptığını belirlemek için öğeyi belirli bir ekran boyutunda gizleyebiliriz. Örneğin, 480px geniş ekranlarda video arka planını kaldırmak istiyoruz. Player öğesine display: none eklemeniz yeterlidir:
@media ekranı ve (maksimum genişlik: 480 piksel) (.player (ekran: yok;))
jQuery söz konusu olduğunda, burada bir değişken belirleyeceğiz. is_mobile false parametresi ile. Ardından, sınıfın olduğundan emin olun. oyuncu ekrana sahip: yok parametre. Eğer öyleyse, o zaman sınıfı ekleyin büyük-arka plan-varsayılan-görüntü bölümlere büyük arka plan ve küçük arka plan bölümü varsayılan arka plan resmini kullanmak için Aksi takdirde hiçbir şey değişmeyecektir.
(fonksiyon ($) ($ (belge) .ready (işlev () (var is_mobile = false; if ($ (". player")). css ("ekran") == "none") (is_mobile = true;) if (is_mobile == true) (// Buradaki koşullu komut dosyası $ (". büyük arka plan, .küçük arka plan bölümü"). addClass ("büyük arka plan-varsayılan-görüntü");) else ($ (". oyuncu "). mb_YTPlayer ();)));)) (jQuery);
jQuery eklentisi ile çözüm
Varsayılan görüntüyü ayarlamanın başka bir yolu da jQuery eklentisidir. cihaz.js(http://matthewhudson.me/projects/device.js/). Bu, mobil cihazların farklı ekran boyutları için koşulları tanımlama sürecini basitleştirecektir. Bu eklentiyi kullanarak basitçe aşağıdaki kodu yazabiliriz:(function ($) ($ (belge) .ready (function ()) (//Device.js, Tablet mi yoksa Mobil mi olduğunu kontrol edecek - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery varsayılan arka planı tercih edilen sınıfa $ (". big-background, .small-) ekler. arka plan bölümü "). addClass (" büyük arka plan-varsayılan-görüntü ");)));)) (jQuery);
Burada yöntemleri kullandım cihaz.mobil () ve cihaz.tablet () kullanıcının oturum açtığı cihazı kontrol etmek için. Sınıfın eklenmesi koşulu karşılanırsa büyük-arka plan-varsayılan-görüntü bölüme büyük arka plan ve küçük arka plan bölümü... Aksi takdirde sınıf oyuncu değişmeden kalacak ve video oynatılacaktır.
sıraya koyduk
Videolar, mesajınızı kitlenize iletmenin harika bir yoludur. Doğru kullanıldığında siteniz için güçlü bir araç olabilir.Web tasarımı geliştikçe ve geliştikçe, web sitesi tasarımında video kullanımı için daha yaratıcı fikirler olacağına eminim. Umarım bu eğitimde bir iki şey öğrenmişsinizdir. Düşüncelerinizi ve yorumlarınızı yorumlara yazın.
Bir çevirmenden.Çeviri ile ilgili tüm dilek ve yorumlarınız için lütfen bana özelden ulaşın. Teşekkürler!
