تغییر سایز المنت HTML با jQuery

در این آموزش , قصد داریم به شما نحوه تغییر سایز المنت HTML با jQuery را نشان بدیم. ما از تابع resizable() در جی کوئری برای تغییر اندازه تگ در HTML استفاده می کنیم.

در این مثال , ما قصد داریم که از این تابع jQuery برای تغییر اندازه تگ DIV بر اساس سلکتور id استفاده کنیم. می توتانیم چندین افکت انمیشن هم بصورت پارامتر های اختیاری به این تابع پاس بدیم.

کد HTML مثال تغییر اندازه تگ DIV

این کد شامل یک المنت با قابلیت تغییر اندازه است . ما نیز تابع resizable() در جی کوئری را بر اساس id تگ DIV فراخوانی می کنیم.

<html>
<head>
  <title>Resize HTML DOM using jQuery</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <style>
  #resizable-div { width: 200px; height: 200px; background:#9CE684;text-align:center;padding:20px;}
  </style>
  <script>
  $(function() {
    $( "#resizable-div" ).resizable();
  });
  </script>
</head>
<body> 
<div id="resizable-div">
Resizable DIV Element
</div> 
</body>
</html>

<html>

<head>

<title>Resize HTML DOM using jQuery</title>

<style>

#resizable-div { width: 200px; height: 200px; background:#9CE684;text-align:center;padding:20px;}

</style>

$(function() {

$( "#resizable-div" ).resizable();

});

</script>

</head>

<body>

Resizable DIV Element

</div>

</body>

</html>

آپشن های تابع Resizable در jQuery

تابع resizable() در جی کوئری چندین پارامتر برای اهداف خاص رو دریافت می کند . برای مثال, اسکریپت زیر شامل گزینه هایی برای ساخت افکت های انیمیشن و محدودیت هایی برای تغییر اندازه , است.

  <script>
  $(function() {
    $( "#resizable-div" ).resizable({
      animate: true
    });
  });
  </script>

$(function() {

$( "#resizable-div" ).resizable({

animate: true

});

</script>

  <script>
  $(function() {
    $( "#resizable-div" ).resizable({
      maxHeight: 200,
      maxWidth: 500,
      minHeight: 100,
      minWidth: 200
    });
  });
  </script>