alexa  Menu
jquery write less do more

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

  15.10.2014 ,   5 yorum ,   6.606 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

Anar SAMADOV için bir yanıt yazın Yanıtı iptal et

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.


%d blogcu bunu beğendi: