广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

基于jQuery和Ajax构建富Internet应用程序

发布时间:2010-05-09 发布作者:老直营威尼斯网址开户 查阅次数:1537次 标签:jQuery Ajax 富Internet应用程序

    最近JQuery人气急升,现已成为 Web 开发人员首选的 JavaScript 库。与此再是,人们对富 Internet 应用程序(Rich Internet Application,RIA)(什么是富Internet应用程序?)的应用和需求也在迅速增长,并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格,灰子 切剿岷偷缱佑始应用程序,Now都在浏览器中再现了类似于桌面的体味。随着这些应用程序数量的增多和功能的日益复杂,JavaScript 库将会变得越来越要紧,因为它是构建这些应用程序的坚实底子。JQuery 无疑成为了开发人员最佳决定。本系列文章深入探索了 jQuery,并供给了坚实的底子。开发人员借助这个底子就可以快速轻松地构建自己的 RIA。

    在本系列中,您了解了用来构建 RIA 以及为页面添加交互性的三个基本组件。第一个模块是 Event 模块,借助此模块,能捕获用户对页面的任意交互并以编程的方式进行响应。譬喻,您可以向按钮点击、鼠标移动等事件附加代码。下一个模块是 Attributes 模块,它解释了如何在页面圆素上获得/设置值,以及如何将其作为带有变量的数据对象。这些值包含了决定为用户供给何种响应的大部分信息。末了,您还看到了 如何进行 CSS 处理,以及如何在不重新加载页面的环境下更改页面上任意圆素的计划、颜色、字体等。了解这三个模块之下,就等于把握了交互 Web 页面的三个基本圆素 — 获取用户交互(Event)、收集信息(Attribute)以及在事件和信息底子上供给反馈(CSS)。

    在本文中,将对交互 Web 页面的这三个基本圆素进行更进一步的探究,供给当今高等级 Web 应用程序必备的 “酷” 成果和特征。这些附加的模块对供给 RIA 而言并不是至关要紧的,但这些成果和特征会给用户留下深刻印象,并且还会极大地扩展 RIA 的可用范围和特性。您将看到的第一个模块是 Effects 模块,它包含很多特性,譬喻隐藏圆素、随处移动圆素、淡入淡出圆素等。换言之,这些都是让 Web 页酷起来的 “亮点”。末了一个要聊下的模块是 Asynchronous JavaScript + XML (Ajax) 模块。大多数人都将该模块等同为 RIA。Ajax 让 Web 应用程序无需重载页面就能与效劳器进行交互、向效劳器传递信息并从中获取信息(与 Web 上的一些意见相悖,Ajax不单纯是一个很酷的 JavaScript 动画工具)。您将发现 jQuery 供给了极其easy易用的 Ajax 工具。就现实来说,jQuery 使 Ajax 的使用与调用其他 JavaScript 方法一样easy。

    本文中的示例应用程序是个总结,找子 玖 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中。我将向这个示例程序添加一些成果使其更好漂亮,而且更要紧的一点是,我将添加一些 Ajax 代码,以便无需重载页面邮件应用程序就能显示信息。

    Effects 模块

    从其姓名往往匆子 侄玫贸稣庋慕崧郏珽ffects 模块只包含一些动画和成果,而这些动画和成果往往是一些 “正规” 的 Web 页面所竭力避免的。但实际环境并非如此。险些一切的应用程序都会遇到这样的环境,即某个页面圆素需要隐藏或其视图应该按照另一个页面圆素的状态进行切换。这类更改对于一个 RIA 而言非常要紧,因为它们让您能够加载某个页面的一切页面圆素,然下通过隐藏/显示特定的圆素只显示所需的信息。重载页面的方式并不可取。譬喻一个具有两个选项的组合框,一个选项是隐藏 div,一个选项是显示此 div。很显然,与更改组合框并重载页面隐藏/显示 div 相比,用衣食父母端代码隐藏/显示此 div 更easy和高效。而仅隐藏/显示灰子 且盟/淡出,则完全取决于您。

    如上所述,最基本的成果函数是show()和hide()函数。这非常直观;它们可分别用来显示和隐藏页面上的某个圆素。


    清单 1. 隐藏和显示函数

// shows every <p> on the page
$("p").show();

// hides every <p> on the page
$("p").hide();

// hides every other <p> on the page
$("p:odd").hide();
   


    除了这些基本操作,利用show()和hide()这两个函数,还能更好优质地把握页面圆素如何显示和隐藏。相关文档将hide()描述为 “优美” 的显示/隐藏,对于show(),就是综合淡入和滑出的成果。

    在开始深入探讨一些例子之上,不妨回过头来看看传递给这些成果函数的参数。每个函数(除了通用的show()和hide()函数之外)都允许在成果完成时传入要调用的速度和函数。速度用来把握成果出现的快慢。这个参数可以是一个"slow"、"fast"或"normal"字符串。易于 得出,如果需要精确把握动画时间,那就需要用参数指定毫秒数。Effects 函数的第二个参数本身就是一个函数,此函数在成果完成下调用。如果想要将几个成果组合成一个较大规模的成果,这一点将非常要紧,因为利用它,能够可靠地把握一个成果何时完成,下一个成果何时开始。


    清单 2. 复合成果

// the img with an ID of "picture" should start hidden
// when the "showPicture" button is pressed, show the img with an ID of "picture"
// and animate it, so it appears quickly in a fade In and slide out, and when
// it's done being shown, show the caption of the picture, which is
// always in the span right after the <img> tag

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// jQuery code inside the document.ready() function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
  $("#picture").show("fast", function(){
      $("#picture").next().show();
  });
});

// notice how it took more text to describe what you want to happen than it took
// to actually code it!
   


    Effects 模块还有其他一些函数,它们与show()和hide()非常类似,并且最终所实现的功能也基本同样;只不过实现的方式不同。slideDown()和slideUp()函数分别用来显示和隐藏一个页面圆素。不过,这是通过将该圆素滑下或滑上的动画成果实现的(从其名称中不难看出这一点)。与我刚刚提到的增强了的hide()和show()函数类似,您也可以把握滑动的速度以及在成果完成时要调用的函数。易于 得出,要显示/隐藏页面圆素还有另一种决定,即fadeIn()和fadeOut()函数,正如其姓名所示,这两个函数用来淡入页面圆素直至该圆素透明,然下使该圆素消失。它们允许在成果完成时定制速度和要调用的函数。

    有一个很有趣的函数,它可部分隐藏和显示页面圆素,此函数是fadeTo(),它能让页面圆素部分透明。我认易于 函数对 RIA 很要紧,因为透明性是突出页面上某个圆素的一种很好的方式,并可用来显示页面的禁用区域。 诸如,页面上有几个选项卡,可以让一切未被选中的选项卡呈现一些透明性来突出其未被选中。或者,在一个页面表单上,可以让一切没有焦点的圆素呈现一些透明性以向用户突出哪个Form圆素当上具有焦点。易于 得出,透明性本身就很酷。在进行策划时,不妨遵循这样一条通用的箴言 “如果apple集团官网这么策划,成果一定很酷”。


什么是富Internet应用程序(RIA)?

用户网页浏览行为归纳及如何合理安排网站排版

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图