Организуем интерфейс для слабовидящих пользователей - История изменений

Williwaw в 12:01, 22 августа 2013

2013-08-22T12:01:32Z

Mad grant в 11:54, 5 июня 2013

2013-06-05T11:54:34Z

Kalexey в 11:49, 27 апреля 2012

2012-04-27T11:49:16Z

Kalexey в 11:48, 27 апреля 2012

2012-04-27T11:48:04Z

Kalexey: Новая страница: « category:Вопросы и уроки разработки сайтов на UMI.CMS
'''Задача:''' Организовать интерфейс для…»

2012-04-26T07:43:44Z

Новая страница: « category:Вопросы и уроки разработки сайтов на UMI.CMS <p> '''Задача:''' Организовать интерфейс для…»

Новая страница

[[category:Вопросы и уроки разработки сайтов на UMI.CMS]]

<p>
'''Задача:'''
Организовать интерфейс для слабовидящих пользователей с возможностью увеличения, уменьшения и сброса шрифта. При перезагрузке страницы выбранный размер шрифта не должен сбрасываться.
</p>
<p>'''Решение:'''
Одним из наиболее удобных решений для этой задачи является использование JavaScript фреймворка jQuery. Поскольку он используется в UMI.CMS по-умолчанию нам остаётся написать только небольшой скрипт для управления шрифтом и подключить его к основному шаблону.
<br />
Текст скрипта:
</p>
<source lang="javascript">
$(document).ready(function() {

// Оригинальный шрифт
var originalFontSize = $('body').css('font-size');

// Настройки cookie
var cookieSettings = {
expires: 7,
path: '/',
name: 'zoomText'
};

// Если есть cookie - загружаем настройки шрифта
if($.cookie != undefined && $.cookie(cookieSettings.name) != null) {
var size = $.cookie(cookieSettings.name);
$('body').css({fontSize: size + (size.indexOf('px') != -1 ? '' : 'px')}); // IE fix
}

// Сброс шрифта
$('.resetFont').click(function() {
$('body').css('font-size', originalFontSize);
$.cookie != undefined ? $.cookie(cookieSettings.name, originalFontSize, cookieSettings) : '';
return false;
});

// Увеличение шрифта
$('.incFont').click(function() {
var newFontSizeNum = (parseFloat($('body').css('font-size'), 10) * 1.2);
var newFontSizeStr = newFontSizeNum.toString().slice(0, 4);
$('body').css('font-size', newFontSizeStr);
$.cookie != undefined ? $.cookie(cookieSettings.name, newFontSizeStr, cookieSettings) : '';
return false;
});

// Уменьшение шрифта
$('.decFont').click(function() {
var newFontSizeNum = (parseFloat($('body').css('font-size'), 10) * 0.8);
var newFontSizeStr = newFontSizeNum.toString().slice(0, 4);
$('body').css('font-size', newFontSizeStr);
$.cookie != undefined ? $.cookie(cookieSettings.name, newFontSizeStr, cookieSettings) : '';
return false;
});

});
</source>

<p>
Сохраним текст скрипта, например, в файле с названием «zoomtext.js» в папке «/js/». Далее нам нужно подключить скрипт к '''основному''' шаблону (например: «default.tpl»). Сделать это можно следующим образом:
</p>
<source lang="html4strict">
<script src="/js/zoomtext.js" type="text/javascript" charset="utf-8"></script>
</source>
<p>
После чего остаётся только разместить в шаблоне ссылки/кнопки для управления шрифтом:
</p>
<source lang="html4strict">
<div id="zoomText">
<a class="incFont" href="#">Увеличить шрифт</a>
<a class="decFont" href="#">Уменьшить шрифт</a>
<a class="resetFont" href="#">Сбросить шрифт</a>
</div>
</source>

@@ Строка 1: / Строка 1: @@
   [[category:Вопросы и уроки разработки сайтов на UMI.CMS]]
-'''Актуально для версии 2.9'''
+'''Актуально для версии 2.9.1'''
 <p>
 '''Задача:'''

← Предыдущая		Версия 11:49, 27 апреля 2012
Строка 73:		Строка 73:
	</div>		</div>
	</source>		</source>
−	~~--[[Участник:Kalexey\|Kalexey]] 11:48, 27 апреля 2012 (UTC)~~