我正在为用户创建一个Web应用程序来创建一个简单的组织结构图。我甚至没有连接节点的线路,但我使用的是文本区域。我找到了一个非常有用的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;
}
答案 0 :(得分:4)
在这里你去工作演示:http://jsfiddle.net/YVEhr/30/(更贴切) 或 http://jsfiddle.net/YVEhr/1/
如果那就是你想要的,请告诉我,我很乐意帮忙。花了我一点力气(即调整大小):)
编辑好的我现在得到它(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中看到它。
别忘了接受答案&amp;如果您愿意,可以在不使用任何插件的情况下使用此解决方案:jQuery - Building an AutoResizing TextArea that Doesn'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();
}
});
});