Se si desidera visualizzare il menu come una fila elegante di immagini è possibile scorrere e fare clic su, è necessario implementare un menu agganciabile JavaScript. Quando si posiziona il cursore del mouse su una delle piccole immagini, si espande e si può fare clic per passare a un'altra pagina. Uno script di menu agganciabile è utile per aggiungere funzionalità al tuo sito web. Inoltre, viene visualizzato correttamente in tutti i browser Web e si può usare ovunque sulle tue pagine.

istruzione

1 Aprire un editor di testo, come Blocco note o WordPad per creare un nuovo documento di testo.

2 Inserire questo codice dentro l'editor:

Funzione MacStyleDock (nodo, imageDetails, MinimumSize, MaximumSize, gamma) {
var iconsNode = document.createElement ( 'div');
node.appendChild (iconsNode);
var reflectedIconsNode = document.createElement ( 'div');
node.appendChild (reflectedIconsNode);
iconsNode.style.textAlign = 'center';
reflectedIconsNode.style.textAlign = 'center';

iconsNode.style.height = maximumSize + 'px';

reflectedIconsNode.style.height = MaximumSize + 'px';
var maximumWidth = 0;
var scala = 0;

var closeTimeout = null;

var closeInterval = null;
var openInterval = null;

var images = [];

var iconNodes = [];
var reflectedIconNodes = [];
var iconSizes = [];
for (var i = 0; i <imageDetails.length; i ++) {

iconNodes[i] = document.createElement('img');
iconNodes[i].style.position = 'relative';
iconSizes[i] = minimumSize;
reflectedIconNodes[i] = document.createElement('img');
updateIconProperties(i);
iconsNode.appendChild(iconNodes[i]);
reflectedIconsNode.appendChild(reflectedIconNodes[i]);
if (iconNodes[i].addEventListener){
iconNodes[i].addEventListener('mousemove', processMouseMove, false);
iconNodes[i].addEventListener('mouseout', processMouseOut, false);
iconNodes[i].addEventListener('click', imageDetails[i].onclick, false);
}else if (iconNodes[i].attachEvent){
iconNodes[i].attachEvent('onmousemove', processMouseMove);
iconNodes[i].attachEvent('onmouseout', processMouseOut);
iconNodes[i].attachEvent('onclick', imageDetails[i].onclick);
}
for (var j = 0; j < imageDetails[i].sizes.length; j++){
var image = document.createElement('img');
image.setAttribute(
'src',
imageDetails[i].name
+ imageDetails[i].sizes[j]
+ imageDetails[i].extension);
images.push(image);
}

}
updateIconProperties funzione (indice) {

var size = minimumSize + scale * (iconSizes[index] - minimumSize);
var sizeIndex = 0;
while (imageDetails[index].sizes[sizeIndex] < size
&& sizeIndex + 1 < imageDetails[index].sizes.length){
sizeIndex++;
}
if (size == maximumSize){
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ maximumSize
+ '-full'
+ imageDetails[index].extension);
}else{
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ imageDetails[index].extension);
}
reflectedIconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ '-reflection'
+ imageDetails[index].extension);
iconNodes[index].setAttribute('width', size);
iconNodes[index].setAttribute('height', size);
reflectedIconNodes[index].setAttribute('width', size);
reflectedIconNodes[index].setAttribute('height', size);
iconNodes[index].style.marginTop = (maximumSize - size) + 'px';
reflectedIconNodes[index].style.marginBottom = (maximumSize - size) + 'px';

}

3 Aggiunge questo codice:

Funzione processMouseMove (e) {

window.clearTimeout(closeTimeout);
closeTimeout = null;
window.clearInterval(closeInterval);
closeInterval = null;
if (scale != 1 && !openInterval){
openInterval = window.setInterval(
function(){
if (scale < 1) scale += 0.125;
if (scale >= 1){
scale = 1;
window.clearInterval(openInterval);
openInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
}

se e = window.event (E!);

var target = e.target || e.srcElement;
var index = 0;
while (iconNodes[index] != target) index++;
var across = (e.layerX || e.offsetX) / iconSizes[index];
if (across){
var currentWidth = 0;
for (var i = 0; i < iconNodes.length; i++){
if (i < index - range || i > index + range){
iconSizes[i] = minimumSize;
}else if (i == index){
iconSizes[i] = maximumSize;
}else if (i < index){
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across + 1) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}else{
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}
}
if (currentWidth > maximumWidth) maximumWidth = currentWidth;
if (index >= range
&& index < iconSizes.length - range
&& currentWidth < maximumWidth){
iconSizes[index - range] += Math.floor((maximumWidth - currentWidth) / 2);
iconSizes[index + range] += Math.ceil((maximumWidth - currentWidth) / 2);
}
for (var i = 0; i < iconNodes.length; i++) updateIconProperties(i);
}

}
funzione processMouseOut () {

if (!closeTimeout && !closeInterval){
closeTimeout = window.setTimeout(
function(){
closeTimeout = null;
if (openInterval){
window.clearInterval(openInterval);
openInterval = null;
}
closeInterval = window.setInterval(
function(){
if (scale > 0) scale -= 0.125;
if (scale <= 0){
scale = 0;
window.clearInterval(closeInterval);
closeInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
},
100);
}

}
}

4 Salvare il file nella cartella contenente la pagina HTML che si desidera inserire il dock in e il nome "dockable_menu.js". L'estensione ".js" è obbligatoria per cambiare il file da un documento di testo in un file JavaScript.

5 Apri la pagina web in qualsiasi editor di testo o HTML. Inserire questo codice tra il "<head>" e "</ head>" tag per eseguire lo script:

<Script type = "text / javascript" src = "dockable_menu.js"> </ script>

6 Inserire questo codice in qualsiasi punto tra il "<body>" e "</ body>" tag:

<Div id = "dock"> </ div>

Il bacino deve essere inserito all'interno di questa struttura DIV.

7 Inserire il codice tra "<div id =" dock ">" e "</ div>" tag:

<Script type = "text / javascript">
var = new dock MacStyleDock (

document.getElementById('dock'),
[
{
name : 'image1',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
window.location = 'www.example.com';
}
},
{
name : 'image2',
extension : '.bmp',
sizes : [32, 64],
onclick : function(){
alert('You clicked on the wrong icon');
}
}
],
32,
64,
2);

</ Script>

È possibile inserire il maggior numero di elementi tra il "[" e "]" tag come si desidera. Sostituire "image1" con il nome esatto dell'immagine, senza la sua estensione. Sostituire ".jpg" con l'estensione della vostra immagine. Nella linea "dimensioni", sostituire "32" con dimensione dei pixel minima dell'immagine e "64" con dimensione massima dei pixel dell'immagine. Utilizzare "window.location" nella funzione "funzione" per collegare l'immagine di una pagina web e di "alert" se si desidera solo per visualizzare un messaggio. Sostituire "32" e "64" sotto il tag "]" con la dimensione minima e massima del icone del dock. Sostituire "2" con il numero di icone che avete nel vostro dock.

8 Salvare la pagina web e caricarlo nel browser Web per testare il menu agganciabile.