Tuesday, January 31, 2012

Coding Untuk Hasilkan Kotak Menu atau "Dropdown / Select Box Navigation" dengan menggunakan JavaScript.


Navigasi Ringkas/ Simple Navigation

Berikut adalah "standard navigation" dengan




HTML Source:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</select>
</form>

Dengan "Radio Buttons".

Konsepnya hampir sama dengan yang di atas, bezanya ia menggunakan "Radio buttons dan "activation button.

Choose a destination:





HTML Source:
<form action="../">
<p><b>Choose a destination:</b><br>
<input type="RADIO" value="http://www.yahoo.com/" name="userChoice" id="navRadio01">
<label for="navRadio01">YAHOO</label><br>
<input type="RADIO" value="http://www.google.com/" name="userChoice" id="navRadio02">
<label for="navRadio02">GOOGLE</label><br>
<input type="RADIO" value="http://www.altavista.com/" name="userChoice" id="navRadio03">
<label for="navRadio03">ALTAVISTA</label><br>
<input type="RADIO" value="http://www.amazon.com/" name="userChoice" id="navRadio04">
<label for="navRadio04">AMAZON</label><br>
<input type="RADIO" value="http://artlung.com/" name="userChoice" id="navRadio05">
<label for="navRadio05">ARTLUNG</label><br>
<--the onclick value below must all be on one line-->
<input type="BUTTON"
value="Go there!"
onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i ){
if(ob[i].checked){window.open(ob[i].value,'_top');};}"></p>
</form>

Menu "Dropdown Navigation", Buka Dalam "New Tab"

HTML Source:
<form action="../">
<select name="myDestination">
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
<input type="button"
value="Open in New Window!"
onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>

Menu "Dropdown Navigation" Kepada Alamat E-mail

Choose a recipient address:

HTML Source:
<!-- initial version for email dropdown (c) 1999 Joe Crawford (joe(at)artlung.com) -->
<!-- coding tested and improved by Hayden Porter (hporter(at)uakron.edu) -->
<p><b>Choose a recipient address:</b></p>
<form action="../">
<select name="sendEmailTo">
<option value="mailto:joe@artlung.com">joe@artlung.com</option>
<option value="mailto:ArtLung@AOL.COM">ArtLung@AOL.COM</option>
<option value="mailto:webmaster@URMCargo.com">webmaster@URMCargo.com</option>
</select>
<input
type="button"
value="I've selected the recipient, Let's send mail!"
onclick="location.href=this.form.sendEmailTo.options[sendEmailTo.selectedIndex].value">
</form>
<!-- initial version for email dropdown (c) 1999 Joe Crawford (joe(at)artlung.com) -->
<!-- coding tested and improved by Hayden Porter (hporter(at)uakron.edu) -->

Menu "Dropdown Navigation" Kepada "New Window" Di Mana Saiz "New Window" Boleh Di Ubah


HTML Source:
<form action="../">
<--the onchange value below must all be on one line-->
<select name="myDestination"
onchange="this.form.WINDOW_NAMER.value++;
ob=this.form.myDestination;
window.open(ob.options[ob.selectedIndex].value
,'Window_Name'+this.form.WINDOW_NAMER.value,
'toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=400,height=300')">
<option>Choose a destination to open in a attribute-controlled popup window!</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
<!-- HIDDEN VARIABLE SO WE PROVIDE UNIQUE NAMES FOR THESE NEW WINDOWS -->
<!-- THUS AVOIDING THE "WHERE'S THAT WINDOW" PHENOMENON -->
<input name="WINDOW_NAMER" type="HIDDEN" value="1">
</form>

Menu "Dropdown Navigation" Kepada "iFrame"

Sila ke http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5 untuk fahami lebih lanjut tentang IFRAME.


HTML Source:
<select name="dest" onchange="window.open(this.options[this.selectedIndex].value,'myIFrame')">
<option>Choose a destination for your IFrame!</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
</form>

<iframe src="http://joecrawford.com/" name="myIFrame" width="400" height="200">
You can't see this because your browser does not support iframes.
</iframe>

Menu "Dropdown Navigation", Di Mana Terdapat Link Yang Boleh Di Buka Dengan "New Window" Serta Link Yang Boleh Di Buka Dengan "Current Window"
HTML Source:
<form action="../">
<select onchange="parseNavigation(this)">
<!-- in each option, the value should -->
<!-- include a pipe "|" character before each url, -->
<!-- to open in a new window, specify a window name -->
<!-- urls may be local -->
<option>Choose a destination to open in a attribute-controlled popup window!</option>
<option value="|http://www.yahoo.com/">YAHOO</option>
<option value="GoogleWin|http://www.google.com/">GOOGLE</option>
<option value="WSDWin|http://websandiego.org/">WEBSANDIEGO</option>
<option value="|http://www.altavista.com/">ALTAVISTA</option>
<option value="|http://www.amazon.com/">AMAZON</option>
<option value="ArtLungWin|http://artlung.com/">ARTLUNG</option>
</select>
</form>

Source Code:
<script type="text/javascript" language="JavaScript">
<!--
function parseNavigation(ob) {
// created by joe crawford october 2002
// http://artlung.com/lab/scripting/dropdown-only-some-new-window/
toBeBrokenDown = ob.options[ob.selectedIndex].value.split("|");

targetWindow = toBeBrokenDown[0];
targetURL = toBeBrokenDown[1];

if (targetWindow!=='') {
// if a new Window name is specified, then it will
// open in a new Window.
window.open(targetURL,targetWindow,'toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=400,height=300');
// if we open a new window, then we have to re-set
// the select box to the first option
// which should have no value
ob.selectedIndex = 0;
} else {
// or else it will open in the current window
window.open(targetURL,'_top')
}
}
//-->
</script>

Menu "Dropdown Navigation" Dengan Butang "GO"

HTML Source:
<form action="../">
<select name="mySelectbox">
<option value="">Choose a destination...</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
<input type="button" onclick="window.open(this.form.mySelectbox.options[this.form.mySelectbox.selectedIndex].value,'_top')" value="Go">
</form>

Menu/ "Dropdown Navigation" Dengan Butang Gambar "GO"
HTML Source:
<form action="/" name="goForm">
<select name="mySelectbox">
<option value="">Choose a destination...</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>
<a href="#Go" onclick="document.location.href=document.goForm.mySelectbox.options[document.goForm.mySelectbox.selectedIndex].value;"><img src="http://artlung.com/images/go.gif" value="Go" border="0" /></a>
</form>

*sumber diperolehi dari http://artlung.com/blog/
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)