ПафНутиЙ-Блог » Статьи » jQuery » Воскресные сниппеты №1

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

22.07
нет
8614
Воскресные сниппеты №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 системах из-за правильных слешей (в винде то используются обратные слеши в путях к фалам)

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

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



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

  • Воскресные сниппеты №2
  • Воскресные сниппеты №3
  • Меняем BBcode-редактор для комментариев
  • Последние комментарии для DLE 9.6-10.0 (модуль iComm)
Закрыть

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

+

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

Информация

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