现在用下拉式菜单做友情链接是非常流行的,而且一般有两种形式:一种是选择后按个链接按钮再开始导航,还有更方便的一种是直接点击后就开始导航。目前主流的还是后者,所以今天我也只讨论第二种的方式...
其实第二种方式的实现方法现在有许多种,而且复杂程度各异,代码长短区别很大。可以在本页面打开,也可以在弹出窗口中打开,而且对于弹出窗口的形式又可以是多种多样,所以整个来说,真的是很复杂的...
一、现在就为大家介绍一种最简单,也是最实用的实现方式,而且灵活性也很强,一目了然!!!
<FORM>
<SELECT onchange="window.open(options[selectedIndex].value,'_self')">
<OPTION selected>请选择链接
<OPTION value=http://www.163.com/>网易
<OPTION value=http://www.sina.com.cn/>新浪网
<OPTION value=http://www.jzzy.com>建站资源
</SELECT>
</FORM>
代码其实没有什么可解释的,指onchange(重新选择)后,window.open(打开窗口),options指选项,[selectedIndex].value指选择value中的相应链接在窗口中打开,其实这段代码最重要的部分其实是_self,当然它也可以是_blank,意思我想只要熟悉HTML的朋友都明白,是指是否在新窗口中打开相应链接,_self是指就是本页打开,_blank是指在弹出新窗口中打开...
大家可能觉得上面这些代码实在是太简单了,但是它的实用性却是很可贵的,代码又短又明了,你一定会感叹:"原来下拉菜单可以这么简单的",其实就是这么简单......
二、上面只讲了是否在新窗口中打开链接,如果要对弹出窗口的各个参数进行控制,该怎么做呢?别急,看完下面的你的问题也就解决了......
<script language="JavaScript">
<!--
DestinationAndTitle=new Array() //设置一个数组
DestinationAndTitle[0]="http://www.163.com/*网易"
DestinationAndTitle[1]="http://www.sohu.com/*搜狐"
DestinationAndTitle[2]="http://www.jzzy.com/*建站资源网"
//以上设置几组相关链接,注意:数目可以任意增加,所以这里的灵活性也很强
Top=0;
Left=0;
Height=400;
Width=600;
//以上设置打开窗口的长、宽以及方位控制,离上面与左面的距离
ToolBar=0; //工具条
Location=0;
Directories=0;
Status=0; //状态栏条
MenuBar=0; //菜单条
Scroll=0; //滚动条
Resize=0; //鼠标是否可以拉动放大、缩小窗口
//以上设置打开窗口的属性,1=yes, 0=no
function PopUp(){ //设置一个打开窗口的函数
var url=document.F.S.options[document.F.S.options.selectedIndex].value;
//设置打开窗口的一个数,注意这里的F.S是下面表间与select的具体name,要一一对应
if (url != ''){
if (!window.popupwin || popupwin.closed)
popupwin=open(url,"","top="+Top+",left="+Left+",width="+Width+", location="+Location+",toolbar="+ToolBar+", menubar="+MenuBar+"scrollbars="+Scroll+",resizable="+Resize+""); //读取先前控制的参数,打开窗口
else{
popupwin.close(); //有新窗口打开时,关闭一个旧窗口
popupwin=open(url,"","top="+Top+",left="+Left+",
width="+Width+",height="+Height+",status="+Status+",
directories="+Directories+",location="+Location+",
toolbar="+ToolBar+",menubar="+MenuBar+"scrollbars="+Scroll+",resizable="+Resize+""); //打开一个窗口
}
}
else return false;
}
//上面代码是控制链接始终在一个弹出窗口中
document.write("<form name='F'><select name='S'
onchange=PopUp()> <option value='#'>请选择链接</option>");//一段HTML参数插入,只是用javascript实现
for (i=0; i < DestinationAndTitle.length; i++){ //这里是显示多个下拉链接的方式
var urlMsg=DestinationAndTitle[i].split('*') //之间用*号分开
document.write("<option value="+urlMsg[0]+">"+urlMsg[1])} //用了一个i参数递增实现下拉菜单
document.write("</select></form>");
//-->
</script>
这段代码有点长了,但是它却成功地实现了对窗口方位、大小及相关属性的控制,还有一个很重要的特点是:当弹出窗口后,你选择另外一个链接,打开的链接会在已经弹出的窗口出打开,不会象上一例一样无限制地一直打开新窗口..
其实第二种方式的实现方法现在有许多种,而且复杂程度各异,代码长短区别很大。可以在本页面打开,也可以在弹出窗口中打开,而且对于弹出窗口的形式又可以是多种多样,所以整个来说,真的是很复杂的...
一、现在就为大家介绍一种最简单,也是最实用的实现方式,而且灵活性也很强,一目了然!!!
<FORM>
<SELECT onchange="window.open(options[selectedIndex].value,'_self')">
<OPTION selected>请选择链接
<OPTION value=http://www.163.com/>网易
<OPTION value=http://www.sina.com.cn/>新浪网
<OPTION value=http://www.jzzy.com>建站资源
</SELECT>
</FORM>
代码其实没有什么可解释的,指onchange(重新选择)后,window.open(打开窗口),options指选项,[selectedIndex].value指选择value中的相应链接在窗口中打开,其实这段代码最重要的部分其实是_self,当然它也可以是_blank,意思我想只要熟悉HTML的朋友都明白,是指是否在新窗口中打开相应链接,_self是指就是本页打开,_blank是指在弹出新窗口中打开...
大家可能觉得上面这些代码实在是太简单了,但是它的实用性却是很可贵的,代码又短又明了,你一定会感叹:"原来下拉菜单可以这么简单的",其实就是这么简单......
二、上面只讲了是否在新窗口中打开链接,如果要对弹出窗口的各个参数进行控制,该怎么做呢?别急,看完下面的你的问题也就解决了......
<script language="JavaScript">
<!--
DestinationAndTitle=new Array() //设置一个数组
DestinationAndTitle[0]="http://www.163.com/*网易"
DestinationAndTitle[1]="http://www.sohu.com/*搜狐"
DestinationAndTitle[2]="http://www.jzzy.com/*建站资源网"
//以上设置几组相关链接,注意:数目可以任意增加,所以这里的灵活性也很强
Top=0;
Left=0;
Height=400;
Width=600;
//以上设置打开窗口的长、宽以及方位控制,离上面与左面的距离
ToolBar=0; //工具条
Location=0;
Directories=0;
Status=0; //状态栏条
MenuBar=0; //菜单条
Scroll=0; //滚动条
Resize=0; //鼠标是否可以拉动放大、缩小窗口
//以上设置打开窗口的属性,1=yes, 0=no
function PopUp(){ //设置一个打开窗口的函数
var url=document.F.S.options[document.F.S.options.selectedIndex].value;
//设置打开窗口的一个数,注意这里的F.S是下面表间与select的具体name,要一一对应
if (url != ''){
if (!window.popupwin || popupwin.closed)
popupwin=open(url,"","top="+Top+",left="+Left+",width="+Width+", location="+Location+",toolbar="+ToolBar+", menubar="+MenuBar+"scrollbars="+Scroll+",resizable="+Resize+""); //读取先前控制的参数,打开窗口
else{
popupwin.close(); //有新窗口打开时,关闭一个旧窗口
popupwin=open(url,"","top="+Top+",left="+Left+",
width="+Width+",height="+Height+",status="+Status+",
directories="+Directories+",location="+Location+",
toolbar="+ToolBar+",menubar="+MenuBar+"scrollbars="+Scroll+",resizable="+Resize+""); //打开一个窗口
}
}
else return false;
}
//上面代码是控制链接始终在一个弹出窗口中
document.write("<form name='F'><select name='S'
onchange=PopUp()> <option value='#'>请选择链接</option>");//一段HTML参数插入,只是用javascript实现
for (i=0; i < DestinationAndTitle.length; i++){ //这里是显示多个下拉链接的方式
var urlMsg=DestinationAndTitle[i].split('*') //之间用*号分开
document.write("<option value="+urlMsg[0]+">"+urlMsg[1])} //用了一个i参数递增实现下拉菜单
document.write("</select></form>");
//-->
</script>
这段代码有点长了,但是它却成功地实现了对窗口方位、大小及相关属性的控制,还有一个很重要的特点是:当弹出窗口后,你选择另外一个链接,打开的链接会在已经弹出的窗口出打开,不会象上一例一样无限制地一直打开新窗口..