Версия для слабовидящих — различия между версиями

Материал из Школьный портал: справочника
Перейти к: навигация, поиск
Строка 45: Строка 45:
 
</div>
 
</div>
 
</pre>
 
</pre>
 +
 +
Руководство в картинках:
 +
 +
[[Файл:customblock.png]]

Версия 10:18, 29 апреля 2015

Встроенный функционал, включаемый удобно, находится в разработке. Однако, можно решить задачу, разместив в произвольном блоке следующий HTML-код:

<script src="/sp/jquery/js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script>
var sp_current_zoom = 1.0;

function sp_zoom()
{
    $('body').css({
		zoom: sp_current_zoom,
		transform: 'scale(' + sp_current_zoom + ')',
		'transform-origin': '0 0',

		'-moz-transform':        'scale(' + sp_current_zoom + ')',
		'-moz-transform-origin': '0 0',

		'-webkit-transform':     'scale(' + sp_current_zoom + ')',
		'-webkit-transform-origin': '0 0',

        '-o-transform-origin': '0 0'
    });
	//alert(sp_current_zoom);
	//console.log(sp_current_zoom);
	//startOnload();
}

$(function(){
	$('#sp_zoom_plus').click(function()  { sp_current_zoom += 0.1; sp_zoom(); });
	$('#sp_zoom_minus').click(function() { sp_current_zoom -= 0.1; sp_zoom(); });
	$('#sp_zoom_reset').click(function() { sp_current_zoom =  1;   sp_zoom(); });
});

</script>

<div style="text-align: center; margin: 12px 20px; font-size: 12pt; background-color: #fff; color: #000; padding: 8px; border: 2px solid black;">
<div style="font-weight: bold; margin-bottom: 3px;">Версия для слабовидящих.</div>
Размер шрифта:
<div style="margin-top: 4px" id="sp_zoom">
<button type="button" id="sp_zoom_plus">+</button>
<button type="button" id="sp_zoom_minus">?</button>
<button type="button" id="sp_zoom_reset">Сброс</button>
</div>
</div>

Руководство в картинках:

Customblock.png