В процессе разработки собственной
библиотеки javascript кода, было замечено одно недоразумение: некоторые браузеры, возвращали значения некоторых CSS правил HTML элементов в разных еденицах. Чтобы избавится от такой неприятности, был создан метод, который конвертирует значения: px, em, %, pt, туда и обратно, в зависимости от передаваемых функции параметров.
Пример: конверсия PX в %, EM, PT
<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/1.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jegit/jegit.js"></script>
<script type="text/javascript">
// после загрузки документа
$( document ).ready( function() {
// после изменения списка любого SELECT
$( 'select' ).change( function() {
// получаем значение первого select
var val = $( 'select:eq(0)' ).val();
// получаем значение второго select
var parse = $( 'select:eq(1)' ).val();
// значение должно быть true или false
parse = parse === 'true' ? true : 0;
// конвертируем px в em еденицы
$( '.em' ).text( $.unit( val, 'em', parse ) );
// конвертируем px в % еденицы
$( '.pr' ).text( $.unit( val, '%', parse ) );
// конвертируем px в pt еденицы
$( '.pt' ).text( $.unit( val, 'pt', parse ) );
// вызываем все события для первого SELECT
}).eq( 0 ).trigger()
})
</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>
Пример: конверсия EM в %, PX, PT
<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/2.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jegit/jegit.js"></script>
<script type="text/javascript">
// после загрузки документа
$( document ).ready( function() {
// после изменения списка любого SELECT
$( 'select' ).change( function() {
// получаем значение первого select
var val = $( 'select:eq(0)' ).val();
// получаем значение второго select
var parse = $( 'select:eq(1)' ).val();
// значение должно быть true или false
parse = parse === 'true' ? true : 0;
// конвертируем em в px еденицы
$( '.px' ).text( $.unit( val, 'px', parse ) );
// конвертируем em в % еденицы
$( '.pr' ).text( $.unit( val, '%', parse ) );
// конвертируем em в pt еденицы
$( '.pt' ).text( $.unit( val, 'pt', parse ) );
// вызываем все события для первого SELECT
}).eq( 0 ).trigger()
})
</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>
Пример: конверсия % в EM, PX, PT
<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/3.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jegit/jegit.js"></script>
<script type="text/javascript">
// после загрузки документа
$( document ).ready( function() {
// после изменения списка любого SELECT
$( 'select' ).change( function() {
// получаем значение первого select
var val = $( 'select:eq(0)' ).val();
// получаем значение второго select
var parse = $( 'select:eq(1)' ).val();
// значение должно быть true или false
parse = parse === 'true' ? true : 0;
// конвертируем % в px еденицы
$( '.px' ).text( $.unit( val, 'px', parse ) );
// конвертируем % в em еденицы
$( '.em' ).text( $.unit( val, 'em', parse ) );
// конвертируем % в pt еденицы
$( '.pt' ).text( $.unit( val, 'pt', parse ) );
// вызываем все события для первого SELECT
}).eq( 0 ).trigger()
})
</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>
Пример: конверсия PT в EM, PX, %
<iframe scrolling="no" frameborder="0" src="http://www.jegit.ru/iframe/utilities/unit/4.html" name="iframe_11850167" style="height: 570px;width:100%"></iframe>
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jegit/jegit.js"></script>
<script type="text/javascript">
// после загрузки документа
$( document ).ready( function() {
// после изменения списка любого SELECT
$( 'select' ).change( function() {
// получаем значение первого select
var val = $( 'select:eq(0)' ).val();
// получаем значение второго select
var parse = $( 'select:eq(1)' ).val();
// значение должно быть true или false
parse = parse === 'true' ? true : 0;
// конвертируем pt в px еденицы
$( '.px' ).text( $.unit( val, 'px', parse ) );
// конвертируем pt в em еденицы
$( '.em' ).text( $.unit( val, 'em', parse ) );
// конвертируем pt в % еденицы
$( '.pr' ).text( $.unit( val, '%', parse ) );
// вызываем все события для первого SELECT
}).eq( 0 ).trigger()
})
</script>
</head>
<body>
<!-- HTML CODE слишком большой чтобы показать -->
</body>
</html>
Несмотря на некоторые несоответствия судя по таблице, fireFox - fireBug показывает идентичный результат в пикселях конечно.
Ещё одним достоинством метода jegit.unit является его малый размер - меньше 1kb при сжатии и его автономность - выполнен как независимый объект.
Если будет получен отклик - вынесу его из библиотеки в отдельный файл.
Ну а пока он встроен в библиотеку
Jegit javascript framework - это прямая ссылка.
