ขั้นตอนที่ 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>
ก่อนทำการขยายกรอบ
หลังทำการขยายกรอบ
สรุป เมื่อผู้ใช้งานทดลองรันเเล้วจะได้กรอบข้อความที่เมื่อผู้ใช้งานนำเมาส์ไปวางเเละลาก เข้าออก จะสามารถขยายออกได้ตามที่ผู้ใช้งานต้องการ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax