QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

js教程

Javascript实例教程(1)创建弹出式窗口和创建折叠式

 admin  2013-10-11 10:10:00

    利用javascript创建弹出式窗口
   利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口。你可以设置这个浏览器窗口的一些属性,如高度、宽度以及是否让该窗口有一个状态条或者工具条。在下面的例子中,我将窗口设置为:350 x 400,即高度为350像素,宽度为400像素;其中也包括了另外的一些设置,如滚动条;而将其它的设置(如状态条、菜单条)都设置为没有(no)。


   下面是具体的代码,你可以将它放置到网页的前面:

  1. <SCRIPT LANGUAGE = "JavaScript"> 
  2. function CreateWindow() 
  3. msgWindow=window.open("pop_win.html","displayWindow", 
  4. "toolbar=no,width=350,height=400,directories=no
  5. status=no,scrollbars=yes,resize=no,menubar=no") 
  6. </SCRIPT> 

    仔细体会一下这段代码,其实就只用到一个window.open函数,是不是很简单呀!你也许会问:那怎么调用这段代码呢?其实你不用着急,下面马上会给出:
<FORM><INPUT TYPE = "button" VALUE = "创建窗口"
onClick = "CreateWindow()"></FORM>

创建折叠式导航菜单

为了创建折叠式的导航菜单,你可以在网页的最前面部分以下代码:

  1. <SCRipT LANGUAGE="javaScript"> 
  2. <!-- Begin 
  3. function formHandler() 
  4. var URL = document.form.site.options 
  5. [document.form.site.selectedIndex].value; 
  6. window.location.href = URL
  7. // End --> 
  8. </SCRIPT> 

   那在网页上如何调用呢?以下是具体代码:

  1. <CENTER> 
  2. <FORM name = "form"> 
  3. <SELECT NAME="site" SIZE=1 onChange ="formHandler()"> 
  4. <OPTION VALUE="">连接到…. 
  5. <OPTION VALUE="http://www.pconline.com.cn">太平洋电脑网 
  6. <OPTION VALUE="http://cn.yahoo.com">中文雅虎 
  7. <OPTION VALUE="http://www.263.net">263网站 
  8. <OPTION VALUE="http://www.usnews.com">美国在线 
  9. <OPTION VALUE="http://www.neworiental.org">北京新东方 
  10. </SELECT> 
  11. </FORM> 
  12. </CENTER> 

 下面是全部的代码:
<head>
<title>Untitled Document</title>

 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<SCRIPT LANGUAGE="Javascript">
<!-- Begin
function formHandler()
{
var URL = document.form.site.options
[document.form.site.selectedIndex].value;
window.location.href = URL;
// End -->

}
</SCRIPT>
</head>
<FORM name = "form">
<SELECT NAME="site" SIZE=1 onChange ="formHandler()">
<option value="">连接到…. </option>
<option value="http://www.pcedu.com.cn">太平洋网络学院</option>
<option value="http://cn.yahoo.com">中文雅虎 </option>
<option value="http://www.263.net">263网站 </option>
<option value="http://www.usnews.com">美国在线 </option>
<option value="http://www.neworiental.org">北京新东方 </option>
</SELECT>
</FORM>

效果实现:

 

 

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《Javascript实例教程(1)创建弹出式窗口和创建折叠式》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/JavaScript/217.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序