alexa  Menu
jquery write less do more

jQuery ile döküman uzantısına göre class ekleme

  15.10.2014 ,   5 yorum ,   3.847 kez okundu.

Öncelikle sayfamızın üst kısmında head etiketi içerisinde jQuery kütüphanemizi ekleyelim:

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

Ardından body etiketinden sonra örnek linklerimizi ekleyelim. Linkler sırasıyla word, excel ve pdf dökümanlarına olsun:
<a href="http://www.anarsamadov.net/deneme.doc">DOC deneme</a>
<a href="http://www.anarsamadov.net/deneme.xls">XLS deneme</a>
<a href="http://www.anarsamadov.net/deneme.pdf">PDF deneme</a>

Döküman uzantılarına göre sınıflar oluşturarak biçimlendirelim ve arka fon resmi olarak da ilgili ikonlarını sağa doğru hizalayalım:

.doc {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/doc.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

.xls {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/xls.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

.pdf {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/pdf.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

Sayfamızın en alt kısmına body etiketini kapatmadan hemen önce jQuery kodlarımızı girelim:
<script type='text/javascript'>
$(window).load(function(){
$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});}); 
</script>

Böylece sayfamızdaki linkler taranarak uzantısı .doc, .xls, .pdf ile bitenler ilgili sınıflara göre biçimlendirilecektir.

Örnek Uygulama

Kaynak:

Automatically Discover Document Links And Apply Class

5 yorum yapılmış

    Səhifəni üfüqi hərəkət etdirmək - Scroll Page Horizontally

    […] səhifəmizi hazırladıqdan sonra səhifəmizə istifadə edəcəyimiz javascript kitabxanalarını əlavə etməliyik. Bunun üçün biz jquery kitabxanasını və səhifəni […]

    28.06.2015, 4:17:15

    betopan

    çok güzel bi makale olmuş emeklerinize sağlık başarılarınızın devamını dilerim.

    21.10.2014, 18:00:38

    Anar SAMADOV

    Teşekkür ederim. Faydalı olduysa ne mutlu bana.

    25.10.2014, 10:47:38

    Emil Cavadov

    Yarım saattir bu konuyu düzgün anlatan bir site arıyordum, sonunda buldum. Çok teşekkür ederim. Hem de hemşerimin sitesiymiş daha memnun oldum 🙂

    26.10.2014, 23:12:51

Bir Cevap Yazın


%d blogcu bunu beğendi: