Bigtext
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин Bigtext автоматически подгоняет размер отдельных строк текста таким образом, что они начинают занимать одинаковую ширину — ширину родительского блока.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/bigtext/bigtext.js"~gt~~lt~/script~gt~
~lt~link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'~gt~
~lt~style~gt~
body{padding-left:30px; font:bold 9pt 'Boogaloo', serif;}
.box{width:200px}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="box"~gt~
~lt~div~gt~The elusive~lt~/div~gt~
~lt~div~gt~BIGTEXT~lt~/div~gt~
~lt~div~gt~plugin exclusively~lt~/div~gt~
~lt~div~gt~captured on film~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$('.box').bigtext();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Разные шрифты~lt~/tit~gt~
~lt~coment~gt~Bigtext позволяет использовать разные шрифты. Даже в одной строке.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/bigtext/bigtext.js"~gt~~lt~/script~gt~
~lt~link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'~gt~
~lt~style~gt~
body{padding-left:30px; font:bold 9pt 'Boogaloo', serif;}
.box{width:200px}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="box"~gt~
~lt~div ~gt~
~lt~span style="font-family: sans-serif"~gt~BIG~lt~/span~gt~
~lt~span style="font-family: serif"~gt~TEXT~lt~/span~gt~
~lt~/div~gt~
~lt~div~gt~Makes Text Big~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$('.box').bigtext();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Плагин Bigtext автоматически подгоняет размер отдельных строк текста таким образом, что они начинают занимать одну ширину — ширину родительского блока.
Подключение и использование
Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же js-файл плагина: (его можно скачать на github):
~lt~script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="bigtext.js"~gt~~lt~/script~gt~
Применить Bigtext нужно к блочному элементу (обычно div'у), внутри которого располагаются другие div'ы (возможны и другие блочные элементы), внутри каждого из которых должно быть расположено по одной строке декорируемого текста:
~lt~div id="bigtext"~gt~
~lt~div~gt~Первоя строка текста,~lt~/div~gt~
~lt~div~gt~вторая строка,~lt~/div~gt~
~lt~div~gt~третья строка.~lt~/div~gt~
~lt~div~gt~И все занимают одну ширину.~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$('#bigtext').bigtext();
~lt~/script~gt~
Плагин можно применять и к спискам (как нумерованным, так и нет):
~lt~ol id="bigtext"~gt~
~lt~li~gt~Первоя строка текста,~lt~/li~gt~
~lt~li~gt~вторая строка.~lt~/li~gt~
~lt~/ol~gt~
~lt~script~gt~
$('#bigtext').bigtext();
~lt~/script~gt~
Максимальный и минимальный размер текста можно настраивать. По умолчанию, текст имеет максимальный размер 48 и не имеет ограничения снизу (значение null). Подразумеваемая единица измерения — пиксели. Изменить эти значения можно с помощью параметров maxfontsize и minfontsize:
~lt~ol id="bigtext"~gt~
~lt~li~gt~Первоя строка текста,~lt~/li~gt~
~lt~li~gt~вторая строка.~lt~/li~gt~
~lt~/ol~gt~
~lt~script~gt~
$('#bigtext').bigtext({maxfontsize:60, minfontsize:10});
~lt~/script~gt~
Информация
- Размер плагина ~5k (несжатый js-файл)
- Официальная страница
- Кроссбраузерный (работает во всех современных браузерах)