การใช้ฟังก์ชั่น .Show() ในการสร้างกรอบข้อความ บน jQuery
โพสต์แล้ว: 11/01/2019 4:04 pm
.Show() คืออะไร .Show() เป็นฟังก์ชั่นของ jQuery ซึ่งทำให้กรอบข้อความ หรือ ข้อความมีลูกเล่นเพิ่มขึ้น
ขั้นตอนเเรก สร้างไฟล์ Html ขึ้นมา จากนั้นนำโค้ดตัวอย่างไปใส่
ตัวอย่าง
ขั้นตอนที่ 2 ให้ทำการเปลี่ยนแปลงข้อมูลตามที่ผู้ใช้งานต้องการ เช่น ข้อความ ยินดีต้อนรับ โดยจะทำการเปลี่ยนแปลงในส่วนนี้
อีกทั้งเรายังสามารถ กำหนดขนาดของกรอบข้อความ ได้โดยการเปลี่ยนโค้ด style ส่วนนี้
ผลลัพธ์ทีได้
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax
ขั้นตอนเเรก สร้างไฟล์ Html ขึ้นมา จากนั้นนำโค้ดตัวอย่างไปใส่
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.show()</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>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// Run the currently selected effect
function runEffect() {
// Derive effects type
var selectedEffect = $( "#effectTypes" ).val();
// Most of the effects do not need to type the default delivery options
var options = {};
// Some special effects with the required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// Run effects
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
// Callback
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// Set the value according to the selected menu effects
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">ตัวอย่าง(Show)</h3>
<p>
MindPHP
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind Effect</option>
<option value="bounce">Bounce Effect</option>
<option value="clip">Clip Effect</option>
<option value="drop">Drop Effect</option>
<option value="explode">Explode Effect</option>
<option value="fold">Fold Effect</option>
<option value="highlight">Highlight Effect</option>
<option value="puff">Puff Effect</option>
<option value="pulsate">Pulsate Effect</option>
<option value="scale">Scale Effect</option>
<option value="shake">Shake Effect</option>
<option value="size">Size Effect</option>
<option value="slide">Slide Effect</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">เเสดงตัวอย่าง</a>
</body>
</html>
โค้ด: เลือกทั้งหมด
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">ตัวอย่าง(Show)</h3>
<p>
MindPHP
</p>
</div>
</div>
โค้ด: เลือกทั้งหมด
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax