Можно ли изменить размер текста с помощью jquery-ui? - PullRequest
Новая
       13

Можно ли изменить размер текста с помощью jquery-ui?

5 голосов
/ 28 сентября 2011

Может ли размер html-текста в теге p изменить размер с помощью jquery-ui или без тега p в теге div можно изменить размер? Я сделал изменение размера изображения с помощью jquery ui из следующего примера, но размер текста не изменяется http://jqueryui.com/demos/resizable/.

Ответы [ 2 ]

8 голосов
/ 28 сентября 2011

Вы можете использовать обработчик события изменения размера.Хитрость в том, как рассчитать новый размер шрифта.Проверьте это решение как вариант:

Html: 

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
    <div id="content">Quis non magna sagittis, et cras tortor nunc? Enim, lectus et quis penatibus enim augue eros, dis sit sit urna cras placerat sociis porta</div>
</div>

Javascript: 

var initDiagonal;
var initFontSize;

$(function() {
    $("#resizable").resizable({
        alsoResize: '#content',
        create: function(event, ui) {
            initDiagonal = getContentDiagonal();
            initFontSize = parseInt($("#content").css("font-size"));
        },
        resize: function(e, ui) {
            var newDiagonal = getContentDiagonal();
            var ratio = newDiagonal / initDiagonal;

            $("#content").css("font-size", initFontSize + ratio * 3);
        }
    });
});

function getContentDiagonal() {
    var contentWidth = $("#content").width();
    var contentHeight = $("#content").height();
    return contentWidth * contentWidth + contentHeight * contentHeight;
}

Вы можете посмотреть это решение на jsFiddle: jsFiddle link

2 голосов
/ 28 сентября 2011

Размер текста не имеет ничего общего с jQuery. Однако вы можете привязать свойство CSS к ползунку. 

$('#slideBar').slider({
    startValue: 12,
    minValue: 0,
    maxValue: 100,
    stop: function(e, ui) { 
        $("#text").css({fontSize: ui.value + 8});

    }
});
...