欢迎来到天天文库
浏览记录
ID:12771601
大小:1.93 MB
页数:14页
时间:2018-07-19
《应用软件实践报告格式》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、北京化工大学北方学院课程设计报告课程名称应用软件实践设计题目Javascript设计专业、班级计科0902学号090202040姓名董晔指导教师段雪丽设计时间2012.9.10——2012.10.122012年10月12日14一、引言(简要说明设计题目的目的、意义、内容、主要任务等)题目要求:使用JavaScript的技术来实现至少三种菜单,比如水平导航下拉菜单,支持3级菜单;树形结构菜单;目录结构菜单;滑动菜单;伸缩菜单等题目分析:针对题目要求,制作了三个html文件,分别名为:伸缩菜单、树形菜单(二级)、水平导航下拉菜单(三级),每
2、个html分别放在同名文件夹下,每个文件夹分别有为html配置的js与css文件。意义:软件开发不单单是技术层面的问题,外包装是十分重要的,为了让自己的软件更加好看,JavaScript中良好的布局,对css的设计十分重要。二、正文(课程设计的主要内容,包括实验与观测方法和结果、仪器设备、计算方法、编程原理、数据处理、设计说明与依据、加工整理和图表、形成的论点和导出的结论等。正文内容必须实事求是、客观真切、准确完备、合乎逻辑、层次分明、语言流畅、结构严谨,符合各学科、专业的有关要求。)伸缩菜单,此菜单所应当有的效果是,刚打开文件时菜单全
3、部处于闭合状态,如图:1当鼠标点击后鼠标点击菜单后会弹开,当再次点击后,之前然开的菜单会自动关闭,然后被点击的菜单弹开,最多只能有一个菜单被弹开,如图所示:21434如果再次点击已弹开的菜单时,菜单会自动收起,如图1所示。以下是源代码,CSS配置部分:$(document).ready(function(){$(".menuTitle").click(functio
4、n(){$(this).next("div").slideToggle("slow").siblings(".menuContent:visible").slideUp("slow");$(this).toggleClass("activeTitle");$(this).siblings(".activeTitle").removeClass("activeTitle");});});14body{margin:0;background-color:#9ad075;}.con
5、tainer{width:100%;text-align:center;}.menuTitle{width:148px;height:25px;background-image:url(images/expand.gif);margin:0auto;line-height:25px;font-size:12.7px;font-weight:bold;color:#43860c;cursor:pointer;margin-top:6px;}.activeTitle{width:148px;height:25px;background-im
6、age:url(images/fold.gif);margin:0auto;line-height:25px;font-size:12.7px;font-weight:bold;color:#43860c;cursor:pointer;margin-top:6px;}.menuContent{background-color:#fff;margin:0auto;height:auto;width:148px;text-align:left;display:none;}li{background:url(images/arr.gif)no
7、-repeat20px6px;list-style-type:none;padding:0px0px0px38px;font-size:12.7px;height:20px;line-height:20px;}ul{margin:0;padding:0;}以下是和body主体部分:
8、缩菜单
此文档下载收益归作者所有