» » » Воскресные сниппеты №1

Воскресные сниппеты №1

22.07
нет
13 228
Воскресные сниппеты №1

В процессе работы часто приходится писать небольшие сниппеты (скрипты на jQuery, кусочки HTML и CSS-кода), которые потом в той или иной модификации находят применение и в других проектах.
Сниппетов таких накапливается всё больше и больше, поэтому я попробую начать их еженедельную публикацию. Получится или нет - покажет время, а пока первый нах первая подборка из пары маленьких, но полезных jQuery сниппетов.

Для начала вы можете посмотреть или скачать пример к статье:


Первый сниппет - для отлавливания хеша из адресной строки


Зачастую нужно выполнить какое то событие, если в адресной строке браузера присутствует определённый хеш (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 системах из-за правильных слешей (в винде то используются обратные слеши в путях к фалам)

На сегодня всё, смотрите пример, дорабатывайте под свои нужны, я постарался максимально упростить всё для более лучшего понимания процессов.

Продолжение следует...



Похожие материалы

Комментариев нет


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

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.