2

我正在为用户制作一个网络应用程序来创建一个简单的组织结构图。我什至还没有连接节点的线，但我正在使用文本区域。我发现了一个非常有用的 autosize() 插件，它非常适合在占用宽度时添加额外的行。有没有办法做到这一点，如果用户只使用一行，自动调整大小会缩小宽度以环绕文本？

我试图弄清楚如何做 jsfiddle 但我不知道如何添加多个 javascript（用于插件）所以我将我的 jquery 代码放在插件的底部并放入插件在jsfiddle的 javascript 区域中

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder 2.0</title>
    <link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script src="PathwayBuilder2.js" type="text/javascript"></script>
    <script src="plug-ins/autosize.js" type="text/javascript"></script>
</head>




<body>
    <div id="Pathway">
        <div class="whole">
            <div class="text_display">
                <textarea class="text_field_not_selected"></textarea><br />
                <input type="button" class="add_child" value="+" />
            </div>
        </div>
    </div>
</body>
</html>

javascript/jquery

$(document).ready(function() {
    $('textarea').autosize();
});

$(document).ready(function() {
    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});

$('textarea').live('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});

css

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#pathway {
    display: block;
}
.whole {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
textarea {
    min-width: 2em;
    text-align: center;
}
textarea:focus {
    resize: none;
}
.text_field_not_selected {
    resize: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 3px 5px #444;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
}
.add_child {
    margin-bottom: 25px;
}
4

1 回答 1

4

在这里你去工作演示： http: //jsfiddle.net/YVEhr/30/（更贴切） 或 http://jsfiddle.net/YVEhr/1/

如果那是您想要的，请告诉我，我很乐意提供帮助。我花了一点时间才知道（即调整大小的想法）:)

编辑Okies 我现在知道了（Phew）请随意使用 css，或者您可以从“row=something”开始，我已经分享了一些链接以获得进一步的帮助。:)

演示 http://jsfiddle.net/YVEhr/30/

调整 textarea 的大小以适应屏幕：好的链接：或者您也可以查看这个人： http: //archive.plugins.jquery.com/project/TextFill

jQuery代码

//inital resize
resizeTextArea($('textarea'));

//resize text area
function resizeTextArea(elem){
   // alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight);
    elem.height(1); 
    elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}

//'live' event
$('textarea').live('keyup', function() {
    var elem = $(this);
   // alert('foo');
    //bind scroll
    if(!elem.data('has-scroll'))
    {
        elem.data('has-scroll', true);
        elem.bind('scroll keyup', function(){
            resizeTextArea($(this));
        });
    }

    resizeTextArea($(this));
});

如果那是你想要的，请告诉我。

解释

只需要绑定新的 etxtareaclass 来.autosize()运行和休息，你可以在 jsfiddle 中看到它。

不要忘记接受答案，如果您愿意，可以在不使用任何插件的情况下使用此解决方案：jQuery - Building an AutoResizing TextArea that Don't Flash on Resize

任何人都可以使用，希望这会有所帮助，并祝你愉快，干杯！

jQuery 代码

$(document).ready(function() {

    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});
于 2012-04-12T04:18:02.197 回答