Skip to main content
adicionou 712 caracteres ao conteúdo
Fonte Link
StillBuggin
  • 2mil
  • 11
  • 26

No script abaixo, a última coluna tem um menu de contexto. Quando você clicar nele, aparecerão as opções de bloquear e desbloquear. Finalmente, quando você clicar na opção desejada, o valor dela será mostrado, aí você pode fazer o que quiser com ele.

Dica: faça bom uso das funções callback disponíveis no plugin.

<?php

$db = mysqli_connect(
    DB_SERVIDOR,
    DB_USUARIO,
    DB_SENHA,
    DB_BANCO_DE_DADOS
);

if(! $db){
    echo 'error';
   include exit;
}'conexao.php';

$query = 'select first_name, last_name from sakila.actor limit 10';

$result = mysqli_query($db, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <title>:: Teste ::<Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stlesheet"rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <link rel="stlesheet"rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-sm-5" id="login-container">
                <table class="table table-condensed table-bordered">
                    <?php
                    while ($r = mysqli_fetch_array($result)) {
                    ?>
                        <tr>
                            <td><?php echo $r['first_name']; ?></td>
                            <td class="context-menu-one"><?php echo $r['last_name']; ?></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.ui.position.min.js"></script>
        <script>
            $(function () {
                $.contextMenu
                function createSomeMenu() {
                    selector:return '.context-menu-one',{
                        callback: function (key, options) {
                            var m = "clicked: " + key;
                            window.console && console.log(m) || alert(m);
                        },
                        items: {
                        "edit"    "bloquear": {name: "Edit""Bloquear", icon: "edit"},
                        "cut"    "desbloquear": {name: "Cut""Desbloquear", icon: "cut"},
                        copy:}
                    };
                }
                
                $('.context-menu-one').on('mouseup', function(e){name: 
 "Copy"                   var $this = $(this);
                    // store a callback on the trigger
                    $this.data('runCallbackThingie', icon:createSomeMenu);
 "copy"}                   var _offset = $this.offset(),
                        "paste":position = {name
                            x: "Paste"_offset.left + 10, icon
                            y: "paste"_offset.top + 10
                        },
                    // open the contextMenu "delete":asynchronously
                    setTimeout(function(){name: "Delete"$this.contextMenu(position); }, icon:1000);
 "delete"               },);

                // setup context menu
      "sep1"          $.contextMenu({
                    selector: "-------'.context-menu-"one',
                    trigger: 'none',
   "quit": {name: "Quit", icon              build: function ($trigger, e) {
                        // pull a callback returnfrom 'context-menu-iconthe context-menu-icon-quit';trigger
                        }}return $trigger.data('runCallbackThingie')();
                    }
                });
            });
        </script>
    </body>
</html>

<?php

$db = mysqli_connect(
    DB_SERVIDOR,
    DB_USUARIO,
    DB_SENHA,
    DB_BANCO_DE_DADOS
);

if(! $db){
    echo 'error';
    exit;
}

$query = 'select first_name, last_name from sakila.actor limit 10';

