p标签中的html文本是否可以使用jquery-ui调整大小,或者div标签中没有p标签可调整大小？我已经使用jquery ui从以下示例调整了图像的大小,但是文本没有调整大小
http://jqueryui.com/demos/resizable/.
解决方法
您可以使用resize事件处理程序.诀窍是如何计算新的字体大小.检查此解决方案作为变体：
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中查看此解决方案
