L'esigenza primaria era quella di chiudere tutto i jQuery UI Accordion appena viene scrollata la pagina con la rotella del mouse.
Non chiedetemi per quale motivo mi è stata fatta questa richiesta perchè non la capisco.
Però il cliente ha sempre ragione.....
Oggi vediamo un piccolo trucco per controllare se un jQuery UI Accordion è aperto o chiuso.
Per farlo useremo jQuery e le proprietà CSS.
Questo perchè quando un accordion è aperto ha alcune classi, e viceversa.
L'ultima versione di jQuery ci mette a disposizione l'autocomplete.
In pratica in una casella di testo possiamo ottenere l'autocompletamento della ricerca, tipo Google per intenderci.
Metterlo in pratica è molto facile.
Per capire il funzionamento base guardate l'esempio sulla pagina ufficiale.
Noi passeremo direttamente a caricare i risultati prendendoli da PHP e MySQL.
Come al solito per prima cosa carichiamo il necessario:
<link type="text/css" rel="stylesheet" href="template/css/smoothness/jquery-ui-1.8.19.custom.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.19.custom.min.js"></script>
Nel mio caso sto usando il tema Smoothness.
E' indispensabile avere le ultime versioni sia di jQuery che di jQuery UI.
Poi passiamo alla parte PHP/MySQL.
Create una pagina che dovrà eseguire una query e trasformare l'output in JSON.
Io ho usato PDO:
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';
try {
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
} catch(PDOException $e) {
echo $e->getMessage();
}
$cmd = 'SELECT * FROM articoli WHERE articolo_codice LIKE :term GROUP BY articolo_codice ORDER BY articolo_codice';
$term = "%" . $_GET['term'] . "%";
$result = $conn->prepare($cmd);
$result->bindValue(":term", $term);
$result->execute();
$arrayArticoli = array();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$rowArray['label'] = $row['articolo_codice'];
$rowArray['value'] = $row['articolo_codice'];
array_push($arrayArticoli, $rowArray);
}
$conn = NULL;
echo json_encode($arrayArticoli);
Ho usato PDO perchè mi piace di più, ma potete usare quello che volete.
Le finestre modali sono usate in più ambiti.
Questo perchè al suo interno è possibile mettere quello che vogliamo:
Se avete jQuery UI potete sfruttare la sua libreria, altrimenti è possibile ottenere lo stesso effetto in altre maniere.
Useremo jQuery e un pò di CSS.
Cominciamo dalla pagina HTML.
Dopo aver incluso jQuery:
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close">Close it</a><br/><br/>
VOSTRO CONTENUTO
</div>
<div id="mask"></div>
</div>
Un semplice div dove all'interno abbiamo un link per chiudere la finestra, il contenuto che vi serve e il div mask che serve per riempire la finestra.
Il CSS sarà una cosa del genere:
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes #dialog {
width:700px;
height:700px;
padding:10px;
background-color:#ffffff;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
z-index:9999;
padding:20px;
}
Nulla di particolare.
DISCLAIMER: questo articolo è stato interamente riscritto!
Quello che vedremo oggi è come ordinare una lista solamente trascinandola.
L'ordinamento verrà anche salvato in tempo reale su db; quello che di cui abbiamo bisogno è di un campo apposito sulla tabella, di AJAX per inviare una richiesta e di jQuery UI (o simili) per l'ordinamento.
Cominciamo quindi da qui; nell'head della pagina:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
A questo punto occupiamoci della pagina.
Prima di tutto ci serve una lista, che di sicuro viene presa da database:
<ul id="ul_class">
<?php foreach ($connMod->getClassificazionePerCollezione($coll) as $var): ?>
<li id="class_<?php echo $var['class_id']; ?>" class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<?php echo $var['class_nome']; ?>
</li>
<?php endforeach; ?>
</ul>
Notate che ogni voce della lista ha un id personalizzato, composto da una parte fissa più l'id preso da db.
In questo modo possiamo serializzarlo e passare i relativi valori a database.
jQuery UI è la libreria jQuery per la gestione della User Interface (UI).
Ha molti componenti interessanti, e di uno ho già parlato.
Oggi invece affrontiamo il Datepicker, che ci aiuta a inserire la data.
Questo può essere molto utile per il formato giusto, che deve essere allineato a quello del db dove salviamo la data.
Nel mio caso uso un db MySQL con un campo Date che ha questa forma: yyyy-mm-dd.
Prima di tutto dobbiamo scaricare jQuery e jQuery UI.
Sul secondo possiamo anche sceglliere il colore della grafica e verrà scaricato anche un CSS.
Poi dobbiamo richiamare le librerie e il CSS:
<link rel="stylesheet" href="../template/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.14.custom.min.js"></script>
Una volta fatto questo la pagina dovrà sarà simile a questa: