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

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

ionicframework

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

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

ในการใช้งาน mobile app หรือเว็บเพจทั่วไป เราจะเจอรูปแบบของ popup ต่างๆ

ที่แสดงขึ้นมาเพื่อให้แจ้งข้อมูล แจ้งเตือน หรือยืนยันการดำเนินการขั้นตอนต่อไปต่อ หรือแม้

แต่การรับข้อมูล เพื่อนำค่าไปดำเนินการต่อ อย่างรูปแบบที่เห็นบ่อยคือ

รูปแบบ alert

รูปแบบ confirm

รูปบบ prompt

ซึ่งส่วนใหญ่ถ้าในเว็บเพจทั่วไป ก็จะเป็นการใช้งาน javascript

ionic มีรูปแบบดังกล่าวนี้เช่นกัน

หมายเหตุ:: โค้ดและตัวอย่างที่นำมาแนะนำ จะมาจากเว็บไซต์

http://ionicframework.com/docs/api/

โดยจะมีการประยุกต์ดัดแปลง บ้างในบางส่วนเพื่อความเข้าใจ

โค้ดตัวอย่างและไฟล์ที่เกี่ยวข้อง จะขอใช้งานจากบทความก่อนหน้า ดูได้ที่

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

https://www.ninenik.com/content.php?arti_id=560 via @ninenik

ในที่นี้ ให้ดูเฉพาะไฟล์ 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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

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')
}