การใช้งาน ionicpopup ใน ionicframework ตอนที่ 12

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

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

ดูแล้ว 7,217 ครั้ง


ในการใช้งาน mobile app หรือเว็บเพจทั่วไป เราจะเจอรูปแบบของ popup ต่างๆ
ที่แสดงขึ้นมาเพื่อให้แจ้งข้อมูล แจ้งเตือน หรือยืนยันการดำเนินการขั้นตอนต่อไปต่อ หรือแม้
แต่การรับข้อมูล เพื่อนำค่าไปดำเนินการต่อ อย่างรูปแบบที่เห็นบ่อยคือ
 
รูปแบบ alert 
รูปแบบ confirm
รูปบบ prompt
 
ซึ่งส่วนใหญ่ถ้าในเว็บเพจทั่วไป ก็จะเป็นการใช้งาน javascript
ionic มีรูปแบบดังกล่าวนี้เช่นกัน 
 
หมายเหตุ:: โค้ดและตัวอย่างที่นำมาแนะนำ จะมาจากเว็บไซต์ 
 
โดยจะมีการประยุกต์ดัดแปลง บ้างในบางส่วนเพื่อความเข้าใจ
 
โค้ดตัวอย่างและไฟล์ที่เกี่ยวข้อง จะขอใช้งานจากบทความก่อนหน้า ดูได้ที่
 
การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10 
 
ในที่นี้ ให้ดูเฉพาะไฟล์ welcome.html และไฟล์ app.js
 
ไฟล์ 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>  
</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
      <br>
      <br>
      <br>

    <div class="button-bar">
    <a ng-click="showAlert()" class="button button-assertive">Alert</a>    
    <a ng-click="showConfirm()" class="button button-positive">Confirm</a>
    <a ng-click="showPrompt()" class="button button-balanced">Prompt</a>    
    </div>      
   <br><br>
    <div class="button-bar">
    <a ng-click="showPopup()" class="button button-royal">MyPopup</a>    
    </div>      
    </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 ต่างๆ   มีการส่งค่า $ionicPopup เพื่อใช้งาน popup
.controller("welcomeCtrl",function($scope,$ionicPopup){ 


    // การสร้างฟังก์ชั่น เรียกใช้งาน popup รูปแบบ alert
    $scope.showAlert = function() {
        // สร้าง popup object รุปแบบ alert
        // เราสามารถ กำหนดไว้ในตัวแปรได้ เช่น 
//        var alertobj=$ionicPopup.alert({
//            title: 'คำแนะนำ',  // หัวข้อหลัก
//            template: 'คุณเห็นข้อความนี้แล้ว'  // template หรือข้อความที่ต้องการแสดง
//        });
        $ionicPopup.alert({
            title: 'คำแนะนำ',  // หัวข้อหลัก
            template: 'คุณเห็นข้อความนี้แล้ว'  // template หรือข้อความที่ต้องการแสดง
        }).then(function(res) { // เมื่อปิด popup 
            // คำสั่งให้ทำงาน เมื่อปิด alert โดยการคลิกปุ่ม ok
            console.log('ปิด alert แล้ว');
        });
    };      
    
    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup ในรูปแบบ confirm
    $scope.showConfirm = function() {
        // สร้าง popup object รุปแบบ confirm        
        $ionicPopup.confirm({
            title: 'ยืนยันการลบ', // หัวข้อหลัก
            template: 'คุณต้องการลบรายการนี้หรือใม่?'   // template หรือข้อความที่ต้องการแสดง
        }).then(function(res) { // เมื่อปิด popup กรณีเลือก ok หรือ cancel
            // เงือนไขการทำงาน
            if(res){  // ถ้าเลือก ok
                // ทำงานตามคำสั่งที่กำหนด
                console.log('คุณเลือก ok');
            }else{  // ถ้าเลือก cancel
                // ทำงานตามคำสั่งที่กำหนด
                console.log('คุณเลือก cancel');
            }
        });
    };    
    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup ในรูปแบบ prompt    
    $scope.showPrompt = function(){
        // สร้าง popup object รุปแบบ prompt     
        $ionicPopup.prompt({
            title: 'ยืนยันรหัสผ่าน',  // หัวข้อหลัก
            subTitle:'กรุณายืนยันรหัสผ่านอีกครั้ง',  // หัวข้อย่อย
            inputType: 'password',  // รูปแบบ รnput รับค่า เป็น text หรือ pasword
            inputPlaceholder: 'กรอกรหัสผ่าน'  // ข้อความแสดงใน input
        }).then(function(res) { // เมื่อปิด popup โดยคลิก ok หรือ cancel 
            // ทำงานตามคำสั่งที่กำหนด  เมือปิด popup
            // ถ้า เลือก ok ค่า res จะคือ ค่า input ที่กรอก สามารถเอาไปใช้งานต่อได้
            console.log('รหัสผ่านของคุณคือ ', res);  
        });        
    };

    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup แบบกำหนดเอง หรือ ในรูปแบบ show    
    $scope.showPopup = function() {
        // กำหนดตัวแปร object เพื่อไว้รับค่า
        $scope.data = {};

        // กำหนดรูปแบบ การแสดง popup ในตัวอย่างเราจะแสดงให้กรอกข้อมูลสำหรับล็อกอิน
        var str_template='<input type="text" placeholder="ชื่อผู้ใช้" ng-model="data.username"><br>';
        str_template+='<input type="password" placeholder="รหัสผ่าน" ng-model="data.password">';
        
         // สร้าง popup object รุปแบบ show    
        $ionicPopup.show({
            template:str_template, // ใช้รูปแบบตามตัวแปรด้านบน
            title: 'เข้าสู่ระบบ',  // หัวข้อหลัก
            subTitle: 'กรุณากรอกข้อมูลเพื่อเข้าสู่ระบบ',  // หัวข้อย่อย
            scope: $scope, // กำหนด scope child เพื่อใช้งานข้อมูลใน popup
            buttons: [ // จัดรูปแบบปุ่ม
                { // กำหนดรูปแบบสำหรับปุ่ม cancel
                    text: 'ยกเลิก',   // ข้อความปุ่ม 
                    type: 'button-assertive' // รูปแบบ css class ของปุ่ม
                },
                {    // กำหนดรูปแบบสำหรับปุ่ม ok
                    text: '<b>เข้าสู่ระบบ</b>',  // ข้อความปุ่ม 
                    type: 'button-balanced',   // รูปแบบ css class ของปุ่ม
                    onTap: function(e) { // กำหนดการทำงานเพิ่มเตืม ถ้ากด ok
                        // ตรวจสอบว่าได้กรอกข้อมูล username และ password หรือไม่
                        if (!$scope.data.username || !$scope.data.password) {
                            // ถ้าไม่ได้กรอก จะไม่สามารถทำอะไรได้ กดแล้วไม่มีผล
                            // และ popup จะยังไม่ปิด
                            e.preventDefault();
                        } else {
                            // หากกรอกข้อมูลครบ ส่งค่ากลับเป็น ตัวแปร object
                            return $scope.data;
                        }
                }
                },
            ]
        }).then(function(res) { // เมื่อปิด popup โดยการกด ok หรือ cancel
            // ส่งค่ากลับมาเป็น object ชื่อว่า res  กรณีมีข้อมูล และกดปุ่ม ok
            // กรณีกดปุ่มยกเลิก จะไม่มี ค่า res หรือเป็น undefined
            if(res){ // ถ้ามีค่า res
                $scope.data=res;  // นำค่าที่ได้ไปเก็บในตัวแปร object ของ scope
                console.log('ชื่อผู้ใช้!',$scope.data.username);  // การเรียกใช้งานข้อมูล ชื่อผู้ใช้ได้จาก  $scope.data.username
                console.log('รหัสผ่าน!', $scope.data.password); // การเรียกใช้งานข้อมูล รหัสผ่านได้จาก  $scope.data.password
            }
        });    
    };
        
        
})
.controller("aboutusCtrl",function($scope){ 
                 
})
.controller("contactusCtrl",function($scope,$ionicPopup){ 

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

});
 
