За чистый и ясный код!

Статьи на тему программирования под веб, используя PHP, MySQL, Jquery и многое другое

Спуск в Харьковские катакомбы

Август12

В компании в которой я работаю создается проект посвященный разным организациям нашего города и не только. И вот в рамках знакомства с организацией «Дети Подземелья» мы попросили провести небольшую экскурсию по «Харьковским катакомбам». Hазвать Харьковские катакомбы, катакомбами конечно трудно… это просто старые подвалы, какие-то лазы, но было интересно.

И так нас собралось 6 желающих для совершения «погружения» под землю. Мы встретились с Андреем Ковалевым, президентом этой организации на улице Рымарская 23.

Как нам рассказали, это старое здание постройки 19 века, и в то время под землей построили большой подвал для хранения угля и прочего провианта, сейчас часть этого подвала завалена обрушением стен и потолка, другие вполне сохранившиеся.
В 2006 году под землю провалился автобус с музыкантами, подробнее можно почитать тут.

Внутри вообще очень много мусора, за 200 лет истории туда много нанесло земли, простых бытовых отходов (бутылки, фантики и тд), а при строительстве это были неплохие сооружения 1.80м высотой и столько же по ширине, видны были последствия прокладки электричества, наверное во время войны, сейчас остались только изоляторы.

В общем первый спуск мне понравился.

Освещения у меня было только с фонарика мобильного, поэтому фотки получили не очень:

Вид на Харьковску Филармонию

Вид на Харьковскую Филармонию

Вход катакомбы

Вход катакомбы

Вид с улицы в сами катакомбы, дырка использовалась для засыпания угля

Вид с улицы в сами катакомбы, дырка использовалась для засыпания угля

Главный зал. Тут есть колонная поддерживающая свод и соверменные канализации.

Главный зал. Тут есть колонная поддерживающая свод и соверменные канализации.

Это мы на перекрестке коридоов, осещаем рассказчика всеми фанарями.

Это мы на перекрестке коридоров, освещаем рассказчика всеми фанарями.

Высота земли над нами 3 метра, и даже тут есть корни и улитки! А там ведь тьма!

Высота земли над нами 3 метра, и даже тут есть корни и улитки! А там ведь тьма!

Улитка, местный житель

Улитка, местный житель

Вид на дырку для угля с катакомб

Вид на дырку для угля с катакомб

PS Вот еще коллега помогла найти статью Привидений в харьковских подземельях нет
PSS вот еще нашел

Статья просмотренна 466614 раз, зашло посетителей 35092

Мой первый jQuery плагин. Работа с размерами текста.

Август8

Фреймверк jQuery мне понравился с первых строк кода которые я на нём написал. Для одного проекта мне нужно было написать свой jQuery плагин для увеличения/уменьшения шрифта в статье, как и что делать я был не в курсе, помогли статьи на эту тему с разных источников.

Требования к jQuery плагину:
1 От начального значения шрифта текста уметь изменять высоту шрифта в заданом диапазоне и с заданым шагом.
2 запоминать измененное значение шрифта, дабы при следующем заходе на странице шрифт был выбранной ранее высоты.

Первый пункт подразумевает кол-во итераций в увеличение/уменьшение от основного значения, шаг — на какое число будет изменен начальный размер шрифта.
Пример, допустим изначальный размер шрифта равен 16px, если указать кол-во итераций равное 3-м, а шага 1, то это означает, что шрифт при увеличении будет изменяться 3 раза на 1 пиксель (17 18 19), при уменьшении будет иметь значения (15 14 13). Менять указанные переменные можно при настройке шрифта.

Для реализации второго пункта я привлек к работе возможность работы с куками, а именно плагин jquery.cookie.js, если данного плагина не будет, то основной палгин будет работать, но сохранять выбранный размер шрифта не сможет.

Ниже приведен тест самого плагина:

