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

 [[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>