ตัวอย่างการทำงาน
 
 
 
จากตัวอย่างและโค้ดข้างตัน นอกจากการใช้งาน method alert() confirm() prompt() แลัว
เรายังสามารถกำหนด popup แบบกำหนดเอง โดยใช้ method show() 
โดยในตัวอย่างข้างต้น จะเป็นการประยุกต์ เพื่อแสดง popup สำหรับ login หรือเข้าสู่
ระบบอย่างง่าย
 
มาดู option ทั้งหมดของ method ทั้ง 4 รูปแบบข้างต้น เพิ่มต้ม
 
การใช้งาน method show() มี option กำหนดเพิ่มเติมดังนี้
 
    {
        title: '', // หัวข้อหลัก
        subTitle: '', // หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        scope: null, // กำหนด scope child เพื่อใช้งานข้อมูลใน popup ใช้ null หรือ $scope (มีหรือไม่ก็ได้)
        buttons: [  // จัดรูปแบบปุ่ม
            { // กำหนดรูปแบบสำหรับปุ่ม cancel
                text: 'Cancel',  // ข้อความปุ่ม
                type: 'button-default',  // รูปแบบ css class ของปุ่ม
                onTap: function(e) {  // กำหนดการทำงานเพิ่มเตืม ถ้ากดปุ่ม
                    // การใช้งาน e.preventDefault() จะทำให้การกดปุ่มใดๆ ไม่มีผล และ popup จะไม่ปิด 
                    //    e.preventDefault();
                }
            },{    // กำหนดรูปแบบสำหรับปุ่ม ok{  
                text: 'OK',   // ข้อความปุ่ม
                type: 'button-positive',  // รูปแบบ css class ของปุ่ม
                onTap: function(e) {  // กำหนดการทำงานเพิ่มเตืม ถ้ากดปุ่ม
                    // คืนค่าข้อมูลกลับ กรณีมีการใช้งาน input text หรือมีการใช้งาน ข้อมูลผ่านการกำหนด $scope
                    return scope.data.response;
                }
            }
        ]
    }
 
การใช้งาน method alert() มี option กำหนดเพิ่มเติมดังนี้
 
    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        okText: '', // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: '', // รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }        
 
การใช้งาน method confirm() มี option กำหนดเพิ่มเติมดังนี้
 
    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        cancelText: '', // ข้อความปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'Cancel')
        cancelType: '', // รูปแบบ css class ของปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-default')
        okText: '', // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: '', // รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }   
 
การใช้งาน method prompt() มี option กำหนดเพิ่มเติมดังนี้
 
    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        inputType: // รูปแบบ input สำหรับรับข้อมูล เช่น text หรือ password (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'text')
        inputPlaceholder: // ข้อความที่แสดงแนะนำใน input (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: '')
        cancelText: // ข้อความปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'Cancel')
        cancelType: // รูปแบบ css class ของปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-default')
        okText: // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: //  รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }        


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







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









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





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

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


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


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







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