การใช้ฟังก์ชั่น .Show() ในการสร้างกรอบข้อความ บน jQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

theoneozz
PHP Super Member
PHP Super Member
โพสต์: 313
ลงทะเบียนเมื่อ: 07/01/2019 12:19 pm

การใช้ฟังก์ชั่น .Show() ในการสร้างกรอบข้อความ บน jQuery

โพสต์ที่ยังไม่ได้อ่าน โดย theoneozz »

.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>
ผลลัพธ์ทีได้
mi1.gif
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 58