.Show() คืออะไร .Show() เป็นฟังก์ชั่นของ
jQuery ซึ่งทำให้กรอบข้อความ หรือ ข้อความมีลูกเล่นเพิ่มขึ้น
ขั้นตอนเเรก สร้างไฟล์
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>
ขั้นตอนที่ 2 ให้ทำการเปลี่ยนแปลงข้อมูลตามที่ผู้ใช้งานต้องการ เช่น ข้อความ ยินดีต้อนรับ โดยจะทำการเปลี่ยนแปลงในส่วนนี้
โค้ด: เลือกทั้งหมด
<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 ส่วนนี้
โค้ด: เลือกทั้งหมด
<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
.Show() คืออะไร .Show() เป็นฟังก์ชั่นของ [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/3863-what-is-jquery.html]jQuery[/url] ซึ่งทำให้กรอบข้อความ หรือ ข้อความมีลูกเล่นเพิ่มขึ้น
ขั้นตอนเเรก สร้างไฟล์ [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]Html[/url] ขึ้นมา จากนั้นนำโค้ดตัวอย่างไปใส่
[b]ตัวอย่าง[/b]
[code]<!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>[/code]
ขั้นตอนที่ 2 ให้ทำการเปลี่ยนแปลงข้อมูลตามที่ผู้ใช้งานต้องการ เช่น ข้อความ ยินดีต้อนรับ โดยจะทำการเปลี่ยนแปลงในส่วนนี้
[code]<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>[/code]
อีกทั้งเรายังสามารถ กำหนดขนาดของกรอบข้อความ ได้โดยการเปลี่ยนโค้ด style ส่วนนี้
[code]<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>[/code]
ผลลัพธ์ทีได้
[attachment=0]mi1.gif[/attachment]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : 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]