(function($) {
	/*
	 * значени по умолчанию
	 */ 
	var defaults = {
		iteration : 5,
		step : 1
	};
	
	/*
	 * глобальная переменная опций 
	 */
	var options;
	
	/*
	 * настройка кукисов 
	 */
	var cookieSettings = {
		expires: 7,
		path : '/',
		name : 'zoomtext'
	};
	
	/*
	 * Создаем объект с методами
	 */ 
	var methods = {
		
		/*
		 * Инициализация
		 */
		init:function(params) {

			var type, size;
			options = $.extend({}, defaults, params);

			if ($.cookie != undefined && $.cookie(cookieSettings.name) != null )
			{
				if ($.cookie(cookieSettings.name) == $(this).css('font-size'))
				{
					type = options.type =  'px';
					size = options.defaultSize = $.cookie(cookieSettings.name).split(options.type).join('');
				}
				else
				{
					type = 'px';
					size = $.cookie(cookieSettings.name).split(type).join('');
					options.type =  'px';
					options.defaultSize = $(this).css('font-size').split(options.type).join('');
				}
			}
			else
			{
				type = options.type =  'px';
				size = options.defaultSize = $(this).css('font-size').split(options.type).join('');
			}

			$(this).css('font-size', size+type);			

			return $(this).data(cookieSettings.name) ? this : $(this).data(cookieSettings.name, true);
		},
		
		/*
		 * Увеличение шрифта
		 */
		inc:function() {
			
			var maxSize = parseInt(options.defaultSize)+options.iteration;
			var currentSize = parseInt($(this).css('font-size').split(options.type).join(''));

			if (currentSize < maxSize)
			{
				var changedSize = (currentSize+options.step).toString()+options.type;
				$.cookie != undefined ? $.cookie(cookieSettings.name, changedSize, cookieSettings) : '';
				$(this).css('font-size', changedSize);
			}
		},

		/*
		 * Уменьшение шрифта
		 */
		dec:function() {
			
			var minSize = parseInt(options.defaultSize)-options.iteration;
			var currentSize = parseInt($(this).css('font-size').split(options.type).join(''));

			if (currentSize > minSize)
			{
				var changedSize = (currentSize-options.step).toString()+options.type;
				$.cookie != undefined ? $.cookie(cookieSettings.name, changedSize, cookieSettings) : '';
				$(this).css('font-size', changedSize);
			}			
		},
		
		/*
		 * Сброс шрифта
		 */
		reset:function() {
			$.cookie != undefined ? $.cookie(cookieSettings.name, null, cookieSettings) : '';
			$(this).removeAttr('style');
		}
	};

	/*
	 *  магические методы для работы плагина
	 */
	$.fn.zoomtext = function(method){
		if (methods[method]) {
			// переброс на запрашиваемый метод + передача параметров метода
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || ! method) {
			// передача методу инициализации (init) параметров
			return methods.init.apply(this, arguments);
		} else {
			// просто инициализация, если что-то пошло не так
			return methods.init.apply(this);
		}
	};
})(jQuery);

В начале задаются дефольтные значения переменных (объекты) для работы:

	/*
	 * значени по умолчанию
	 */ 
	var defaults = {
		iteration : 5,
		step : 1
	};
	
	/*
	 * глобальная переменная опций 
	 */
	var options;
	
	/*
	 * настройка кукисов 
	 */
	var cookieSettings = {
		expires: 7,
		path : '/',
		name : 'zoomtext'
	};

в переменной defaults есть два ключа:
iteration, задает кол-во итераций в ту или другу сторону (описывал чуть выше в статье),
step, задает шаг шрифта, т.е. приращение к существующему.

Переменная options используется внутри массива, хранит в себе все нужные пары ключ-значения для дальнейшей работы.

Переменная cookieSettings необходима для работы с куками,
ключ expires задает кол-во дней жизни куки от начала её становки,
ключ path указывает на какую область сайта дейстует кука, в данном случае на весь сайт,
ключ name это название куки.

Для более полного описания параметров переменной cookieSettings лучше обратится к официальной документации

Далее я реализовал несколько методов для работы:
init — метод который определяет тукущий размер шрифта, применяет его к тексту с помощью инлайл-стилей (style=’font-size:размер_шрифта’) и сохраняет данные с помощью функции jQuery.data();

inc — метод который позволяет увеличить шрифт, если не превышен порог по увеличению (defaults.iteration), применяет к тексту и записывает данные в куку (если плагин кук подключен и работает);

dec — метод который позволяет уменьшить шрифт, если не превышен порог по уменьшению (defaults.iteration), применяет к тексту и записывает данные в куку (если плагин кук подключен и работает);

reset — позволяет сбросить шрифт к изначальному состоянию и убить куку.

Как видно из выше описанного ничего сложного тут нет, но где-же магия? Магия заключается в этих строках, повторное использование кода, цепочка вызовов:

	/*
	 *  магические методы для работы плагина
	 */
	$.fn.zoomtext = function(method){
		if (methods[method]) {
			// переброс на запрашиваемый метод + передача параметров метода
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || ! method) {
			// передача методу инициализации (init) параметров
			return methods.init.apply(this, arguments);
		} else {
			// просто инициализация, если что-то пошло не так
			return methods.init.apply(this);
		}
	};

Более подробно описано в статье jQuery для начинающих. Часть 7. Пишем плагины, на блоге Антона Шевчука, за что ему большое спасибо!

Как использовать этот плагин:

Подключаем jQuery, plugins

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://blog.nagaychenko.com/jquery/plugins/jquery.cookie.js" type="text/javascript"></script>
<script src="http://blog.nagaychenko.com/jquery/plugins/jquery.zoomtext.js" type="text/javascript"></script>

Необходимо создать управления, т.е. теги которые будут отвечать за увеличение/сброс/уменьшение шрифта, в моём случае я исользовал конструкцию ul-li

<ul id="zoom">
	<li><a href="#zoom" id="increase" title="увеличить шрифт">increase</a></li>
	<li><a href="#zoom" id="reset" title="сбросить шрифт">reset</a></li>
	<li><a href="#zoom" id="decrease" title="evtymibnm шрифт">decrease</a></li>
</ul>

каждому элементу li я задал ИД, для отслеживания событий кликов по ним.
Далее сам текст я указал в параграфе с уникальным ИД

<p id="content">некий текст</p>

Вызываем плагин с нужными параметрами и создаем обработчики кликов на элементы управления

<script type="text/javascript">
$(function(){
	// вызов плагина с передачей необходимых значений
	$('p#content').zoomtext({step:1, iteration:2}); 

	// отслеживаем кликл для увеличения шрифта
	$('a#increase').unbind().bind('click',  function(){ 
		$('p#content').zoomtext('inc');
	});

	// отслеживаем кликл для сброса шрифта
	$('#reset').unbind().bind('click', function(){ 
		$('p#content').zoomtext('reset');
	});

	// отслеживаем кликл для уменьшения шрифта
	$('a#decrease').unbind().bind('click', function(){
		$('p#content').zoomtext('dec');
	});
});
</script>

Теперь все это вместе на одной странице демо тут.

Текст который я использовал в статье был взят с сайта сонников, гороскопов, знаков зодиака. Здесь я всегда смотрю свой бесплатный гороскоп.

Буду рад услышать любые замечания и предложения через комментарии.

Статья просмотренна 466812 раз, зашло посетителей 34492

  

Облако тегов

cli csv dump events form Kohana locale models MySQL mysqldump orm PHP tools trigger validate газ газовый счетчик итоги кеширование переменные

Облако тегов плагина WP Cumulus для WordPress требует для просмотра Flash Player 9 или выше.

Я на твиттере!

  • у твиттера тоже бывают перерывы...

Календарь

Август 2011
Пн Вт Ср Чт Пт Сб Вс
« Июн   Сен »
1234567
891011121314
15161718192021
22232425262728
293031  

Сейчас на сайте