Membuat Context Menu atau Option Menu di Phonegap

Oke sekarang saya akan coba menjelaskan bagaimana cara membuat context menu di phonegap ini. Pertama-tama buatlah sebuah file index.html di folder asset/www/. Lalu isikanlah file index itu seperti contoh berikut ini:

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript">
        var menuOpen = false;
        var menuDiv = "";
        function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        // Cordova is ready    //
        function onDeviceReady() {
        menuDiv = document.querySelector("#options");
        document.addEventListener("menubutton", onMenuKeyDown, false);
        function onMenuKeyDown() {
        if(menuOpen) {"none";
        menuOpen = false;
        }else {"block";
        menuOpen = true;
        <style type="text/css">
        #options {
        bottom: 0;
        text-align: center;
        width: 100%;
        .options_menu {
        background: #FFFFFF;
        width: 60%;
        text-align: left;
        vertical-align: central;
        margin: 0 auto;
       .options_menu a {
       text-decoration: none;
       color: #000;
       display: block;
       padding: 4%;
       border-top: 1px solid #cccccc;
      .options_menu a:hover {
      text-decoration: none;
      color: #149bdf;
      display: block;
      padding: 4%;
      border-top: 1px solid #cccccc;
        <title>Context Menu</title>
    <body onload="onLoad()">            
      <h1>Test Context Menu</h1>
        <div id="options">
            <div class="options_menu">
                <a href="index.html" style="border-top: none;">Home Menu</a>
                <a href="#" onclick="showConfirm(); return false;">Exit</a>
                <a href="">Info</a>

Lalu setelah itu coba jalankan aplikasinya.. Dan apabila aplikasi sudah running, coba klik tombol menu di emulator atau di android Anda. Dan hasilnya akan tampak seperti ini:
Jadi aplikasi ini memanfaatkan codingan dari docs phonegap yang sudah disediakan, kita hanya perlu mensettingnya saja sedikit. Lihat document aslinya disini


One comment

  1. Hi I am so thrilled I found your site, I really found you by error, while I was
    looking on Bing for something else, Nonetheless I
    am here now and would just like to say many thanks for
    a fantastic post and a all round interesting blog (I also love the theme/design), I don’t have time to read it all
    at the moment but I have saved it and also added your RSS feeds, so when I have time I
    will be back to read a lot more, Please do keep up the fantastic work.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s