Просмотр исходного текста страницы Добавляем QR-коды для ссылок на сайте

[[category:Вопросы и уроки разработки сайтов на UMI.CMS]]
'''Актуально для версии 2.9'''

'''Задача''':

<p>
Добавить [http://www.google.com/url?q=http%3A%2F%2Fru.wikipedia.org%2Fwiki%2FQR-%25D0%25BA%25D0%25BE%25D0%25B4&sa=D&sntz=1&usg=AFQjCNG8UtZHsyz9cpr_2EqW9xQxSxmoaA QR-код] ко всем или конкретным ссылкам на сайте. Это особенно актуально для владельцев 
мобильной версии сайта.
</p>

'''Решение''':

<p>
Для библиотеки jQuery существует небольшой плагин под названием “qrTip”. Поскольку jQuery используется в UMI.CMS по-умолчанию - это один из наиболее удобных способов добавления QR-кодов к ссылкам на сайте.
</p>

<p>
Скачать плагин можно по адресу: http://goo.gl/JHWe3. Архив состоит из 4-х файлов: “qrtip-1.0-jquery.js”, “qrtip-1.0-jquery.css”, “960.css” и “example.html”. Для работы плагина необходимы только первые два файла. Посмотреть пример работы с плагином можно в файле “example.html”.
</p>

<p>
Поместим файл “qrtip-1.0-jquery.js” в папку “/js”, а файл “qrtip-1.0-jquery.css” в папку “/css”. Теперь нам нужно подключить плагин к шаблону, для этого нужно прописать следующий код:
</p>

<source lang="html4strict">
<script src="/js/qrtip-1.0-jquery.js" type="text/javascript"></script>
<link href="/css/qrtip-1.0-jquery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function() {
        $('a.qr').qr({
            size: 80
        });
    });
</script>
</source>

<p>
Таким образом мы подключили всплывающие окна с QR-кодом для ссылок с классом “qr”.
</p>

<br />

<table align="center">

<tr>
<td style="border: 1px solid black; text-align: center;">
[[Файл:QR-code.png]]
</td>
</tr>
<tr>
<td style="font-color: darkblue; font-weight: bold; text-align: center;">
<p>
Результат подключения плагина
</p>
</td>
</tr>

</table>

<br />

<p style="font-weight: bold;">
Настройки плагина
</p>

<table cellspacing="1" width="100%">

<tr style="text-align: center;">
<td style="border: 1px dotted black; padding: 5px;">
'''Параметр'''
</td>
<td style="border: 1px dotted black; padding: 5px;">
'''Описание'''
</td>
<td style="border: 1px dotted black; padding: 5px;">
'''Доступные значения'''
</td>
<td style="border: 1px dotted black; padding: 5px;">
'''Значение по умолчанию'''
</td>
</tr>

<tr>
<td style="border: 1px dotted black; padding: 5px;">
size
</td>
<td style="border: 1px dotted black; padding: 5px;">
Размер картинки с QR-кодом в пикселях
</td>
<td style="border: 1px dotted black; padding: 5px;">
Целое число
</td>
<td style="border: 1px dotted black; padding: 5px;">
80
</td>
</tr>

<tr>
<td style="border: 1px dotted black; padding: 5px;">
timeout
</td>
<td style="border: 1px dotted black; padding: 5px;">
Время отображения картинки после потери фокуса ссылкой в милисекундах
</td>
<td style="border: 1px dotted black; padding: 5px;">
Целое число
</td>
<td style="border: 1px dotted black; padding: 5px;">
500
</td>
</tr>

<tr>
<td style="border: 1px dotted black; padding: 5px;">
color
</td>
<td style="border: 1px dotted black; padding: 5px;">
Цвет подложки под картинкой.
</td>
<td style="border: 1px dotted black; padding: 5px;">
black, white, red, yellow, green, blue
</td>
<td style="border: 1px dotted black; padding: 5px;">
black
</td>
</tr>
</table>

<p>
Пример использования:
</p>

<source lang="html4strict">
<script type="text/javascript">
    $(document).ready(function() {
        $('a.qr').qr({
            size: 100,
            timeout: 300,
            color: 'white'
        });
    });
</script>
</source>

<p>
В результате мы получим всплывающее окно с QR-кодом размером  100х100 пикселей, временем показа после потери фокуса в 300 милисекунд и белым цветом подложки.
</p>