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 (13.93 KiB) Viewed 1397 times
หลังทำการขยายกรอบ
- 4.JPG (20.53 KiB) Viewed 1397 times
สรุป เมื่อผู้ใช้งานทดลองรันเเล้วจะได้กรอบข้อความที่เมื่อผู้ใช้งานนำเมาส์ไปวางเเละลาก เข้าออก จะสามารถขยายออกได้ตามที่ผู้ใช้งานต้องการ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
-
สอนการใช้งาน jQuery & Ajax
-
ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-
ศึกษาบทเรียนเกี่ยวกับ JavaScript
-
ศึกษาบทเรียนเกี่ยวกับ jQuery
-
ศึกษาบทเรียนเกี่ยวกับ Ajax
[b]jQuery Resizable[/b] คือการที่ผู้ใช้สามารถลากกรอบข้อความหรือ ขยายพื้นที่ในการกรอกข้อมูล ทำให้เราสามารถย่อ ขยายพื่นที่ที่ผู้ใช้งานต้องการ
ขั้นตอนที่ 1 ทำการสร้างไฟล์ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เเละตั้งชื่อตามที่ผู้ใช้ต้องการ
ขั้นตอนที่ 2 นำโค้ดตัวอย่างไปวาง เเละปรับเปลี่ยนค่าตัวเเปรภายใน[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]JavaScript[/url] เช่น การเพิ่มขนาด หรือ เปลี่ยนข้อความที่เเสดง
[b]ตัวอย่างโค้ด[/b]
[code]<!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>[/code]
[b]เมื่อทดลองเเล้วจะได้ตามผลลัพธ์ดังนี้ [/b]
[b]ก่อนทำการขยายกรอบ [/b]
[attachment=1]Capture.JPG[/attachment]
[b]หลังทำการขยายกรอบ [/b]
[attachment=0]4.JPG[/attachment]
[b]สรุป[/b] เมื่อผู้ใช้งานทดลองรันเเล้วจะได้กรอบข้อความที่เมื่อผู้ใช้งานนำเมาส์ไปวางเเละลาก เข้าออก จะสามารถขยายออกได้ตามที่ผู้ใช้งานต้องการ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- [url=https://www.mindphp.com/forums/viewforum.php?f=78]สอนการใช้งาน jQuery & Ajax[/url]
- [url=https://www.mindphp.com/forums/viewforum.php?f=18]ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]ศึกษาบทเรียนเกี่ยวกับ JavaScript[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]ศึกษาบทเรียนเกี่ยวกับ jQuery[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax.html]ศึกษาบทเรียนเกี่ยวกับ Ajax[/url]