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