Yönetim paneli olan sitelerde elle kontrol yapılamadığı bazı kısıtlamalar olur. Mesela bugün karşı karşıya kaldığım yazının başlığını düzenleme gibi. Aşağıdaki örneği kullanarak bir cümlenin ilk kelimesine class atayabilir ve ona özel özellikler tanımlayabilirsiniz. Kısaca özetlemek gerekirse uyguladığınız elementin içindeki kelimeyi kontrol ediyor, ilk boşluğa kadar olan kısma tanımlı olan classı atıyor.
Daha önceden bunu yazıp stackoverflow.com‘da paylaşan arkadaş için teşekkürler!
jQuery kod parçacığı
|
1 2 3 4 5 6 |
$('div.firstWord').each(function() { var html = $(this).html(); var word = html .substr(0, html.indexOf(" ")); var rest = html .substr(html.indexOf(" ")); $(this).html(rest).prepend($("<span/>").html(word).addClass("firstWordSpan")); }); |
Örnek CSS tanımlaması
|
1 2 3 |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,800); .firstWordSpan { color:#ff9900; font-weight:800; font-family:'Open Sans', sans-serif; } .module-title{font-family:'Open Sans', sans-serif; font-weight:300; color:#2b2b2b; font-size:68px;} |
Element üzerinde kullanımı
|
1 |
<div class="module-title firstWord">Lorem Ipsum Dolor Sit Amet.</div> |
CodePen üzerinden canlı demo: http://codepen.io/YasinGNC/pen/OPrzrg
Teşekkürler. İşime yaradı
Jquery kullanmadan yapılabilir mi?
Teşekkürler, çok işime yaradı.