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

scorch

Free JavaScript Context Menu

31 mensagens neste tópico

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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. :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Vou experimentar o JQuery.

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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  :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado yoda.pt

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

Diz o que precisas que talvez possamos dar uma ajuda :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Podes elaborar um esquema gráfico, e deixar um trecho do código para ter uma ideia?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Eu bem disse que faltava o resto, por alguma razão. O que queres que ao clicar no remover ele faça? Que vá para outra página? Request Ajax?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora