Nasıl DIV'leri jquery ile bunu yapabilir?

2 Cevap php

Jquery ve php / mysql ile facebook yazılarda kilidi işlevini yeniden çalışıyorum.

Aşağıda tıklandığında öyle farklı eylemleri gösteren bir görüntüdür.

Ben, hover gibi somehing yapın bir araç ipucu ile gizli bir div göstermek, vurgulu kapalı kaldırmak olacağını düşünüyorum. Click olayı başka gizli div göstermek ama bir şekilde de düğmenin renkleri değiştirmek için vardır. Menü div açık tıklandığında bir menü var ve bunlardan herhangi tıklandığında eğer ajax ile arka uç script sonucu göndermek gerekiyor. Bir seçeneği tıklayarak veya tüm divs gizlemek divlere dışında tıkladıktan sonra, belki de sadece bir tıklama yerde belki bir geçiş kullanılan olabilir kapatır mı?

Herkes doğru yönde gidiyorum açıklayabiliriz. Ben kullanılan jQuery çok veya javascript sığınak. Böyle bir şey veya herhangi bir yardım örnekleri büyük takdir.

fb

2 Cevap

Sen hover için JavaScript gerekmez. Lütfen ipucu olarak hizmet veren bir eleman yapmak ve açılan düğmesinin üzerinde konumlandırmak. Sonra ikisi için bir üst <div> olun. HTML bu gibi görünmelidir:

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
</div>

Bunu yaptıktan sonra, araç ipucu konumlandırmak ve gerektiğinde bunu göstermek için CSS kullanabilirsiniz.

#container {
    /* All child elements should be positioned relative to this one. */
    position: relative;
}

#container #tooltip {
    /* Hide by default. */
    display: none;
    /* Place the tooltip 2px above the button. */
    position: absolute;
    bottom: 2px;
    right: 0px;
}

#container #button:hover + #tooltip {
    /* Show it when someone's hovering over the button. */
    display: block;
}

Açılan kutusunu göstermek için, muhtemelen JavaScript gerekir. Konteynere başka bir öğe ekle:

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
    <ul id="selection">
        <li>Something</li>
        <li>Something Else</li>
        <li>A Third Thing</li>
    </ul>
</div>

Pozisyon bunu size position: absolute kullanarak gibi ve kullanarak gizlemek gibi display: none. Biz butonuna tıkladıklarında sonra göstermek:

$('#button').click(function() {
    $('#selection').show();
});

Daha sonra sürece onlar da #selection gizlemek gibi, alt kalemler onlar gibi her şeyi yapabilirsiniz.

$('#selection li').click(function() {
    // do something
    $('#selection').hide();
});

Son olarak, vurgulu üzerine arka plan ve metin renklerini değiştirmek istiyorum. Yeter kolay:

#selection li {
    background-color: #ccc;
    color: black;
}

#selection li:hover {
    background-color: black;
    color: white;
}

Bu IE 6 ya da (sanırım) 7 mükemmel çalışmaz - Bunun için alternatif çözümler araştırmak gerekir. JavaScript kullanmak veya IE7.js and IE8.js check out ya.

İşte alacağını yaklaşımdır:

  1. Gezinip için jQuery 'hover event değiştirmek için farklı görüntü durumlarını kontrol
  2. Tooltip için böyle bir şey elde edebilirsiniz gibi qTip gibi çeşitli jQuery eklentileri vardır
  3. Tıklayarak için, jQuery click event hile yapacak
  4. Açılan biraz yanıltıcıdır olacak. Sen ajax methods ve selector methods sayfayı değiştirmek için bir arada kullanmak gerekir (yani mermi)
  5. Sonunda seçimini görüntülemek sonra, sayfa başlangıçta ayar seçili olduğunu öğrenmek için yükler, bazı tür bir istek yapmak zorunda kalacaktır. Bu da sayfa yükler, ya da yukarıda belirtildiği gibi bir ajax isteği olarak php ile yapılabilir.

etiketler