Thaimisc.com : ทำเมนูแบบมีปุ่มกดเพื่อสุ่มเลือก
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำเมนูแบบมีปุ่มกดเพื่อสุ่มเลือก
เขียนโดย Poj , 24-04-2007
ทำเมนูแบบกดปุ่มเพื่อสุ่มเลือก สามารถนำไปใช้งานได้ทั้งแบบ List และ Jump เมนู ลองดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script type="text/javascript">

/***********************************************
* Animated Random Option Combo- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

var animatedList={

navigate:function(selectId){
this.selectObj=document.getElementById(selectId)
window.location=this.selectObj[this.selectObj.selectedIndex].value
},

randomizeInit:function(selectId){
this.selectObj=document.getElementById(selectId)
this.curframe=0
this.optionscount=this.selectObj.options.length
//calculate number of frames to animate (cycle through options before settling on one)
this.maxframes=Math.floor(Math.random()*this.optionscount)+Math.floor(Math.random()*this.optionscount)
this.randomize()
},

randomize:function(){
if (this.curframe<this.maxframes)
this.selectObj.selectedIndex=this.settledIndex=(this.curframe<this.optionscount)? this.curframe : this.curframe-this.optionscount
else{ //settle on and select this option
this.selectObj.selectedIndex=(this.selectObj.selectedIndex==-1)? this.settledIndex : -1
}
this.curframe++
if (this.curframe<this.maxframes+4) //Keep running this function until "maxframes" cycle plus 4 (4 being cycle for highlighting selected option)
setTimeout("animatedList.randomize()", 100)
else
window.location=this.selectObj[this.selectObj.selectedIndex].value
}

}

</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<form>
<select id="webdevlinks" size="6" onChange="animatedList.navigate('webdevlinks')">
<option value="http://www.javascriptkit.com">JavaScript Kit</option>
<option value="http://www.javascriptkit.com/jsref/">JavaScript Reference</option>
<option value="http://www.javascriptkit.com/domref/">DOM Reference</option>
<option value="http://www.codingforums.com">CodingForums.com</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
</select><br />
<input type="button" onClick="animatedList.randomizeInit('webdevlinks')" value="Random Link!" />
</form>

<form>
<select id="newslinks" size="1" onChange="animatedList.navigate('newslinks')">
<option value="http://www.cnn.com/">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://news.yahoo.com/">Yahoo News</option>
</select> <input type="button" onClick="animatedList.navigate('newslinks')" value="Go" /> <input type="button" onClick="animatedList.randomizeInit('newslinks')" value="Random" />
</form>

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com