For our next example, we are going to see a textarea autogrow plugin. This is going to be an easy one to use, but very useful in the insert and edit forms of our component. This time we are going to use the plugin from Antti Kaihola and we can find it here:
http://github.com/akaihola/jquery-simpleautogrow.
Download the packed file. Inside we will find a file called
jquery.simpleautogrow.js
. Place this file in the
administrator/components/com_tinynews/js
folder. After placing the
file, we need to modify our form.php
template file placed
at administrator/components/com_tinynews/views/addnews/tmpl/
.
Remember how we declared our previous script? We are going to do something similar
now:
<?php defined('_JEXEC') or die('Restricted access'), $js = JURI::base().'components/com_tinynews/js/jquery.simpleautogrow.js'; $document =& JFactory::getDocument(); $document->addScript($js);
The only difference is the name of the script we are loading. After that, we will make use of the plugin:
$js = " jQuery(document).ready(function($){ $('textarea').simpleautogrow(); }); "; $document->addScriptDeclaration($js); ?>
As you can see, simpleautogrow
is the function to call. With
this simple call, our textarea
will adapt its height to the
amount of text it has. For example, in a fresh form, we would have something similar
to the following screenshot:
If we try to write something in the textarea
, we will see how
it adapts to our text, as seen in the next screenshot:
Interesting, isn't it? This will help us provide a textarea that will automatically adapt to our needs, and incorporating it was very easy, thanks to the plugin. Our next stop is going to be the frontpage of our component.
But remember that you can find the modified form.php
file in
the textarea_plugin
folder of Chapter 9 in the code
bundle.
3.149.253.210