navigazione tramite tasti freccia con php e mysql

antoniocangiano76

Nuovo Utente
27 Ago 2016
4
0
1
20
Salve, ho iniziato da poco a studiare php e vorrei porvi un quesito.
Vorrei realizzare un div nel quale visualizzare una query mysql (si tratta di una tabella di anagrafica clienti, quindi codice/regione sociale/etc) nel quale il record corrente sia evidenziato da un background-color diverso dagli altri e sia possibile, tramite tasti freccia della tastiera, muoversi da un record all'altro (il background-color segue quindi il movimento delle frecce). Ovviamente quando il record selezionato si trova sull'ultima riga del div e si preme la frecciaGIU', il div si deve aggiornare modificando l'elenco eliminado cioè la prima riga, scrollando verso l'alto le restanti e aggiungendo il record successivo, se presente. Idem quando ci si trova sulla prima riga e si preme frecciaSU.
Quindi, per chi se lo ricorda, come si usava fare tanti anni fa in clipper (sotto dos) o linguaggi simili con db3.
Avendo iniziato da pochissimo, sto incontrando notevole difficoltà a riprodurre un effeto del genere e sono anche scoraggiato dal fatto di non aver mai visto nulla del genere in un sito.
Vorrei domandarvi circa la fattibilità di un browse del genere e magari qualche dritta per realizzarlo.
Vorrei inoltre chiedervi se, secondo voi, l'idea di realizzare un gestionale con html/css/php/js/ajax/jquery/mysql nel quale l'uso del mouse sia facoltativo mentre sia possibile utilizzare solo la tastiera (o quasi) abbia senso.
Grazie
 

marino51

Utente Attivo
28 Feb 2013
3.039
192
63
Lombardia
lQuindi, per chi se lo ricorda, come si usava fare tanti anni fa ....
l'uso del mouse è "obbligato" ormai da anni, la tastiera è stata abbandonata per la "navigazione" sullo schermo
le funzionalità dei software sono sviluppate per rendere facile la programmazione, leggendo i movimenti del mouse
ti allego del codice (esempio che ho copiato) per vedere come viene gestito un menu e la funzionalità del mouse,
puoi copiarlo in un file, creandolo con "blocco note" e imponendo estensione html,
poi cliccandolo due volte viene eseguito dal browser di "default"

Vorrei realizzare un div nel quale visualizzare una query mysql...
se cerchi sul web "paginazione" ed i relativi termini inglesi, trovi molti esempi funzionanti, che puoi copiare ed applicare , con le opportune modifiche, alla tua necessità

realizzare un gestionale con html/css/php/js/ajax/jquery/mysql nel quale l'uso del mouse sia facoltativo mentre sia possibile utilizzare solo la tastiera (o quasi) abbia senso
no, l'orientamento comune è per il mouse

certo è tutto molto diverso dal clipper e analoghi

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>corretto utilizzo dei collegamenti</title>

<style type="text/css">

html,body{margin:0;padding:0; font-family:"Trebuchet MS", Georgia, Arial, Verdana;}

/* inizio menu */

#menu
{
    border:0;
    margin:0 auto;
    padding:0;
    width:800px;
    background-color:#ffffff;
    height:60px;
}

#underlinemenu{
    margin:0 auto;
    border:0;
    padding:0;
    float:none;
    background-color:#fff;
    height:60px;
}

#underlinemenu ul{
    margin: 0;
    font-size:13px;
    border: 1px solid #DFDFDF;
    background-color:#FF0000;
    border-width: 1px 0;
    border-left: 1px 0;
    letter-spacing:1px;

}

#underlinemenu ul li{
    display: inline;
}

#underlinemenu ul li a{
    float: left;
    color: black;
    font-weight: none;
    padding: 15px 15px 4px 15px;
    text-decoration: none;
}

#underlinemenu ul li a:hover{
    color: #6DAFDE;
    background-color: #ffffff;
    border-bottom: 4px solid #7BAD00;
    padding-bottom: 0;
}

/* fine menu */

#testo {
    margin:10px auto;
    border:0;
    padding:10px 0 30px 7px;
    float:none;
    height:60px;
    letter-spacing:2px;
    font-size: 15px;  
    width:800px;
    position:relative;
}

</style>

</head>

<body>
<div id="testo">Di seguito un breve esempio per mostrare il corretto utilizzo di collegamenti per una buona accessibilit&agrave;.</div>

    <div id="underlinemenu">
        <div id="menu">
            <ul>
                <li><a href="http://www.blographik.it/">HOME</a></li>
                <li><a href="http://www.blographik.it/che-cose-blographik/">CHI SIAMO</a></li>
                <li><a href="http://www.blographik.it/feed-rss/">FEED RSS</a></li>
                <li><a href="http://www.blographik.it/tags/">TAGS</a></li>      
                <li><a href="http://www.blographik.it/category/recensioni-siti-web/">RECENSIONI SITI WEB</a></li>
                <li><a href="http://www.blographik.it/contatti/">CONTATTI</a></li>      
            </ul>
        </div>
    </div>
</div>

</body>
</html>
 

antoniocangiano76

Nuovo Utente
27 Ago 2016
4
0
1
20
Ti ringrazio per i chiarimenti, mi rendo conto che oltre ad apprendere i nuovi linguaggi che sto studiando, dovrò anche disimparare una buona parte delle tecniche che conoscevo ed usavo.
Ho lavorato in clipper 5.2c per molti anni realizzando diversi progetti su commissione ed un software di gestione aziendale che ho poi commercializzato, il cui punto di forza era la velocità di utilizzo (ad es.: un operatore preparato poteva realizzare una fattura con 2/3 articoli in meno di 5 sec.).
Ovviamente ciò era possibile (senza sacrificare la completezza degli elementi) solo con un uso esclusivo e sapiente della tastiera e sacrificando il mouse che incredibilmente anche a quei tempi poteva interagire nelle applicazioni.
Poteva si, ma avrebbe rallentato; quindi per scelta di progettazione fu scelto di non usarlo.
Tutto ciò per spiegare la mia richiesta che probabilmente poteva sembrare un pò strana. Malgrado l'evidente orientamento attuale a favore del mouse, ci sono situazioni nelle quali una buona integrazione della tastiera potrebbe sveltire la compilazione di form complessi (come per una fattura). Per questo mi chiedevo se fosse possibile integrarla per gestire alcune funzioni (es.: navigazione in un menu dropdown tramite frecce, nel browse di una query, per gestire tasti di funzione).
Diversamente, se non fosse possibile, ho visto googlando un pò la procedura di infinite scroll realizzata in ajax/jquery/php e penso che andrà bene per il browse di una query mysql.
Ringrazio per la disponibilità e spero di poter dare presto anch'io il mio contributo al forum.
 

marino51

Utente Attivo
28 Feb 2013
3.039
192
63
Lombardia
sempre per la navigazione sullo schermo, verifica la disponibilità di funzioni javascript con/senza jquery per passare in automatico su campi (entità) successive, evitando per certe azioni sia mouse che tastiera

"menu dropdown tramite frecce" puoi aprirlo passando sopra il mouse (senza click) e
scegliere di conseguenza con un click, credo sia più funzionale della tastiera
implica più programmazione, ma saprai sfruttare il "riuso" del codice

"disimparare una buona parte delle tecniche che conoscevo ed usavo"
sono un poco in disaccordo ....
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Barra di navigazione con google HTML e CSS 1
Z Menù di navigazione responsivo HTML e CSS 0
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
I Url rewrite con .htaccess funziona ma poi mostra indirizzo "reale" nella barra di navigazione Apache 1
Max 1 Sito che blocca la navigazione su samsung s8+ Smartphone e tablet 0
H Condivisione posizione Google Maps e navigazione automatica Sviluppo app per Android 0
F Fissare la barra di navigazione a fondo pagina HTML e CSS 5
B chat php/javascript che perde info nella navigazione del sito. PHP 0
J Problema con link nella barra di navigazione HTML e CSS 1
A Navigazione ASP.NET 1
D [windows 8.1] Standby e navigazione Windows e Software 0
G Problemi menu di navigazione HTML e CSS 0
J Icone non allineate correttamente nella barra di navigazione HTML e CSS 2
L Effetto menu di navigazione. HTML e CSS 10
I creazione menù di navigazione con photoshop Photoshop 2
M Come creare navigazione stile Facebook Javascript 1
F Menu navigazione: evidenziare link al click HTML e CSS 2
A Navigazione jQuery [era: $(document).ready(function(){] jQuery 3
L Navigazione in Javascript (credo!) Javascript 1
A barra navigazione recordset PHP 1
M Barra navigazione jQuery, pulsante "illuminato fisso" jQuery 0
L Safari Mobile (iPhone): navigazione privata Smartphone e tablet 1
S Barra di Navigazione Dinamica PHP 14
P Navigazione Anonima e Affiliazioni SEO e Posizionamento 0
G barra di navigazione: come è stata fatta? [era: come è stato fatto?] Webdesign e Grafica 2
L Menù navigazione di una paginazione PHP 1
I Barra navigazione/menù HTML e CSS 24
I barra navigazione/menù HTML e CSS 0
A Html - css : domanda e aiuto per formattazione banner e navigazione HTML e CSS 1
C Quale browser di navigazione su internet preferite? Windows e Software 7
E Problemi di navigazione Windows e Software 3
B [Help] Menu navigazione laterale con testo curvo Javascript 2
P Tasti Navigazione MoveNext e MovePrevious, HELP!! Classic ASP 0
N suddividere una fotogallery in varie pagine con indice di navigazione PHP 1
M Mystartpage.it, portale per la navigazione facile Presenta il tuo Sito 3
K navigazione tra div nel sito con fade Javascript 2
B Navigazione di grandi immagini Javascript 1
B Navigazione un'immagine (panning - zoom) Flash 1
E Problema di collegamento della pagina alla barra di navigazione Webdesign e Grafica 3
J Navigazione filesystem da tastiera Javascript 0
S Div che segue la barra di navigazione,come?? Javascript 2
T barra di navigazione in asp Classic ASP 3
coteaz barre di navigazione, menù ecc Javascript 3
W rollover css per barra di navigazione basata su immagini HTML e CSS 7
M La barra di navigazione di un sito web HTML e CSS 1
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
A form PHP prenotazione tramite query PHP 2
M Risolto Redirect tramite DNS Domini 1
R Importazione csv su mysql tramite array PHP 2

Discussioni simili