2

ユーザーが単純な組織図を作成するための Web アプリを作成しています。ノードを接続する線はまだありませんが、テキスト領域を使用しています。幅がいっぱいになったときに余分な行を追加するのに最適な、非常に便利な autosize() プラグインを見つけました。ユーザーが1行しか使用しない場合、自動サイズ変更により幅が縮小されてテキストが折り返されるようにする方法はありますか?

私はjsfiddleを実行する方法を理解しようとしていましたが、（プラグイン用に）複数のjavascriptを追加する方法がわからないので、jqueryコードをプラグインの一番下に置き、プラグインを置きますjsfiddleの JavaScript 領域のat

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 わかりました (ふぅ) css を自由にいじってみてください。または、「row=something」から始めることもできます。さらに役立つリンクをいくつか共有しました。:)

デモ http://jsfiddle.net/YVEhr/30/

画面に合わせてテキストエリアのサイズを変更する: 良いリンク:または、この人を調べることもできます: http://archive.plugins.jquery.com/project/TextFill

Jクエリコード

//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 - サイズ変更時にフラッシュしない AutoResizing TextArea の構築

これが機能する人なら誰でも、これが役に立ち、良いものになることを願っています、乾杯!

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 に答える