В первой части мы узнали, как можно создать автоматически расширяющуюся текстовую область , и сопоставили требования. Перед тем, как задуматься о реальном JavaScript, мы должны определить, как наш код будет использоваться на веб-странице.
Как будут инициализироваться наши автоматически расширяющиеся textarea Поскольку наше решение будет плагином jQuery, мы можем реализовать функцию автоматического расширения для каждой области textarea
$("textarea").TextAreaExpander();
Это утверждение немного грубовато, поскольку каждая текстовая область будет автоматически расширяться, и мы не указали индивидуальные ограничения по высоте. Следовательно, нам, вероятно, потребуется несколько операторов для каждой страницы, например
$("#textarea1").TextAreaExpander();
$("#textarea2").TextAreaExpander(50, 200); // box will size between 50 and 200 pixels
$("#textarea3").TextAreaExpander(90, 300); // box will size between 90 and 300 pixels
Хотя это возможно, мы могли бы иметь десятки текстовых областей. Наш серверный код может также генерировать различные textarea Ведение списка объявлений JavaScript быстро станет утомительным и приведет к ошибкам разработчика.
Итак, давайте сделаем немного проще для себя и других разработчиков, использующих наш компонент. Если мы хотим, чтобы textarea Хотя атрибут class обычно используется для стилей CSS, он может содержать другие значения и доступен во всех вариантах HTML и XHTML. Не беспокойтесь, если к вашей текстовой области уже применен класс CSS — можно добавить любое количество значений, разделенных пробелами:
<!-- expanding textarea -->
<textarea name="textarea1" rows="3" cols="60" class="mystyle expand"></textarea>
Чтобы ограничить высоту textarea
<!-- expanding textarea, but limited between 50 and 200px -->
<textarea name="textarea2" rows="3" cols="60" class="expand50-200"></textarea>
Когда наша страница загружена, JavaScript будет искать в DOM узлы текстовой области с помощью класса «расширения» и автоматически применяет эффект автоматического расширения к этому элементу. Это имеет несколько преимуществ:
- Существующие теги
textarea - Наш триггер указан в HTML-коде
textarea - Мы по-прежнему можем использовать метод jQuery TextAreaExpander (), когда это необходимо, например, если текстовая область добавлена в DOM после загрузки страницы.
- Прогрессивное улучшение дает нам ощущение тепла и уюта!
Теперь, когда мы определили наш HTML-код и триггеры автоматического расширения, мы можем сослаться на наш JavaScript в нижней части страницы источника:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.textarea-expander.js"></script>
Это загружает последнюю библиотеку jQuery (загруженную с jQuery.com ) и наш новый код плагина TextAreaExpander.
Полезные ресурсы:
Готовы к JavaScript-кодированию? Пополните этот кофе и приготовьтесь к третьей части …