JavaScript / アンカークリックでtextareaを拡大縮小する
リンクのワンクリックでテキストエリアを拡大縮小できるライブラリ(クラス)を作りました。
利用にはprototype.jsが必要です。
【JavaScript部分】
【使い方】
縦100px横100pxのテキストエリアを縦200px横200pxに拡大したい場合は、以下のHTMLソースとなります。
それにしても、JavaScriptは引数のポインタ渡しができないのが不便ですね。
利用にはprototype.jsが必要です。
【JavaScript部分】
// テキスト欄の拡大/縮小をするクラス
function TextareaSizeChanger(textarea_id, width_to_change, height_to_change)
{
this.textarea_id = textarea_id;
this.toggle_width = width_to_change;
this.toggle_height = height_to_change;
this.link_id = "";
this.toggle_link_text = "";
// 拡大/縮小時にアンカーの文言を切り替えたい場合、この関数を呼び出してください
this.setToggleLinkText = function(link_id, link_text_to_change)
{
this.link_id = link_id;
this.toggle_link_text = link_text_to_change;
}
// textareaを指定サイズに拡大/縮小する
this.toggle = function()
{
tmp = $(this.textarea_id).style.width;
$(this.textarea_id).style.width = this.toggle_width;
this.toggle_width = tmp;
tmp = $(this.textarea_id).style.height;
$(this.textarea_id).style.height = this.toggle_height;
this.toggle_height = tmp;
if (this.link_id != "")
{
tmp = $(this.link_id).innerHTML;
$(this.link_id).innerHTML = this.toggle_link_text;
this.toggle_link_text = tmp;
}
}
}
【使い方】
縦100px横100pxのテキストエリアを縦200px横200pxに拡大したい場合は、以下のHTMLソースとなります。
<textarea id="default_textarea_id" style="width:100px;height:100px;">デフォルトテキスト</textarea>
<a href="#" onclick="mailtextChanger.toggle(); return false;" id="link_id">テキストエリアを拡大します</a>
<script type="text/javascript">
var sizeChanger = new TextareaSizeChanger("default_textarea_id", "200px", "200px");
sizeChanger.setToggleLinkText("textarea_link", 'テキストエリアを縮小します');
</script>
それにしても、JavaScriptは引数のポインタ渡しができないのが不便ですね。