Sep 172009
 

PopUp Menu

PopUp Menu

Pada tutorial kali ini saya akan menunjukkan bagaimana membuat popup menu pada halaman html yang kita buat, dengan adanya popup menu ini kita akan dapat membuat menu klik kana sesuai dengan keinginan kita, ada beberapa hal yang kita butuhkan dalam pembuatan popup menu ini.

  1. Library ExtJs.
  2. yang jelas ya sebuah halaman html

Untuk mematikan event clik kanan pada halaman html anda dapat menambahkan scrip pada body html kamu

<body oncontextmenu="return false;">

ok diatas telah kita buat sebuah source untuk mematikan event klik kana pada halaman html kita. selanjutnya kita akan membuat popup menunya dengan memanfaatkan library dari ExtJs. ok silakan tulis coding di bawah ini

Ext.onReady(function(){
  Ext.QuickTips.init();
  Ext.getBody().on('contextmenu', function(e){
    taskContextMenu.showAt(e.getXY());
  });
  var taskContextMenu = new Ext.menu.Menu();
  taskContextMenu.add(
    new Ext.menu.Item({text: 'HOME', id:'1',handler:  loadNewPages}),
    new Ext.menu.Separator(),
    new Ext.menu.Item({text: 'ABOUT', id:'2',handler:  loadNewPages})
  );

  function loadNewPages(node){
    if(node.id=='1'){
      window.location="#";
    }else if(node.id=='2'){
      Ext.Msg.alert('ABOUT', '<b>WELCOME<b><br>ANDA BERADA PADA EVENT ABOUT');
    }
  }

});

ok mudah kan sekarang coba klik kanan pada halaman html kamu pasti bisa deh 😀

Facebook Comments

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)