$result = mysqli_query($db, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <title>:: Teste ::</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stlesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <link rel="stlesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-sm-5" id="login-container">
                <table class="table table-condensed table-bordered">
                    <?php
                    while ($r = mysqli_fetch_array($result)) {
                    ?>
                        <tr>
                            <td><?php echo $r['first_name']; ?></td>
                            <td class="context-menu-one"><?php echo $r['last_name']; ?></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.js"></script>
        
        <script>
            $(function () {
                $.contextMenu({
                    selector: '.context-menu-one',
                    callback: function (key, options) {
                        var m = "clicked: " + key;
                        window.console && console.log(m) || alert(m);
                    },
                    items: {
                        "edit": {name: "Edit", icon: "edit"},
                        "cut": {name: "Cut", icon: "cut"},
                        copy: {name: "Copy", icon: "copy"},
                        "paste": {name: "Paste", icon: "paste"},
                        "delete": {name: "Delete", icon: "delete"},
                        "sep1": "---------",
                        "quit": {name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }}
                    }
                });
            });
        </script>
    </body>
</html>

No script abaixo, a última coluna tem um menu de contexto. Quando você clicar nele, aparecerão as opções de bloquear e desbloquear. Finalmente, quando você clicar na opção desejada, o valor dela será mostrado, aí você pode fazer o que quiser com ele.

Dica: faça bom uso das funções callback disponíveis no plugin.

<?php
include 'conexao.php';

$query = 'select first_name, last_name from sakila.actor limit 10';

$result = mysqli_query($db, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <title>:: Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-sm-5" id="login-container">
                <table class="table table-condensed table-bordered">
                    <?php
                    while ($r = mysqli_fetch_array($result)) {
                    ?>
                        <tr>
                            <td><?php echo $r['first_name']; ?></td>
                            <td class="context-menu-one"><?php echo $r['last_name']; ?></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.ui.position.min.js"></script>
        <script>
            $(function () {
                
                function createSomeMenu() {
                    return {
                        callback: function(key, options) {
                            var m = "clicked: " + key;
                            window.console && console.log(m) || alert(m);
                        },
                        items: {
                            "bloquear": {name: "Bloquear", icon: "edit"},
                            "desbloquear": {name: "Desbloquear", icon: "cut"}
                        }
                    };
                }
                
                $('.context-menu-one').on('mouseup', function(e){ 
                    var $this = $(this);
                    // store a callback on the trigger
                    $this.data('runCallbackThingie', createSomeMenu);
                    var _offset = $this.offset(),
                        position = {
                            x: _offset.left + 10, 
                            y: _offset.top + 10
                        }
                    // open the contextMenu asynchronously
                    setTimeout(function(){ $this.contextMenu(position); }, 1000);
                });

                // setup context menu
                $.contextMenu({
                    selector: '.context-menu-one',
                    trigger: 'none',
                    build: function($trigger, e) {
                        // pull a callback from the trigger
                        return $trigger.data('runCallbackThingie')();
                    }
                });
            });
        </script>
    </body>
</html>
Fonte Link
StillBuggin
  • 2mil
  • 11
  • 26

Eu usei as amostras do banco de dados Sakila do MySQL.

<?php

$db = mysqli_connect(
    DB_SERVIDOR,
    DB_USUARIO,
    DB_SENHA,
    DB_BANCO_DE_DADOS
);

if(! $db){
    echo 'error';
    exit;
}

$query = 'select first_name, last_name from sakila.actor limit 10';

$result = mysqli_query($db, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <title>:: Teste ::</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stlesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <link rel="stlesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.css">
    </head>
    <body>
        <div class="container">
            <div class="col-sm-5" id="login-container">
                <table class="table table-condensed table-bordered">
                    <?php
                    while ($r = mysqli_fetch_array($result)) {
                    ?>
                        <tr>
                            <td><?php echo $r['first_name']; ?></td>
                            <td class="context-menu-one"><?php echo $r['last_name']; ?></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.0/jquery.contextMenu.min.js"></script>
        
        <script>
            $(function () {
                $.contextMenu({
                    selector: '.context-menu-one',
                    callback: function (key, options) {
                        var m = "clicked: " + key;
                        window.console && console.log(m) || alert(m);
                    },
                    items: {
                        "edit": {name: "Edit", icon: "edit"},
                        "cut": {name: "Cut", icon: "cut"},
                        copy: {name: "Copy", icon: "copy"},
                        "paste": {name: "Paste", icon: "paste"},
                        "delete": {name: "Delete", icon: "delete"},
                        "sep1": "---------",
                        "quit": {name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }}
                    }
                });
            });
        </script>
    </body>
</html>

O código ficou como pode ser visto. Eu não tomei precaução alguma com o PHP, porque o objetivo era trazer os dados do banco da dados.