۱۳۸۷/۱۰/۲۲

تغيير ابعاد يك TextArea با استفاده از jQuery


اگر به سايت stackoverflow دقت كنيد، اندازه textarea ايي كه كاربران امكان ارسال مطلب دارند، قابل تغيير است:



شايد براي شما جالب باشد كه بدانيد به چه صورتي اينكار را انجام داده‌اند. اينكار با استفاده از افزونه TextArea Resizer صورت گرفته است. (دريافت كتابخانه به همراه مثال)

البته حالت عمومي‌تري نيز توسط jQuery-UI استاندارد پشتيباني مي‌شود (امكان تغيير اندازه يك المان با قابليت تغيير اندازه در حالت كلي). براي مثال به صفحه‌ي ساده‌ي ASP.Net زير دقت بفرمائيد:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="testWebForms87.WebForm5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$("#resizableArea").resizable({
handles: "s"
})
.find("textarea").height("100%").width("100%");
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="resizableArea" style="width:300px; height:200px" >
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" ></asp:TextBox>
</div>
</form>
</body>
</html>

در اينجا با استفاده از jQuery-UI ابتدا div ايي با id مساوي resizableArea پيدا مي‌شود و تابع resizable به آن اعمال مي‌گردد. سپس در اين div ، تمامي عناصر textarea موجود يافت شده و طول و عرض آن‌ها به اندازه‌ي جديد تغيير يافته div تنظيم خواهد شد. در مورد تنظيم‌هاي ديگري مانند نمايش ناحيه تغيير يافته به صورت animation مي‌توان به راهنماي آن مراجعه نمود.
براي مثال با استفاده از اين روش مي‌توان يك GridView با قابليت تغيير اندازه ايجاد كرد و امثال آن. يا براي نمونه شايد با مثال‌هايي كه به گريد نمايش داده شده اسكرول بار اضافه مي‌كنند برخورده باشيد:

<div id="resizableArea" style="overflow:auto;height:200px;">
My Grid view ...
</div>

و يا استفاده از يك پنل:

<asp:Panel ID="pnlScroll" runat="server" Width="391px" Height="282px" ScrollBars="Vertical">
My Grid view ...
</asp:Panel>

با استفاده از روش عمومي فوق، مي‌توان به اين div امكان تغيير اندازه را نيز اضافه كرد و آن‌را از حالت غيرقابل تغيير بودن خارج نمود.