Example:External Javascript&Creating a menu bar

Visualforce Examples

Example 1: External Javascript:
Here the external javascript file name is jsTestingExt.

page:
<apex:page sidebar=”false”>
<apex:includeScript value=”{!$Resource.jsTestingExt}”/>
<apex:form >
<apex:commandButton value=”First” onclick=”one()”/>
<apex:commandButton value=”Second” onclick=”two()”/>
<apex:commandButton value=”Three” onclick=”three()”/>
</apex:form>
</apex:page>
.js file code:
function one()
{
alert(‘One’);
}
function two()
{
alert(‘two’);
}
function three()
{
alert(‘three’);
}

Example 2 : Creating a menu bar:
<apex:page >
<script type=”text/javascript”>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility=”visible”;
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility=”hidden”;
}
</script>
<style>
body{font-family:arial;}
table{font-size:100%;background:white;width:50px;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<apex:form >
<table >
<tr bgcolor=”#FF8080″>
<td onmouseover=”showmenu(‘tutorials’)” onmouseout=”hidemenu(‘tutorials’)”>
Action
<table class=”menu” id=”tutorials” width=”120″>
<tr><td class=”menu”><a href=”https://www.gmail.com”>GMail</a></td></tr>
<tr><td class=”menu”><a href=”https://salesforce.com”>salesforce</a></td></tr>
</table></td></tr></table>
</apex:form>
</apex:page>