การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
ionicframework

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework

ดูแล้ว 6,636 ครั้ง


การใช้งาน modal ใน ionicframework จะคล้ายกับการแสดงหน้าต่างเพจ หรือแท็บชั่วคราว
มาอยู่ด้านบนของหน้าทำงานหลัก เพื่อทำงานอย่างหนึ่งอย่างใดเฉพาะ และปิดไปเมื่อจบการทำงาน 
 
โดยรูปแบบการใช้งาน modal จะใช้แท็ก <ion-modal-view> คลุมในส่วนของ
เนื้อหาที่ต้องการแสดง เช่น
 
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
 
การเรียกใช้งาน modal สามาระเรียกใช้งานได้แบบ string และ url
ในที่นี้จะใช้เป็นแบบ url หรือเรียกผ่านไฟล์ template 
 
โดยเรากำหนดชื่อว่า modal.html 
 
มาดูโครงสร้างไฟล์ทั้งหมด สำหรับประกอบคำอธิบาย ว่ามีไฟล์อะไรบ้าง
 
index.html
app.js
tpl/aboutus.html
tpl/contactus.html
tpl/welcome.html
tpl/modal.html
 
หากใครยังไม่เข้าใจการใช้งาน template ดูเนื้อหาที่เกี่ยวข้องได้ที่
 
การใช้งาน template ใน ionicframework ตอนที่ 4 
 
มาไล่ดูโค้ดตัวอย่างไฟล์ทั้งหมดคร่าวๆ กัน (ไม่ได้อธิบายอะไรเพิ่มให้ดูโครงสร้างเท่านั้น)
 
ไฟล์ index.html
 
<!DOCTYPE html>
<html ng-app="myIonicApp"> 
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="css/ionic.css" rel="stylesheet">
        <script type="text/javascript" src="js/ionic.bundle.js"></script>  
        <script type="text/javascript" src="app.js"></script>
        <title>My Ionic 3</title>
    </head>
    <body ng-controller="myIonicHome">
  
 
      <ion-side-menus>  
        <!-- Center content -->  
        <ion-side-menu-content>  
               
            <ion-nav-bar class="bar bar-header bar-assertive">
              <ion-nav-back-button class="button-clear">
                <i class="ion-arrow-left-c"></i> Back
              </ion-nav-back-button>                     
            </ion-nav-bar>             
            <ion-nav-view animation="slide-left-right">

            </ion-nav-view>
             
        </ion-side-menu-content>  
  
        <!-- Left menu -->  
        <ion-side-menu side="left">  
            <ion-header-bar class="bar bar-header bar-assertive">  
                <h1 class="title">Menu</h1>  
            </ion-header-bar>  
            <ion-content>  

            <div class="list">
                <a nav-clear nav-clear menu-close class="item item-icon-left" href="#/">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
                    <i class="icon ion-at"></i>
                    About Us
                </a>
                <a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
                    <i class="icon ion-email"></i>
                    Contact Us
                    <i class="icon ion-ios7-telephone-outline"></i>
                </a>
            </div>              
                                                      
            </ion-content>  
        </ion-side-menu>  
  
    </ion-side-menus>  
   
    </body>
</html>
 
ไฟล์นี้เราจะใช้โครงสร้างแบบมี sidemenu ด้านซ้าย 
เพื่อลิ้งค์ไปหน้าอื่น และจำลองให้เห็นการทำงานของ event ใน modal ด้วย
 
ไฟล์ welcome.html
 
<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">My Ionic</h1>  
<button ng-click="openModal()" class="button">Edit</button>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

  
<div class="list card">

  <div class="item item-body">
   <h2>Welcome</h2>
    <p>
    This is welcome.html template
    </p>
  </div>

</div>            
    
</ion-content>   
 
สำหรับไฟล์นี้ จะเป็นไฟล์ที่เรามีการเรียกใช้งาน modal โดยเราจะเพิ่มปุ่มคำว่า 
edit ไปที่มุมบนขวาของ header พอกด ก็จะไปเรียกใช้งานฟังก์ชั่น openModal()
 
 
ไฟล์ modal.html
 
    <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-energized">
            <h1 class="title">ionic modal</h1>
            <button ng-click="closeModal()" class="button icon ion-ios7-close-outline"></button>
        </ion-header-bar>
        <ion-content class="scroll-content ionic-scroll has-header">

        <br>
        model content here
        <br>
        click exit button to close modal
       
        </ion-content>
  </ion-modal-view>
 
หน้าไฟล์ modal.html ก็จะเหมือนหน้าอื่นๆ แต่จะมีการครอบด้ววยแท็ก 
<ion-modal-view>  เพื่อกำหนดให้เป็นเนื้อหา modal โด้วยเฉพาะ ในไฟล์
ก็จะมีโค้ดปุ่มสำหรับ ปิด model ด้วยการเรียกใช้งานฟังก์ชั่น closeModal()
 
ไฟล์ aboutus.html
 
