Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
3 г. назад

Как опредилить тип файла с помощью Jquery

Разберем на примере. Есть вот примерно такая HTML конструкция

<p>Пожалуйста, ознакомьтесь с <a href="/files/lenobl_delivery.pdf">тарифами</a>.</p>
Задача: надо определить тип файла с JQuery в ссылке, и подставить иконку, что бы визуально было понятно, что это за ссылка.

Используем для этого стандартный JQuery, предпочитаю версию 1.8.3. Код довольно простой. Логика такова: перебираем все ссылки в  блоке, и вставляем строчный элемент <i class="b_icons"></i> с необоходимым классом перед ссылкой.

jQ('.b_article-full a').each(function() { if(/.*\.pdf/.test(jQ(this).attr('href'))) {
  jQ(this).before('<i class="b_icons pdf"></i> '); } if(/.*\.zip/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons zip"></i> '); } if(/.*\.doc/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons doc"></i> '); } if(/.*\.docx/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons doc"></i> '); }
}); 

Далее немного чудо CSS кода:

.b_icons { display:inline; display: inline-block; width: 16px; height: 16px; position: relative; top:3px
}
.b_icons.pdf { background:url(путь к иконке)
}
.b_icons.doc { background:url(путь к иконке)
}
.b_icons.zip { background:url(путь к иконке)
}

Вот так просто можно определить тип файла с JQuery в документе.

Добавить комментарий

Наверх