10 NİSAN 2014, PERŞEMBE

Dışında Yakın Menü Kutusu Javascript Css Html Eğitmen'i Tıklatın

Bu basit ama kullanışlı JavaScript egzersiz Biz belirli şeyler kapatmak için nasıl ortaya koyacak bir kullanıcı tıkladığında Bunların dışında size kullanıcı yakın istiyorum bir açılır menü olabilir Açılır menüde dışında sayfa tıklama diğer şeyler ile etkileşim ya da belki görünmesini bilgi pencereleri vardı içeriğini değiştirmek ve yakın sonra istediğim kullanıcı tıklamaları halinde Onlara dışında Biz basit bir pop dışarı arayüzü ile başlamak için gidiyoruz Bana biz bir sayfa üzerinde bazı kukla içeriğe sahip kılan sana göstereyim Bunu tıkladığınızda karşısında dışarı pop diyor düğmesi bir arayüz ben etkileşim olduğ

unu açılır Şimdi ne olmasını istiyorum o arabirim yabancıyı tıkladığınızda ise Ben derste odak rahatlatmak için uzağa gitmek istedim nasıl anlamda kullanıcı tıklayarak ise dış hedef elemanı at Ben yolu görebiliyorum Bu ara

yüzü açılması ve bu derse alakalı değil Siz muhtemelen olurdu çünkü Eğer belki bir şey solmaya konum ile açılır menüler animasyon böylece zaten bir sihirli bazı sihirli menüsünü haşhaş yaklaşımı olurdu kutu hangi kulla

“Ders Kodu: http://www.developphp.com/video/JavaScript/Click-Outside-Close-Menu-Box-Tutorial Bu JavaScript uygulamada bir kullanıcı bunların dışında tıkladığında b...”
Adam Khoury

nıcı dışında tıklattığında bunu hissedecek nasıl gösteren olacak hedef elemanı ve daha sonra buna göre yakın yedekleme gibi bir şey yapmak tamam bunu yapmak için bu yerde mobil reklamda bazı javascript koyacağız olay dinleyicisi de pencere fare kadar olay ve ve virgül fare yukarı olayı hedef alacaktır ve biz bu olayın tetiklediği zaman yürütmek istediğiniz sonra işlev Kullanıcı böylece biz sadece işlevi açık yakın parantez yazın edeceğiz küme ayracı açılış

Dışında Yakın Menü Kutusu Javascript Css Html Eğitmen'i Tıklatın Resim 1 Dışında Yakın Menü Kutusu Javascript Css Html Eğitmen'i Tıklatın Resim 2 Dışında Yakın Menü Kutusu Javascript Css Html Eğitmen'i Tıklatın Resim 3 Dışında Yakın Menü Kutusu Javascript Css Html Eğitmen'i Tıklatın Resim 4

ve kapanış küme ayracı şimdi bir çift inebilir çizgiler Eğer küme parantezi arasında daha tanıdık hale getirmek için Seni ilk şey fonksiyonu yapmak fonksiyon yuva hedef Söz konusu kutu uzağa gitmek istiyorum şey Kullanıcı biraz dışına tıkladığında şimdi olabilir Eğer uzağa gitmek isteyen birçok kutular Kullanıcı dışında tıklar ve satmak onları koyabilirsiniz Yukarı fare içinde onlar üzerinde bir dizi ve daha sonra döngü içinde işlev ve ben size göstereceğim bu videonun sonunda sen olabilir çünkü İhtiyacımız olan son şey oldu

ğunu birden sihirli menü sihirli kutusu var eğer olsun veya olmasın anlamda gidiyor koşul Kullanıcı Magic Box ile etkileşimde bulunuyor nerede almak zorunda olduğu sihirli menü yapmak amacıyla bu yüzden Olay referans sonar koşulu eğer derseniz olay nokta hedefi hangi nesneyi yakalamak nasıl Bu kutuyu olay CC nasıl yakın nesne başvurusu Bu da ne olursa olsun öğe için bir nesne referans Bir fare kadar kadar Hedef bir olay olduğunda üzerinde kullanıcıların eşit değildir kutu ve size kod çalıştırabilir kutusunu kapatmak için şimdi iki mantığı gerek Bu da durumda ama bu size gösterecektir Eğer kapatmak için kullanıyor olursa olsun kod kodunuzu koymak baz işlevselliği yani senin menüler Orada koydum ve o bunu ne size göstereceğim Şimdi arayüzünü açıp ben biraz dışına tıklayın uzak gider ama biz bir yerde çünkü daha fazla mantığı koymak zorunda Menüde etkileşim ediyorsam bant i Magic Box buraya tıklayın açık kalır ama bana etkileşim gidelim Menüde şey kapanır ve bu işlevselliği değil size Muhtemelen gerekecek çünkü istiyorum Burada işler kullanıcı ile etkileşimde ile etkileşime istediğiniz şeyler kutu uzağa gider kutunun içinde alt öğeleri ve bu size kullanıcı kalması mümkün olmak istiyorum istediğim bu değil O kutuda etkileşim onlar biraz dışına tıklayın kadar koşul koymak eğer öyleyse hepimiz yapmak ve Bize başka bir şey değerlendirmek sağlayan Biz hedef ve söylemek bu olayı kopyalayabilirsiniz ve olay nokta hedef nokta üst düğüm varsa boks eşit değildir Onlar kutuda çocuk elemanlarının herhangi etkileşim eğer anlamına gelir Eğer görmek scenting ediyoruz, böylece menüyü kapatmak istemiyorum Kullanıcı fare upping ne ise Eski kutusunda bir alt öğe değil Yer lemme bu öylesine şimdi mantıklı Şimdi bakın kutuya şeyle etkileşime Benim sihirli kutusuna bu çocuk elemanı ile etkileşime tıklayabilirsiniz Gün boyu ve kutu açık kalır ve açık kalır kutuya her yerinden tıklayın ve sonra kutu kapanır dışında tıklatın satın ve o biz kapatmak için kutuyu istemiyorum istediğiniz işlevselliği Birinin Etkileşmeyen Biz bu küçük koymak niye çocuk elemanlar o yüzden ve üst düğüm kadar hedef olay kutusu eşit değildir Ya sonra bu koşul eğer söyleyerek böylece kutusunu kapatmak için gidiyoruz Kullanıcıların Maus bitti şey sayfadaki onlar fare kadar kutusu olmadığında ve kullanıcı üzerinde olduğunu varlık yoktu sayfadaki fare kadar eşit olmadığı zaman Kutuya bir alt öğe Şimdi biz ne yapacağız göstermek nasıl döngü olacağı yerde bir örnek alınır üzerinde Eğer daha fazla olabilir yardımcı olabilecek bir bütün dizi sihirli öğeleri bir kutu tamam yüzden benim html eklendi iki kutu yüzden üç sihirli kutu olduğunu var pop out olarak açmak ve CSS şimdi bazlar Biraz şeyleri değiştirmek bu yüzden bir sınıf onları hepsi tür aynı görünüyor bu şekilde verebilir Ben onların kimlik burada hedefleme ediyorum çünkü ancak tüm farklı konumlara sahip ve Nam sayfada farklı yerlerde açmak yapmak her yerde ben Saul bu bir bu bir çok 300 de söyledi istiyorum Şimdi JavaScript 600 sol pozisyon zenci tüm CSS çökmüştü Şimdi JavaScript yapmamız gereken bütün olacak temsil oluşturmak eklemek olduğunu Bu üç kutu ya da kimlik böylece bu üç kutu var bir bar kutu dizidir üç kutu kutu kutu tek eşittir Her kutu bir eleman daha iyi bir oran olduğunu ve döngü için can Bizim pencere içinde bu kutu dizisi kadar bağlar üzerinde Biz zaten yerine koymak tüm kodundan önce doğru çalışmıyor işlev içinde ne yapacağımızı sadece bir for döngüsü koymak Etrafında yapı o zaman bu doğru kod girintileyebilirsiniz diyoruz yoksul görünümlü döngü o içine 0 noktalı eşit çubuk II II kutu diziler uzunluğu nokta daha az bize izin verir ne noktalı virgül lemme ben artı artı Bu çocuğa boksör bir bu bakmak uzunluğu boyunca yineleme döngü yalnızca kaçmayacak bir olarak birçok kez ise kutu dizisi içindeki unsurlar vardır ve biz içinde tüm unsurları erişebilirsiniz boxer a dizinin içindeki dizin konumu hedefleyerek Şimdi yerine belge doc eleman kötü kimliği almak söyleyerek çok basit boksör bir hedeflenen kutu biri Burada biz köşeli parantezler arasına koymak lube olarak ilk kez II gerçekten yaşayanları hedef kutusu 1 çalışır Bu döngü böyle devam ve benzeri hedef kutusundan çalışır ve ikinci kez Ben bu yüzden bu yıldırım hızlı küçük döngü artırılmıyor çünkü Ekranda olacak kaldırılması tüm kutuları Şimdi bu açık bunu çalışır bakalım pop-up kutusu biri i kaybolduktan ondan tıklayın open popup kutusu ve üzerine tıklayın ve gayet onunla etkileşime ama kaybolduktan tık pop-up kutusu üç Ben gün boyu ile etkileşimde bulunabilirsiniz Ben yabancıyı tıkladığınızda kaybolduktan ve nerede kodu ayarlandı Eğer kutuları arasında gerçekten durumlu alıyorum Varsayılan olarak ağırlık kurmak kodu Kullanıcıların ile etkileşim dışındaki tüm kutuları kaldırarak böylece otomatik işlevsellik olduğunu kılan Ben arayüzde açmak için başka bir düğmeye tıkladığınızda sayfadaki mevcut zaten go away herhangi olduğunu ve yeni bir tane aslında o pop dedin geliyor arabirimi hakkında InterBase biri hakkında yaklaşık bir hızda 3 yapabilirsiniz hiçbir şekilde içinde Gerçekten arayüz tane var Co üzerinde neler olup bittiğini görmek için pasta arayüzünde İçinde tıklayın tamam ben dışarıda tıklayın ben ilk küçük statik örnek sarın yardımcı umuyoruz böylece Ateşin kaybolduktan şeyler etrafında başınızı ve şimdi bu ikinci örnek nasıl çalıştırmak için size göstermek bir dizi sihirli kutunun üzerinde bu sayfada olabilir sihirli menüler olduğunu gün o sadece seyretti videoyu zevk eğer ayarlamak abone butonuna içine ve infüzyon tıklayın O normal bir şey bu yeni şeyler kullanabilirsiniz evet bir kaç daha fazla barış şefi Julian için sağ tuşa var diğer Eğer planlama yararlı olduğu tespit gün teşekkür izlemek için Bir dahaki sefere, eğer.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Click-Outside-Close-Menu-Box-Tutorial Bu JavaScript uygulamada bir kullanıcı bunların dışında tıkladığında belirli şeyler kapatmak için nasıl gösterecektir. Bir kullanıcı sayfasında diğer şeyler ile etkileşime geçtiğinde kapatmak istediğiniz bir açılır menü olabilir. Ya da belki içeriği üzerinde görünen bilgi pencereleri ve kullanıcı bunların dışında tıkladığında onları kapatmak istiyor.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



10/10

  • 148
    Olumlu
  • 0
    Olumsuz
  • 27
    Yorum
  • 11922
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Elly

    Elly

    3 EKİM 2005
  • JayzTwoCents

    JayzTwoCents

    26 AĞUSTOS 2012
  • TecnoTutosPC

    TecnoTutosPC

    19 Kasım 2012

ANKET



Bu sayfa işinize yaradı mı?