Autosize Textbreite (Spalten)?

Ich mache eine Web-App für den Benutzer, um ein einfaches Organigramm zu erstellen. Ich habe noch nicht einmal die Linien, die die Knoten verbinden, aber ich benutze Textbereiche. Ich habe ein sehr nützliches autosize() Plugin gefunden, das großartig ist, um eine zusätzliche Zeile hinzuzufügen, wenn die Breite aufgebraucht ist. Gibt es eine Möglichkeit, es so zu machen, dass, wenn der Benutzer nur eine Zeile verwendet, die Autoresize die Breite verkleinert, um den Text zu umschließen?Autosize Textbreite (Spalten)?

Ich habe versucht, herauszufinden, wie man die jsfiddle, aber ich weiß nicht, wie man mehr als ein Javascript (für das Plug-in) hinzufügen, so Ill einfach nur meinen jquery Code an der Unterseite des Plug-Ins und setzen die Plug-in zu dem in JavaScript-Bereich in dem jsfiddle

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

01.235.

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; 
}

Quelle

2012-04-12 mharris7190

hier gehen Sie Demo arbeiten: http://jsfiddle.net/YVEhr/30/ (mehr apt) oderhttp://jsfiddle.net/YVEhr/1/

Bitte lassen Sie mich wissen, wenn das ist, was Sie wollen, ich bin zu helfen glücklich. hat mich ein bisschen, es zu bekommen (dh Ändern der Größe Idee) :)

bearbeiten Okies Ich habe es jetzt (Puh) Wenden Sie sich bitte mit der CSS zu spielen, um, oder Sie können ‚row = something` müssen anfangen, mit Ich habe einige Links für weitere Hilfe geteilt. :)

Demohttp://jsfiddle.net/YVEhr/30/

Ändern der Größe der Textbereich auf den Bildschirm passen: gute Verbindung: oder Sie können auch diesen Mann suchen in: http://archive.plugins.jquery.com/project/TextFill

JQuery-Code

//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)); 
});

Bitte lassen Sie mich wissen, wenn Sie das wollen.

Erklärung

brauchen nur neue etxtareaclass zu .autosize() Funktion zu binden und ruhen Sie es in jsfiddle sehen können.

Vergessen Sie nicht die Antwort & zu akzeptieren, wenn Sie mögen, diese Lösung ohne Verwendung eines Plugins verwenden können: jQuery - Building an AutoResizing TextArea that Doesn't Flash on Resize

Anywho dies funktionieren wird, hoffe, das hilft und haben einen schönen ein, Prost!

JQuery-Code

$(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(); 
     } 
    }); 
});

Quelle

2012-04-12 04:18:02

Abgesehen von HTML DOM anhängt, Ihre Arbeit ist 'jQuery ('textarea') Autosize();.'? – dwerner

Hiya @dwerner Ich habe '$ ('. Text_field_not_selected') hinzugefügt.autosize(); 'für die Größenänderung für den anderen Textbereich, wenn sie anhängig gemacht werden :), Habe ich ** oder ** etwas falsch verstanden. Bitte lasst mich wissen, ich werde es korrigieren, Prost für die Antwort Mann! –

Hiya @dwerner saweet man danke für deinen Kommentar hat mir geholfen, nochmal zu überprüfen, was gebraucht wird, und die Änderung vorgenommen, damit Textarea automatisch die Größe ändert. Jeder, der es mich wissen lässt. Danke nochmal Mann! ** + 1 **, Prost –

Autosize Textbreite (Spalten)?

Antwort

Verwandte Themen