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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by theoneozz » 11/01/2019 3:26 pm

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

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

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

Code: Select all

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

Top