Il legame Oracle Apex e Javascript
permette l'utilizzo di molteplici script per realizzare differenti tipologie di
menù. Un semplice e funzionale menu da implementare riguarda il
FishEye menu o menu ad 'occhio di pesce' che risulta anche molto utile
nel caso di numero di icone elevato dal momento che consente di focalizzare
sempre l'icona in primo piano.
Lo script necessario
all'implementazione del menù FishEye è scaricabile da qui.
Realizziamo una
semplice web application in Oracle Apex che chiameremo AppFishEye e creiamo la Html page P_AppFishEye.
Editiamo le proprietà della page P_AppFishEye ed in particolare nella form Html header inseriamo il seguente codice che localizza lo script interface.js per l'animazione del menu fisheye:
------------------------------------------------------------------------------------------------------------
Editiamo le proprietà della page P_AppFishEye ed in particolare nella form Html header inseriamo il seguente codice che localizza lo script interface.js per l'animazione del menu fisheye:
------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src=#WORKSPACE_IMAGES#interface.js" type="text/javascript"></script>
</head>
<html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
<head>
<script src=#WORKSPACE_IMAGES#interface.js" type="text/javascript"></script>
</head>
<html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Mediante la sezione Shared Components procediamo quindi al caricamento nella Workspace del file interface.js e del file interface-fisheye.css:
Alla nostra applicazione aggiungiamo la region R_AppFishEye, editiamo quindi le proprietà ed inseriamo nella parte source il seguente codice:
------------------------------------------------------------------------------------------------------
<HTML>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apex and Fisheye menù </title>
<script type="text/javascript" src="#WORKSPACE_IMAGES#interface.js"></script>
<link type="text/css" href="#WORKSPACE_IMAGES#interface-fisheye.css" rel="stylesheet">
</head>
<body>
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES#appf_1.jpg" width="30" /><span>Home</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_2.jpg " width="30" /><span>Email</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_3.jpg " width="30" /><span>Display</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_4.jpg " width="30" /><span>Clock</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_5.jpg " width="30" /><span>Web</span></a>
<a href="f?p=103:2:&APP_SESSION." class="fisheyeItem"><img src="#WORKSPACE_IMAGES#home.png" width="30" /><span>Home</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_6.jpg " width="30" /><span>Email</span></a>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</HTML>
----------------------------------------------------------------------------------------------------------
Il codice inserito definisce il div della html region dove saranno richiamate in modalità fisheye menù le icone (caricate nella Workspace sempre attraverso la sezione Shared Components) indicate nel codice, appf_1.jpg, appf_2.jpg,etc.
Qui è visibile il semplice menu Fisheye realizzato.
Al prossimo post.....su Apex
Salvatore Bartucci
Nessun commento:
Posta un commento