SORU
25 Kasım 2013, PAZARTESİ


'ler typeahead.js Twitter öneri değil tarz (sınır, şeffaf arka plan, vb.)

typeahead.js 0.9.3 twitter ve önerilerimi hiç tarz değil gibi görünüyor kullanıyorum.

Bu alıyorum:

typeahead bug

Yerine şöyle bir şey:(examples page alınan)

typehead ideal

JavaScript etkinleştirilmesi önerileri:

$('.search-typeahead').typeahead({
    name: 'videos',
    remote: {
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    }
});

Giriş öğesi HTML:

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

Ek Notlar:

Üzerinde çalıştığım site bir WordPress kullanmak 1.10.1 ve twitter bootstrap kullanmaz. Yazmak ve böylece eklenti ekler gibi görünüyor ancak müdahale, korkarım ki aşina değilim kendi stilleri (eşlik eden yok .ben yapmadım CSS bir sürü var css dosyası) yani teorik olarak bir şeyler geçersiz kılmak gerekmez mi? Benim stilleri işe neden karıştı, ama bu eklenti tarafından eklenen, şeffaf arka planlar, kenarlıklar, vb ile bir öneri sonuçta.

CEVAP
25 Kasım 2013, PAZARTESİ


Yani docs ben içine bakıyor şimdi

Varsayılan olarak, açılan menü typeahead.js yarattığı duracak çirkin ve tema içine sığacak sağlamak için stil isteyeceksiniz web sayfası.

Benim çözüm böylece çoğaltmak istedim örnek: stil kopyalamak için

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • EminemVEVO

    EminemVEVO

    12 Mayıs 2009
  • pendrop gaming

    pendrop gami

    4 ŞUBAT 2013
  • Virtual Riot

    Virtual Riot

    19 Mayıs 2011