Воскресные сниппеты №1
22.07
нет
13 228
В процессе работы часто приходится писать небольшие сниппеты (скрипты на jQuery, кусочки HTML и CSS-кода), которые потом в той или иной модификации находят применение и в других проектах.
Сниппетов таких накапливается всё больше и больше, поэтому я попробую начать их еженедельную публикацию. Получится или нет - покажет время, а пока
Для начала вы можете посмотреть или скачать пример к статье:
Первый сниппет - для отлавливания хеша из адресной строки
Зачастую нужно выполнить какое то событие, если в адресной строке браузера присутствует определённый хеш (site.ru/link.html#hash).
Например показ всплывающего окошка с контентом на сайте blockpro.ru.
Реализация проста как электровеник, однако эффект удобный))
$(window).load(function () {
thisLinkId = window.location.hash; //получаем хэш из адресной строки
$(thisLinkId).trigger("click"); //эмулируем клик по соответствующему ID
});
Можно назначить практически любое событие, запускаемое при наличии определённого хеша в адресной строке.
Второй сниппет - простая стилизация input type="file"
Для начала приведу код HTML:
<div class="custom-form" id="show">
<h3>Демонстрация стилизованного инпута</h3>
<form method="post" action="noaction">
<p>
<textarea>тут текст сообщения</textarea>
</p>
<p>
вот он, стилизованный input type="file"
</p>
<p>
<input type="file" />
</p>
</form>
</div>
и JS:
$(".custom-form input[type='file']").addClass("remove").parent().addClass("custom-file"); //убираем стандартный инпут и добавляем родительскому блоку класс
$(".custom-file").append('<input type="text" id="file-input" /><a href="#" id="file-but">Обзор</a>'); //вставляем html-код для кастомизации инпута
$("#file-but, #file-input").on("click", function(){ //навешиваем клик на форму input для вызова формы загрузки файла
$(".custom-form input[type='file']").trigger("click");
return false;
});
$(".custom-form input[type='file']").change(function () { //получаем значение value из инпута
fileval(this.value);
}).change();
$("body").mousemove( function(){ // Защита от дибилов, чтоб не пытались менять выводимое значение.
$("#file-input").attr("value", filevalF[filevalF.length -1]); //берём последнюю строку из массива, чтобы не было видно fakepath.
});
Суть скрипта в том, что он просто прячет стандартный инпут, вставляет обычный input type="text" и ссылку рядом, а по клику на них эмулирует клик по файловому инпуту, вызывая тем самым диалог открытия файла.
После чего "подцепляет" значение value файлового инпута и суёт в текстовый, предварительно обрезав текст с конца до первого (опять таки с конца) слеша.
Это нужно, чтобы убрать надпись C://fakepath, появляющуюся как следствие невозможности получения реального значения value файлового инпута (безопасность однако). Вероятно обрезка текста не будет работать в unix системах из-за правильных слешей (в винде то используются обратные слеши в путях к фалам)
На сегодня всё, смотрите пример, дорабатывайте под свои нужны, я постарался максимально упростить всё для более лучшего понимания процессов.
Комментариев нет
Добавить комментарий
Комментировать могут только зарегистрированные пользователи