<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">About Us</h1>  
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

<div class="list card">

  <div class="item item-body">
   <h2>About Us</h2>
    <p>
      This is aboutus.html template
    </p>
  </div>

</div>   
    
</ion-content>   
 
ไฟล์ contactus.html
 
<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">Contact Us</h1>  
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  
<div class="list card">

  <div class="item item-body">
   <h2>Contacuts</h2>
    <p>
      This is contactus.html template
    </p>
  </div>

</div>   
</ion-content>   
 
ส่วนสำคัญไฟล์ app.js คำอธิบาย แสดงในโค้ด
 
angular.module("myIonicApp", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('intro', {  // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
        url: '/',  // ถ้าลิ้งไปที่ url / 
        templateUrl: 'tpl/welcome.html',  // ให้ไปเรียกไฟล์ welcome.html มาแสดง
        controller: 'welcomeCtrl'  // พร้อมสร้าง controller ชื่อ myIonicHome
    })
     .state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
        url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        controller: 'aboutusCtrl'
    })   
     .state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
        url: '/contactus',
        templateUrl: 'tpl/contactus.html',
        controller: 'contactusCtrl'
    })          
    $urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ  / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ   มีการส่งค่า $ionicModal เพื่อใช้งาน modal
.controller("welcomeCtrl",function($scope,$ionicModal){ 

    // สร้าง modal controller จากไฟล์ template และกำหนด options
    $ionicModal.fromTemplateUrl('tpl/modal.html', {
        scope: $scope, // สร้าง child scope ของ rootScope เพื่อใช้งาน
        focusFirstInput:false, // ถ้าใน modal มี input textbox ให้โฟกัสไปที่ input นั้น เมื่อเปิด modal มา  ค่าเริ่มต้นใช้ false
        backdropClickToClose:true, // ให้ปิด modal ได้ด้วยการกดไปที่ พื้นของ backdrop คล้ายพื้นหลังสีทึบๆ
        hardwareBackButtonClose:true, // ให้ปิด modal ได้ด้วยปุ่ม back ที่เครื่อง
        animation: 'slide-in-up'  // รูปแบบการแสดงการเคื่อนไหว 
    }).then(function(modal) { // คืนค่าเป็น object  controller เพื่อใช้งาน
        $scope.modal = modal;  // เก็บค่าในตัวแปร $scope.modal 
    });

    // สร้างฟังก์ชั่น สำหรับแสดง modal
    $scope.openModal = function() {
        $scope.modal.show();  // เรียกใช้ method ของ ionicmodal ในการแสดง modal
        console.log("modal show");
        console.log($scope.modal.isShown());
        // $scope.modal.isShown() เป็น method สำหรับเช็คว่า modal มีการแสดงอยู่หรือไม่ ค่าเป็น true หรือ false
//        if($scope.modal.isShown()){ // ถ้า modal แสดงอยู่
//          //  คำสั่งทำงาน
//        }
    };

    // สร้างฟังก์ชั่น สำหรับปิด modal
    $scope.closeModal = function() {
        $scope.modal.hide(); // เรียกใช้ method ของ ionicmodal ในการปิด modal
        console.log("modal hide");
        console.log($scope.modal.isShown());
    };

    // อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
    // เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
        console.log("modal destroy");
    });

    // event เมื่อมีการ  hide modal เช่นจากคำสั่ง $scope.modal.hide(); หรือคำสั่ง $scope.modal.remove();
    $scope.$on('modal.hidden', function() {
        // คำสั่งที่ต้องการทำงาน
        console.log("modal hidden");
    });

    // event เมื่อมีการ removed modal เช่น จากคำสั่ง $scope.modal.remove();
    $scope.$on('modal.removed', function() {
        // คำสั่งที่ต้องการทำงาน
        console.log("modal remove");
    });    
    
})
.controller("aboutusCtrl",function($scope){ 

})
.controller("contactusCtrl",function($scope){ 

})
.controller("myIonicHome",function($scope){ 

});
 
ในไฟล์ app.js เราจะได้รู้จักกับ method ต่างๆ ของ modal
เช่น 
show()  แสดง modal
isShow() ใช้ตรวจสอบว่า ขณะนี้ modal แสดงอยู่หรือไม่ true / false
hide()  ปิดหรือซ่อน modal
remove() ปิด และล้างค่า modal ทำให้ไม่สามารถใช้งานได้อีก จนกว่า มีการเรียกใช้งานใหม่ เช่น ไปหน้าอื่นและกลับมาอีกครั้ง สั่งเกตว่า ionic จะแนะนำให้เราทำการ remove modal เมื่อมีการเปลี่ยนไปหน้าอื่นด้วยคำสั่ง
 
    // อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
    // เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
        console.log("modal destroy");
    });
 
 
เพื่อเป็นการป้องกันการใช้งาน memory มากเกินจำเป็น
 
ตัวอย่างการทำงานและรูปแบบ ของ modal
 
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