Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
scorch

Free JavaScript Context Menu

Recommended Posts

scorch

Após pesquisar muito por algum Free JavaScript Context Menu sem nenhum sucesso, venho aqui perguntar: :D

Alguém sabe de um Free JavaScript Context Menu que se possa incluir num projecto OpenSource.

PS: Não me indiquem Ext JS, Dojo, JQuery, etc. :)

EDIT: Procuro alguma que tenha icons, submenus e separadores.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
softklin

Então tu não queres usar uma framework de javascript como o jquery e depois dás um exemplo que usa uma (Prototype)?

Tenta ver este, tem submenus, http://www.milonic.com/menusample27.php

Tens é de arranjar forma do menu de contexto do browser não ficar por cima do teu menu personalizado.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
scorch

Eu preferia usar uma OpenSource. Já conhecia a da Milonic, mas devido à licenças, não queria usa-la.

E só referi a do Prototype porque não encontrei mais nada. :)

Até usava a do Prototype, se desse submenus. :D


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
softklin

Ops, desculpa nem reparei que tinha licenças... guiei-me pelo titulo que dizia "Free...".

Mas acho que podes usar essa do Proptotype, não tens problemas de licenças e parece-me bastante simples de usar, porque a framework faz tudo... Aliás, é por isso que elas existem, só precisas de te concentrar no que queres fazer, e não tanto em como o fazer. Só tem ali um problema com o Opera, mas tirando isso parece muito profissional.

Pode requerer algum tempo de aprendizagem, mas tem as suas vantagens usar uma framework.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
scorch

Acho que vou usá-la. O único problema é que o meu pode ficar muito grande sem submenus, porque este será gerado automaticamente conforme o utilizador. Por exemplo, para um utilizador, o menu pode ser muito pequeno e para outro, do tamanho da página.

Só tem um problema que eu não percebo: :D

No FireFox dá direito, quer a do site, quer a do meu computador.

No Internet Explorer, dá direito a do site e não dá a que está no meu computador.

Tenho isto:

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Proto.Menu :: prototype based context menu</title>
    
    <link rel="stylesheet" href="http://yura.thinkweb2.com/scripting/contextMenu/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://yura.thinkweb2.com/scripting/contextMenu/master.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="js/proto.menu.0.6.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="js/prototype.js"></script>

    <script type="text/javascript" src="http://yura.thinkweb2.com/scripting/contextMenu/effects.js"></script>
    <script type="text/javascript" src="js/proto.menu.0.6.js"></script>
    
    <script type="text/javascript">
      Element.addMethods({
        getNumStyle: function(element, style) {
          var value = $(element).getStyle(style);
          return value === null ? null : parseInt(value);
        }
      })
      document.observe('dom:loaded', function(){
  
  
  
        var myMenuItems = [
          {
            name: 'New',
            className: 'new',
            callback: function(e) {
              var tagName = e.element().tagName.toLowerCase(),
                  x = e.screenX,
                  y = e.screenY;
              alert('you clicked on <' + tagName + '> element at x: ' + x + ', and y: ' + y);
            }
          },{
            separator: true
          },{
            name: 'Edit',
            className: 'edit', 
            callback: function() {
              alert('Forward function called');
            }
          },{
            name: 'Copy',
            className: 'copy', 
            callback: function() {
              alert('Copy function called');
            }
          },{
            name: 'Delete', 
            disabled: true,
            className: 'delete'
          },{
            separator: true
          },{
            name: 'Save',
            className: 'save',
            callback: function() {
              alert('Saving...');
            }
          },{
            separator: true
          },{
            name: 'Save as .xsl',
            className: 'xsl',
            callback: function() {
              alert('Saving as .xsl');
            }
          },{
            name: 'Save as .doc',
            className: 'doc',
            callback: function() {
              alert('Saving as .doc');
            }
          },{
            name: 'Save as .pdf',
            className: 'pdf',
            callback: function() {
              alert('Saving as .pdf');
		menuItems: submenu  
            }
          },{
            separator: true
          },{
            name: 'Send to...',
            disabled: true,
            className: 'send'
          }
        ]
        
        new Proto.Menu({
          selector: '#desc',
          className: 'menu desktop',
          menuItems: myMenuItems
        })
      })
    </script>
  </head>
  <body>
    <div id='desc'>
<!-- Conteúdo da página -->
</div>
</body>
</html>


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Pela experiência que tenho com o Ext JS, pouca mas é alguma, estar a implementar uma framework no meu projecto só por um Context menu dava muito trabalho. E, para piorar, só sei trabalhar, ainda que pouco, com o Ext JS, já procurei e não encontrei como criar um Context Menu. Se alguém souber, que diga. :cheesygrin:


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
Nazgulled

Isso deve ser porque o Ext JS é fraquinho :D Eu uso jQuery e aquilo é muito fácil de aprender e usar. Implementar um context menu com jQuery é uma questão de usares um dos plugins existentes onde a configuração dos mesmos (pode depender de plugin para plugin) também não é nada de outro mundo.

Share this post


Link to post
Share on other sites
scorch

Vou experimentar o JQuery.

Elcsat, eu queria um menu ao clicar aom o botão direito.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Não sei bem o que pretendes, mas vê lá se isto serve : http://twtools.aeon-dev.org/index.php?c=mapgen

Não, eu queria um menu que, ao clicar com o botão direito do rato (ou touchpad :) ), apareça um menu sem ser o default do browser.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
djthyrax

A não ser que haja algum evento onmousealternativeclick, não estou a ver.


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Share this post


Link to post
Share on other sites
scorch

Jáfui ao W3Schools e não encontrei nada.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Obrigado yoda.pt

O único problema é que não sei muito de JavaScript e por isso preferia usar um Context Menu já criado. :) Obrigado na mesma  :cheesygrin:


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Eu queria saber, quando user clicar num elemento da página, por exemplo um <tr>, que tem um id, ele retornar num menu que diria remover, o link do género: ?remover=1

E também como saber onde o utilizador clicou para o menu aparecer perto do rato. Não sei se é difícil ou fácil.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Código:


<table>
<tr><td>Nome</td><td>ID</td></tr>
<tr id="item1"><td>PHP</td><td>1</td><tr>
<tr id="item2"><td>CSS</td><td>2</td><tr>
</table>

Ao clicar no item1, aparecia o menu mas ao clicar, por exemplo, em remover o link seria: ?remover=item1. O clicar no item2, o link seria: ?remover=item2.

Os items serão tirados de uma base de dados MySql.  E só apareceria o remover, editar e alguns menus se se clicasse na tabela e/ou noutro elemento HTML. É Basicamente isto.

Quanto ao segundo, é o que os Context Menu fazem, o utilizador clica com o botão direito e onde ele clicar aparece o menu.


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
yoda

Aqui tens uma parte, ja passo o resto. Se quiseres, adiciona-me no msn que fica mais simples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-ui-themeroller/jquery-ui-themeroller/jquery-1.3.1.js"></script> 
<script type="text/javascript" src="jquery-ui-themeroller/jquery-ui-themeroller/jquery.ui.all.js"></script>
<script type="text/javascript" src="jquery.rightClick.js"></script>
<script type="text/javascript">
$(function() {
    // Capture right click
    $('table#teste td').rightClick( function(e) {
	var parent = $(this).parent().get(0);
        var id = $(parent).attr('id');
	var mousex = e.pageX;
	var mousey = e.pageY;

	$('div#context_menu').css({
		'position': 'absolute',
		'top': mousey,
		'left': mousex,
		'display': 'block',
		'z-index': 1000
	});

	$('div#context_menu #delete').css({
		'display': 'block'
	});
    });
    
    // Disable context menu on an element
    $('table#teste td').noContext();
    $('div#context_menu').noContext();
});
</script>
<style type="text/css">
table {margin:0 auto 0 auto;width:500px;}
tr.grey {background:#CCCCCC;}
tr.lightgrey {background:#919191;}
td {width:200px;}

// context menu
div#context_menu {position:relative;width:100px;height:100px;display:none;border:1px #919191 solid;background:white;}
div#context_menu #delete{display:none;width:100px;height:20px;}
div#context_menu a {width:100%;height:100%;text-decoration:none;background:white;}
</style>
</head>
<body>
<table id="teste">
<tr><th>Nome</th><th>ID</th></tr>
<tr id="item1" class="grey"><td>PHP</td><td>1</td><tr>
<tr id="item2" class="lightgrey"><td>CSS</td><td>2</td><tr>
<tr id="item3" class="grey"><td>PHP</td><td>3</td><tr>
<tr id="item4" class="lightgrey"><td>CSS</td><td>4</td><tr>
<tr id="item5" class="grey"><td>PHP</td><td>5</td><tr>
<tr id="item6" class="lightgrey"><td>CSS</td><td>6</td><tr>
</table>

<div id="context_menu">
<div id="delete"><a href="">Remover</a></div>
</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites
scorch

Só faltava o link para o id, mas tentei trocar isto:

<div id="delete"><a href="">Remover</a></div>

por isto:

<script type="text/javascript">
	document.write("<div id=\"delete\"><a href=\"?remover=item" + id + "\">Remover</a></div>");
</script>

Mas não funcionou. Já nem sequer mostra o menu. :confused:


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
scorch

Sim, que vá para outra página.

Se o id é item1, ele vai para index.php?remover=item1.

Se o id é item2, ele vai para index.php?remover=item2.

Por aí fora. :confused:


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.