การพื้นที่ย่อ - ขยายเเบบปรับได้ (Resizable) ด้วย jQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

theoneozz
PHP Super Member
PHP Super Member
โพสต์: 313
ลงทะเบียนเมื่อ: 07/01/2019 12:19 pm

การพื้นที่ย่อ - ขยายเเบบปรับได้ (Resizable) ด้วย jQuery

โพสต์ที่ยังไม่ได้อ่าน โดย theoneozz »

jQuery Resizable คือการที่ผู้ใช้สามารถลากกรอบข้อความหรือ ขยายพื้นที่ในการกรอกข้อมูล ทำให้เราสามารถย่อ ขยายพื่นที่ที่ผู้ใช้งานต้องการ

ขั้นตอนที่ 1 ทำการสร้างไฟล์ HTML เเละตั้งชื่อตามที่ผู้ใช้ต้องการ
ขั้นตอนที่ 2 นำโค้ดตัวอย่างไปวาง เเละปรับเปลี่ยนค่าตัวเเปรภายในJavaScript เช่น การเพิ่มขนาด หรือ เปลี่ยนข้อความที่เเสดง

ตัวอย่างโค้ด

โค้ด: เลือกทั้งหมด

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI (Resizable) -</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable();
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">(Resizable)</h3>
</div>
 
 
</body>
</html>
เมื่อทดลองเเล้วจะได้ตามผลลัพธ์ดังนี้

ก่อนทำการขยายกรอบ
Capture.JPG
Capture.JPG (13.93 KiB) Viewed 1396 times
หลังทำการขยายกรอบ
4.JPG
4.JPG (20.53 KiB) Viewed 1396 times
สรุป เมื่อผู้ใช้งานทดลองรันเเล้วจะได้กรอบข้อความที่เมื่อผู้ใช้งานนำเมาส์ไปวางเเละลาก เข้าออก จะสามารถขยายออกได้ตามที่ผู้ใช้งานต้องการ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64