Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2013, 15:15
Интересующийся
Отправить личное сообщение для jegit Посмотреть профиль Найти все сообщения от jegit
 
Регистрация: 06.08.2012
Сообщений: 11

Метод для конвертирования едениц px, em, %, pt.
В процессе разработки собственной библиотеки 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 - это прямая ссылка.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Добавить свой метод к элементу alekciy Events/DOM/Window 6 16.02.2009 19:29