jQuery开发基础第12章综合案例——jQuery+Ajax实现企业门户网站

《jQuery开发基础第12章综合案例——jQuery+Ajax实现企业门户网站》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、主要内容1.网站概述2.系统设计3.关键技术4.主要模块设计第12章综合案例——jQuery+Ajax实现企业门户网站12.1网站概述现在很多企业都拥有自己的官方网站，通过官方网站可以让更多的用户了解公司情况，对公司的产品推广有很大作用。并且拥有自己的官方网站也会提升用户对公司的可信度。所以一个企业拥有自己的官方网站是很有必要的。12.2系统设计12.2.1系统目标12.2.2系统功能结构12.2.3网页预览12.2.1系统目标根据吉林省明日科技有限公司官方网站的需求和对实际情况的考察分析，该官网应该具有如下特点：操作简单方便、界面简洁美观。

2、能够全面介绍公司企业文化，及公司产品信息。浏览速度快，尽量避免长时间打不开页面的情况发生。商品信息部分有实物图例，图像清楚，文字醒目。系统运行稳定、安全可靠。易维护，并提供二次开发支持。12.2.2系统功能结构吉林省明日科技有限公司官方网站的系统功能结构图如图12-1所示。图12-1吉林省明日科技有限公司功能结构图12.2.3网页预览在设计吉林省明日科技有限公司官方网站的页面时，应用CSS样式、DIV标签、JavaScript和jQuery框架技术，打造了一个更具有时代气息的网页。其页面效果如图所示。首页首页主要用于显示展示公司图片、公司最新

3、消息、推荐产品等信息，首页页面的运行结果如图12-2所示。图12-2首页页面运行结果关于明日关于明日页面主要显示公司简介及最新活动信息，关于明日页面运行结果如图12-3所示。图12-3关于明日页面运行结果在线咨询在线资询页面主要设计了用户想要咨询问题留言处及了解用户是如何知道本公司的，在线咨询页面运行结果如图12-4所示。图12-4在线咨询页面运行结果12.3关键技术12.3.1jQuery技术12.3.2Ajax无刷新技术12.3.3JavaScript脚本操作12.3.1jQuery技术jQuery是一套简洁、快速、灵活的JavaScri

4、pt脚本库，它是由JohnResig于2006年创建的，它帮助我们简化了JavaScript代码。JavaScript脚本库类似于java的类库，我们将一些工具方法或对象方法封装在类库中，方便用户使用。jQuery因为它的简便易用，已被大量的开发人员推崇。要在自己的网站中应用jQuery库，需要下载并配置它。要想在文件中引入jQuery库，需要在标记中应用下面的语句引入。例如，在本程序中使用jQu

5、ery技术实现了图片展示区图片的展示效果，编写JavaScript代码，实现广告的循环播放。其关键是应用jQuery框架技术，完成网页特效的制作。关键代码如下：(function($){$.slider=function(opts,data){this.currentSlide=0;this.opts=opts;this.ddata=data;this.timeout=null;

6、varsrc=this;varsrcAuto=true;this.initialize=function(){this.attachListeners();this.changeSlide(0);}this.attachListeners=function(){$('#'+this.opts.tabsContainer+'a').each(function(i,n){varel=$(n);el.css('outline','none');//Removechangeoftabonclick,useasalinkinsteadel.hover(

7、function(){clearTimeout(src.timeout);srcAuto=false;src.currentSlide=i;src.changeSlide();},function(){srcAuto=true;src.currentSlide=i;src.changeSlide();});});}this.changeSlide=function(){varslide=src.ddata[src.currentSlide];$('#'+src.opts.tabsContainer+'a').removeClass('acti

8、ve').eq(src.currentSlide).addClass('active');$('#'+src.opts.textContainer+'p:eq(0)