亚洲视频在线免费观看,国产a v无码专区亚洲av,亚洲国产精品成人网址天堂

JSP、JAVA、数据库�~�码�ȝ��

阿成 — Thu, 17 Aug 2006 02:09:00 GMT

1、JSP��面�~�码
<%@ page contentType="text/html;charset=........"%>
<%@ page language="java" pageEncoding="........"%>
pageEncoding�Q�The encoding used for the JSP page file, as well as
the response charset if no charset is specified by contentType.

If this attribute is omitted, but a charset is specified for contentType,
that charset is also used of the page; if contentType doesn't specify a
charset, ISO-8859-1 is used for a regular JSP page, and UTF-8 is used
for a JSP Document.

阿成 2006-08-17 10:09 发表评论

Ajax�~�何��行—来看看大象本��n

阿成 — Wed, 16 Aug 2006 09:09:00 GMT

随着2005�q�Ajax�q�个名词的流行，关于Ajax技术本�w�的争论��׃��直喋喋不休。有些�h��U�技术而激动，兴奋得投入到 Ajax的大潮中。有些�h对Ajax大�ؓ诟病�Q�认为其不过是一�U�炒作，其类似技术早已实玎ͼ�毫无新意。也有些��持一�U�观望的状态，�{�到大势所��时�Q�才�q? 行投入�?

　　��M��Q�一个新兴事物的诞生之初�Q�有不同的观点进行争论是很正常的现象。作者作为支持Ajax的一�z�，对这个新生事物，可以说是倾注了很多精力。从最初的不懂�Q�到略知一二，再到深刻认识�Q�发现Ajax背后隐藏的趋势，多少有些亢奋。凭此文�Q�希望能够把自己的观点，表达一二�?/p>

　　Ajax�?005�q�异军突��P��伴随着Web2.0�Q�成��Z��本年度最为流行的名词之一。很多�h看到�q�样一门技术，可能会很奇怪，感到很突兀�?/p>

　　��Z��么会�H�然产生�q�样一�U�技�?
　　�c�M��的技术早��有�Q�Ajax有什么突�?
　　��Z��么这�U�技术如此盛行，�q�被某些��为是一�U�趋势呢?

　　如果你仅仅试图从Ajax本��n��d��找这些问题的�{�案�Q�你可能会一无所莗��如果你仅能够看到Ajax本��n�Q�那��如同瞎子摸象、管中窥豹，不能领略全局�Q�当然也不能领会其意义。相反，如果你能够从一�? 更好的高度上��L��考Ajax所带来的好处，把Ajax攑ֈ�一个相关的语境中去体会�Q�你��׃��有另一番发现�?/p>

　　与Ajax相连的，�q�有�q�么两个名词—RiA和Web2.0�?/p>

　　什么是RiA?

　　RiA��是Rich Internet Application的羃写�?/p>

　　“Rich”代表功能强大，高交互性，高用户体验�?/p>

　　“Internet”代表方�ѝ��应用程序部�|�方便，用户使用方便。跨�pȝ��Q�跨语言�?/p>

　　其实RiA实际上一�U�基于Web的C/S架构(我称之�ؓC/S/B)。由于有一个客��L��Q�所以RiA应用可以提供强大的功能，让用户体验到高交互性，�? 用户体验。同�Ӟ��RiA又是��Z��Internet��览器的应用�Q�所以，用户使用RiA非常方便。理��x��_��用户使用RiA应当像现在��用普通网��一��h�� ѝ��用户不需要安装�Q何的客户端��Y�Ӟ��只要拥有��览器。当用户通过��览器发出指令，希望�q�行某种RiA应用�E�序�Ӟ��一切都会飞快的建立在客��L��机器上，��? 像你在Web上点��M��个页面一栗��?/p>

　　目前�Q�典型的RiA的代表有如下几种技�?

　　MS ClickOnce
　　Sun Java Web Start
　　Adobe Flash
　　Ajax

　　应该��_��各大厂商均看��C��RiA��好的未来，�U�L��行动��h��希望分一杯羹。只有Ajax技术在�q�些技术中有些特立独行�?/p>

　　Ajax�q�不属于��M��厂商�Q�相反，Ajax代表的是一�U�开源的风格。由于Ajax所采用的各�U�技术要么是��Z��标准的，要么也没有被各大厂商所垄断�Q�所�? Ajax真正是一个��^民化的技术，谁都可以用它。同�Ӟ��׃��Ajax采用的各�U�技术基于现有的��览器，所以兼�Ҏ��最好。用Ajax技术徏立的�|�站�Q�目前均可以直接�q�行�Q�不需要�Q何客��L��的改变�?/p>

　　其他的各�U�技术与Ajax比较��h��Q�目前或多或��的�q�有些兼�Ҏ��的问题。虽然这些技术功能强大，但是目前它们应用��h��q��ƈ不是很方�ѝ��不�q�可以看刎ͼ�随着旉��的推�q�，�怿��Q�未来还是属于功能更强大的一斏V��除非Ajax本��n的功能有所加强。这��P�� q��Javascript的功力了�?/p>

　　RiA实际上代表的是一�U�回归�?/p>

　　最开始流行的C/S�l�构�Q�因为功能强大，而且范围有限�Q�不需要害怕部�|�问题。之后随着用户的增加，部��v问题��来��大�Q�导致B/S模式的��生�?/p>

　　B/S模式虽然功能有限�Q�但是却使用非常方便。从长期来看�Q�方便的作用�q�是非常巨大的。功能可以不断增强，但是如果不方便，��吓走所有的客户。实际上�? 察一下Web的发展，��׃��发现�Q�如今百花齐攄��Web开发技术，其目的都是�ؓ了提高B/S架构的交互性，让他更能适应需要而已�?/p>

　　不过�Q? 随着目前��来��多的应用需要一直到Web上，��Z��l�于发现B/S模式的缺炏V��各�U�技术上的硬性问题均限制着B/S模式的发展。从最基本的请�?相应模型�Q? HTTP协议�Q�到所有负载均�q�行在服务器上的事实�Q�让我们�q�切需要一�U�方式来提高Web的交互能力，但同时又不能丧失它的使用方便性�?/p>

　　于是�Q�RiA诞生了。RiA��是��Z��览器的C/S�l�构。它��部分的服务器负载�{�U�d��客户端，同时又不会��׃��用和部��v上的方便性。所以说�Q�RiA��是一�ơ回归，只不�q�这�ơ回归我们没有原��C��动，相反�Q�我们找��C��最佳结合点。如�?所�C?

　　�?、RiA��是一�U�回�?/p>

　　但是�Q�我们知道了RiA是一�U�回归。可是，��Z��么RiA会盛行呢?�q�就需要我们把RiA攑ֈ�Web2.0的环境中��L��考�?/p>

　　什么是Web2.0?

　　目前�Q�对于Web2.0�q�没有明��的定义。在《What Is Web 2.0》这��文章里�Q�对Web2.0应用所需要具备的各种特点�q�行了�ȝ��Q��ƈ且提了出来�?/p>

　　Services, not packaged software, with cost-effective scalability
　　Control over unique, hard-to-recreate data sources that get richer as more people use them
　　Trusting users as co-developers
　　Harnessing collective intelligence
　　Leveraging the long tail through customer self-service
　　Software above the level of a single device
　　Lightweight user interfaces, development models, AND business models

　　虽然有这么多�Ҏ��，但是Web2.0背后最本质的东西就只有两点:

　　软�g向服务化发展�Q�向�q�_��化发�?
　　Web由原来“Publisher”的观点�Q�发展成“Participation”的观点�?/li>

　　正是��Z��q�两点，Web2.0时代�q�切需要一�U��用方便，高交互性的应用�E�序�Q�而此重�Q�Q�就落在了RiA�w�上�?/p>

　　通过�?�Q�你可以看到由Web1.0到Web2.0的变化�?/p>

　　�?、Web1.0向Web2.0的演�?/p>

　　�q�是在《What Is Web 2.0》那��文章里�Q�勾勒出了一�q�Web2.0的Meme Map。这张图的中心代表的是Web2.0的核心概念，而旁�Ҏ��Web2.0概念的�g伸。在�q�张��N��Q�我试图勑֋��Z��些迫切需要RiA的特征点。实际上�Q? 你可以看刎ͼ�在Web2.0的Meme Map里，到处充满了RiA的倩媄。如�?所�C?

　　�?、Web2.0中的RiA倩媄

　　看看大象本��n

　　介绍了这么多�Q�让我们�ȝ��一下�?/p>

　　随着软�g和互联网的发展，需求导致一�U�新的计��模型出现。这�U�计��模型的特色��是�Q��Y仉��渐的有前台推向后台�Q�以�q�_��的方式提供服务，让用户在前台表演�?/p>

　　计算模型的变化，��D��Web2.0的出现。尽��仅仅是开始，但是�Q�从Web2.0的��n上你依然可以依稀看到�q�种变化的趋�ѝ��不�q�Web2.0要想有如此变化，要想让用户参与进来，��必��L��供一个用户功能强大的�Q��用方便的用户接口(UI)�?/p>

　　于是�Q�需求导致了RiA的出现。RiA提供了一个满��需求的用户接口�Q��得大家可以参与到Web2.0中来。但是，RiA要想应用��h��Q�可能还需要一个过�E��?/p>

　　于是�Q�几�U�RiA技术中�Q�目前��用�v来最合适的Ajax凸现出来。正是由于Ajax��的兼�Ҏ��，让他走到了历史的前台。有了它�Q�我们开始了一场新的革命�?/p>

　　�?昄��了这些名词之间的关系。把它们攑֜�一��L��Q�也�怽�会发��C��一��L��东西�?/p>

　　�?、Ajax、RiA与Web2.0

　　未来的样�?/strong>

　　当我走在北京的街��_��我在惻I��如果我有一台智能手机，可以讉K��癑ֺ�的map服务�Q�也许我��׃��会像现在�q�样担心�q��\了。实际上�Q�类似的例子�q�有很多。如果Web2.0的明天已�l�到来，我们的生�z�M��发生很多改变�?/p>

　　我不知道�Q�尽��我很想知道。如果我真的能够看到未来的样子，再具备一些必要的执行力的话，也许我就是下一个比��。不�q�，看到目前的这一点，已经令我非常兴奋。不��怎么��P��我们都有权利惌��。也有权利，用我们的手去改变世界�?/p>

　　怎么�?开始吧?Let’s do it!

阿成 2006-08-16 17:09 发表评论

阿成 — Wed, 16 Aug 2006 09:09:00 GMT
SPAN �?DIV 的区别在于，DIV(division)是一个块�U�元素，可以包含�D�落、标题、表��|��乃至诸如章节、摘要和备注�{�。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义�Q�纯�_Ҏ��应用样式�Q�当其他行内元素都不合适时�Q�可以��用SPAN�?
　　效果�Q?/p>
　　SPAN标记有一个重要而实用的�Ҏ��，卛_��什么事也不会做�Q�它的唯一目的��是围绕你的HTML代码中的其它元素�Q�这样你��可以�ؓ它们指定样式了。在此例中，标识�W�允�怽��一个段落分成不同的部分�?/p>
　　�q�有一个标识符��h��c�M��的功能，
DIV也被用来在HTML文�g中徏立逻辑部分。但�?lt;div>SPAN不同�Q?lt;div>工作于文本块一�U�，它在它所包含的HTML元素的前面及后面都引入了行分隔�?/p>

阿成 2006-08-16 17:09 发表评论

ajax各种资源

阿成 — Wed, 16 Aug 2006 09:08:00 GMT
1、表单验证，如何不提交就验证�Q�是通过鼠标选中其他输入框表�C�前一个输入框输入完毕�Q�就可以自动�q�行验证�?
2�?a >http://www.chinaren.com/ 大家都去�q�吧�Q�首��顶部搜索条“学校、班机、同学、热贴、网��c��音乐、图片”这些标�{�，点一个下面的�?/p>
容就换成与所�Ҏ��索项有关的，�q�是如何实现的呢�Q�我要做�q�个功能
一.资源�cȝ��?/p>
1,国内�|�站
1)Ajax中国(推荐)
一个专业的ajax技术网�?分类清晰,有大量的电子版教�E?以及AJAX源码下蝲!
www.okajax.com
2)ajaxcn.org
李琨老师的blog。李�?《ajax实战》译�?
www.ajaxcn.org
3)www.ajaxw3c.com
2,国外�|�站
1)、Ajax的诞�?/p>
Ajax:ANewApproachtoWebApplications
www.adaptivepath.com/publications/essays/archives/000385.php
2)、AJAXMatters
www.ajaxmatters.com
关于Ajax技术一个信息量非常大的�|�站�Q�有点像Ajax世界中的TSS�?/p>
3)、AJAXPatterns
与AJAX设计模式相关的资源�?/p>
www.ajaxpatterns.org
www.softwareas.com/ajax-patterns
4)�?a >http://www.ajaxian.com
�?热门文章
1.什么是AJAX
www.okajax.com/info/net/20060510.html
2.ajax技术简�?/p>
www.okajax.com/info/basic/200604654.html
3.ajax.net
www.okajax.com/info/basic/200604556.html
www.okajax.com/info/tech/200605589.html
weblogs.asp.net/mschwarz/archive/2005/04/11/399893.aspx(英文)
�?ajax相关下蝲�Q�电子书教程/源码�Q?/p>
1.Ajax基础教程电子�?/p>
www.okajax.com/info/bookdown/200604950.htm
2.《AJAX实战》ajaxinaction电子�?/p>
www.okajax.com/info/bookdown/200604366.htm
3.AJAX开发简�?/p>
www.okajax.com/info/bookdown/20060538.htm
4.AJAX版CD��理�pȝ��(jsp)
www.okajax.com/info/codedown/200604327.htm
5.Alexa查询�pȝ��(Xmlhttp+Ajax)
www.okajax.com/info/codedown/200604982.htm
6.ASP.NET+AJAX解决�|�页打开�{�待问题
www.okajax.com/info/codedown/200604166.htm
7.Ajax技术简�?ajaxdemo)
www.okajax.com/info/codedown/200604576.htm
�?ajax相关图书
1.《Ajax实战�?目前Ajax领域最为全面深入的一本著�?
www.china-pub.com/computers/common/info.asp?id=28433
2.《Ajax基础教程》（亚马逊计��机榜首图书�Q�国内第1本Ajax图书�Q�中文pdf版）
http://www.devworld.cn/art2527.aspx
3.《Ajax修炼之道-Web2.0入门》（Ajax从小工到专家的首选图书）
www.china-pub.com/computers/common/info.asp?id=29430
4.《征服Ajax+Lucene构徏搜烦引擎�?/p>
www.china-pub.com/computers/common/info.asp?id=29996
5.《征服Ajax--Web2.0快速入门与��目实践�Q?net�Q��?/p>
www.china-pub.com/computers/common/info.asp?id=29995
6.《Ajax开发精�?-概念、案例与框架�?/p>
www.china-pub.com/computers/common/info.asp?id=30006
7.AJAX——新手快车道

http://www.sp1.cn/ajax/info/bookdown/200605663.htm
8,Ajax 探密 (Ajax Hacks )
http://www.sp1.cn/ajax/info/bookdown/20060540.htm
9.Ajax基础教程电子�?br />
http://wh.wlha.com.cn/bbs/pic/ajaxbasic.rar

�?部分技术文�?/p>
www.dragonson.com/doc/ajax.html
Ajax内部交流文档
info96.k12studio.com/~nio/comments.php?id=242_0_1_0_C
��单地对Ajax�q�行描述介绍
www.adaptivepath.com/publications/essays/archives/000385.php
Ajax:ANewApproachtoWebApplications
jibbering.com/2002/4/httprequest.html
UsingtheXMLHTTPRequestobject
developer.apple.com/internet/webcontent/xmlhttpreq.html
DynamicHTMLandXML:TheXMLHttpRequestObject
del.icio.us/popular/ajax
www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
XMLHttpRequest&AjaxWorkingExamples
www.xml.com/lpt/a/2005/02/09/xml-http-request.html
VeryDynamicWebInterfaces
www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility
AJAXandAccessibility
www.xml.com/lpt/a/2005/05/11/ajax-error.html
ErrorsandAJAX
www.softwareas.com/ajax-patterns
AJAXPatterns:DesignPatternsforAJAXUsability
www.backbase.com/download/Whitepaper%20Backbase%20AJAX%20and%20Beyond.pdf
WhitepaperBackbaseAJAXandBeyond
www.ajaxpatterns.org/index.php?title=Main_Page
AJAXpatterns
www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html
六、补充内�?/p>
在增加一�?有些基础教程,虽然不多�Q�但是都蛮有用的!
http://www.sp1.cn/ajax/info/basic/index.htm
Ajax & XMLHttpRequset
http://tech.acnow.net/Html/Web/ASP/ASP_Skill/2006-6/15/163322869.shtml
了解Ajax框架
http://kb.csdn.net/java/Articles/200606/0964add7-c017-484e-9652-5d85030222c5.html
标题实现无刷新闪烁二�U�联动下拉菜�?
http://www.seaskyer.net/Index/Catalog11/266.html
标题 Ajax研究��结
http://www.seaskyer.net/Index/Catalog11/224.html

阿成 2006-08-16 17:08 发表评论

Ajax: A New Approach to Web Applications

阿成 — Wed, 16 Aug 2006 09:08:00 GMT

by Jesse James Garrett�Q?a >http://www.adaptivepath.com/publications/essays/archives/000385.php�Q?/h3>
February 18, 2005

If anything about current interaction design can be called “glamorous,�? it’s creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online.

Despite this, Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application.

That gap is closing. Take a look at Google Suggest. Watch the way the suggested terms update as you type, almost instantly. Now look at Google Maps. Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

Defining Ajax

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

standards-based presentation using XHTML and CSS;

dynamic display and interaction using the Document Object Model;

data interchange and manipulation using XML and XSLT;

asynchronous data retrieval using XMLHttpRequest;

and JavaScript binding everything together.

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing �?retrieving data, crunching numbers, talking to various legacy systems �?and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.

Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?

How Ajax is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary �?an Ajax engine �?between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine �?written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously �?independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server �?such as simple data validation, editing data in memory, and even some navigation �?the engine handles on its own. If the engine needs something from the server in order to respond �?if it’s submitting data for processing, loading additional interface code, or retrieving new data �?the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

Who’s Using Ajax

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year �?Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps �?are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

Moving Forward

The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

It’s going to be fun.

阿成 2006-08-16 17:08 发表评论

阿成 — Wed, 16 Aug 2006 09:06:00 GMT

首先了解一下什么时DWR�Q�Direct Web Remoting �Q?/div>

   DWR 是一个开放源码的使用 Apache 许可协议的解��x��案，它包含服务器�?Java 库、一�?DWR servlet 以及 JavaScript 库。虽�?DWR 不是 Java �q�_��上唯一可用�?Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能�?/div>

    从最��单的角度来说�Q�DWR 是一个引擎，可以把服务器�?Java 对象的方法公开�l?JavaScript 代码。��?DWR 可以有效��C��应用�E�序代码中把 Ajax 的全部请�?响应循环消除掉。这意味着客户端代码再也不需要直接处�?XMLHttpRequest�? �q�些��h��被发送给 DWR�Q�这时它的第二个作用��是把请求翻译成服务器端 Java 对象上的�Ҏ��调用�q�把�Ҏ��的返回值放�?servlet 响应中发送回客户端，�~�码�?JavaScript。DWR �q�提供了帮助执行常见的用��L��面�Q务的 JavaScript 工具函数�?br />�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q�－�Q?br />概述

�q�篇文章阐述了��用开源项目DWR(直接Web�q�程控制)和AJAX(异步JavaScript和XML)的概忉|��提高Web应用的可用性。作者一步步来展�C�DWR如何使得AJAX的应用既��单又快捷。（1600�?2005�q?�?0日）

AJAX�Q? 或者说是异步JavaScript和XML�Q�描�q�C��一�U��用�؜合了HTML(或XHTML)和层叠样式表作�ؓ表达信息,来创��Z��互式的Web应用的开发技 �?文档对象模型�Q�DOM�Q�，JavaScript,动态地昄��和与表达信息�q�行交互;�q�且�Q�XMLHttpRequest对象与Web服务器异步地交换和处理数据�?br />
因特�|�上许多例子展示了在一个HTML文�g内部使用XMLHttpRequest与服务器端进行交互的必要的步骤。当手工�? �~�写和维护XMLHttpRequest代码�Ӟ��开发者必��d��理许多潜在的问题�Q�特别是�c�M��于跨��览器的DOM实现的兼�Ҏ��这��L��问题。这��会��D��在编�? 和调试Javascript代码上面��p��C��清的旉��Q�这昄��对开发者来说很不友好�?br />
DWR(直接Web�q�程控制)��目是在Apache 许可下的一个开源的解决�Ҏ��Q�它供给那些惌��以一�U�简单的方式使用AJAX和XMLHttpRequest的开发者。它��h��一套Javascript功能集，它们把从HTML��面调用应用服务器上的Java对象的方法简化了。它操控不同�c�d��的参敎ͼ��q�同时保持了HTML代码的可��L��?br />
DWR 不是对一个设计的插入�Q�也不强�q�对象��用�Q何种�cȝ��l�承�l�构。它和servlet框架内的应用配合的很好。对�~�少DHTML�~�程�l�验的开发者来��_��DWR 也提供了一个JavaScript库包含了�l�常使用的DHTML��d��Q�如�l�装表，用item填充select下拉框，改变HTML元素的内容，�?lt; div>�?lt;span>
DWR�|�站是详��的�q�且有大量的文档�Q�这也是�q�篇文章的基��。一些例子用来展�C�DWR如何使用和用它的库可以完成什么样的工作�?br />
�q�篇文章让读者看��C��一个��用了DWR的Web应用是如何一步步建立的。我会展�C�创��个简单的�C�Z��应用的必要的�l�节�Q�这个应用是可下载的�q�且可以在你的环境中布��v来看看DWR如何工作�?br />注意�Q�找到有关AJAX的信息�ƈ不困�?�|�页上有几篇文章和博客的条目�늛�了这个主题，每一个都试图指出和评��个概�늚�不同的方面。在资源部分�Q�你会找��C��些有��的指向�C�Z��和文章的链接�Q�来学习AJAX的更多的内容�?br />
�C�Z��应用
�q�篇文章使用的示例应用模拟了多��u多的一个公寓出�U�搜索引擎。用户可以在搜烦前选择一�l�搜索标准。�ؓ了提高交互性，AJAX中以下两�U�情况下使用�Q?br />·应用通告用户配合他的选择会返回多��搜索结果。这个数字是实时更新�?使用AJAX-当用户选择的卧室和��室的数量，或者�h��D��围变化时。当�W�合标准的搜索结果没有或太多�Ӟ��用户��没有必要点��L��索按�U��?br />·数据库查询�ƈ取回�l�果是由AJAX完成的。当用户按下昄��l�果按钮�Ӟ��数据库执行搜索。这��P��应用看�v来更具响应了�Q�而整个页面不需要重载来昄��l�果�?br />
数据�?/span>
我们使用的数据库是HSQL�Q�它是一�U�占用资源很��的Java SQL数据库引擎，可以不需要安装和配置的与Web应用捆绑在一赗��一个SQL文�g被用来在Web应用的上下文启动时创��Z��个内存中的表�q�添加一些记录�?br />
Java�c?/span>
�? 用包含了两个主要的类叫Apartment和ApartmentDAO。Apartment.java�c�L��一个有着属性和getter/setter�Ҏ�� 的简单的Java�c�R��ApartmentDAO.java是数据访问类�Q�用来查询数据库�q�基于用��L��搜烦标准来返回信息。ApartmentDAO�cȝ��? 现的直接了当�?它直接��用了Java数据库联接调用来得到公寓的��L��和符合用戯��求的可用公寓的列表�?br />
DWR配置和��?/span>
�? �|�DWR的��用是��单的�Q�将DWR的jar文�g拷入Web应用的WEB-INF/lib目录中，在web.xml中增加一个servlet声明�Q��ƈ创徏 DWR的配�|�文件。DWR的分发中需要��用一个单独的jar文�g。你必须��DWR servlet加到应用的WEB-INF/web.xml中布�|�描�q�段中去�?br />


        dwr-invoker
        DWR Servlet
        Direct Web Remoter Servlet
        uk.ltd.getahead.dwr.DWRServlet

            debug
            true




        dwr-invoker
        /dwr/*


一个可选的步骤是设�|�DWR��试模式—象上面的例子那样—在servlet描述�D�中��debug参数设�ؓtrue。当DWR在调试模式时�Q�你可以�? HTMl�|�页中看到所有的可访问的Java对象。包含了可用对象列表的网��会出现�?WEBAPP/dwr�q�个url上，它显�C�Z��对象的公共方法。所列方法可以从��面中调用，允许你，�W�一�ơ，�q�行服务器上的对象的�Ҏ��。下图显�C�Z��调试��늚�样子:

调试��?br />
�? 在你必须让DWR知道通过XMLHttpRequest对象�Q�什么对象将会接收请求。这个�Q务由叫做dwr.xml的配�|�文件来完成。在配置文�g中，定义了DWR允许你从�|�页中调用的对象。从设计上讲�Q�DWR允许讉K��所有公布类的公共方法，但在我们的例子中�Q�我们只允许讉K��几个�Ҏ��。下面是我们�C�Z��的配�|? 文�g:









�? 面的文�g实现了我们例子中的两个目标。首先，标记告诉DWR��dwr.sample.Apartment对象的类型�{换�ؓ 联合数组�Q�因为，��Z��安全的原因，DWR默认的不会�{换普通bean。第二，标记让DWR暴露�? dwr.sample.ApartmentDAO�cȝ��JavaScript调用;我们在页面中使用JavaScript文�g被javascript属性定义。我们必��L��?lt;include>标记�Q�它指明了dwr.sample.ApartmentDAO�cȝ��哪些�Ҏ��可用�?br />
HTML/JSP代码
�? �|�完成后�Q�你��可以启动你的Web应用了，�q�时DWR会�ؓ从你的HTML或Java服务器端��面(JSP)上调用所需�Ҏ��作好准备�Q��ƈ不需要你创徏 JavaScript文�g。在search.jsp文�g中，我们必须增加由DWR提供的JavaScript接口�Q�还有DWR引擎�Q�加入以下三行到我们的代码中�Q?br />





�? 们注意到当用��h��变搜索标准时�Q�这是AJAX在示例程序中的首�ơ应�?正如他所看到的，当标准改变时�Q�可用的公寓数量被更��C��。我创徏了两�? JavaScript函数�Q�当某一个选择下拉框中的值变化时被调用。ApartmentDAO.countApartments()函数是最重要的部分�? 最有趣的是�W�一个参�? loadTotal()函数�Q�它指明了当接收到服务端的返回时DWR��会调用的JavaScript�Ҏ��。loadTotal于是被调用来在HTML��面 �?lt;div>中显�C�结果。下面是在这个交互场景中所使用到的JavaScript函数:

function updateTotal() {
    $("resultTable").style.display = 'none';
    var bedrooms = document.getElementById("bedrooms").value;
    var bathrooms = document.getElementById("bathrooms").value;
    var price = document.getElementById("price").value;
    ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);
}

function loadTotal(data) {
    document.getElementById("totalRecords").innerHTML = data;
}

很明显，用户想看到符合他的搜索条件的公寓列表。那么，当用户对他的搜烦标准感到满意�Q��ƈ且��L��也是有效的话�Q�他会按下显�C�结果的按纽�Q�这��会调用updateResults() JavaScript�Ҏ��Q?br />

function updateResults() {

    DWRUtil.removeAllRows("apartmentsbody");
    var bedrooms = document.getElementById("bedrooms").value;
    var bathrooms = document.getElementById("bathrooms").value;
    var price = document.getElementById("price").value;
    ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);
    $("resultTable").style.display = '';
}

function fillTable(apartment) {
    DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);
}

updateResults ()�Ҏ��清空了存放搜索返回结果的表域�Q�从用户界面上获取所需参数�Q��ƈ且将�q�些参数传给DWR创徏的ApartmentDAO对象。然后数据库查询��被�? 行，fillTable()��会被调用，它解析了DWR�q�回的对�?apartment)�Q�然后将其显�C�到��面�?apartmentsbody)�?br />
安全因素
�? 了保持示例的��要，ApartmentDAO�c�d��可能的保持简单，但这��L��一个类通常有一�l�设�|�方法来操作数据�Q�如insert(), update()和delete()。DWR暴露了所有公共方法给所有的HTML��面调用。出于安全的原因�Q�像�q�样暴露你的数据讉K��层是不明智的。开发�? 可以创徏一个门面来集中所有JavaScript函数与底层业务组件之间的通信�Q�这样就限制了过多暴露的功能�?br />
�l�论
�q? ��文章仅仅让你在你的��目中��用由DWR支持的AJAX开了个头。DWR让你集中注意力在如何提高你的应用的交互模型上面，消除了编写和调试 JavaScript代码的负担。��用AJAX最有趣的挑战是定义在哪里和如何提高可用性。DWR负责了操作Web��面与你的Java对象之间的通信�Q�这样就帮助你完全集中注意力在如何让你的应用的用��L��面更加友好，
我想感谢Mircea Oancea和Marcos Pereira,他们阅读了这��文章�ƈ�l�予了非常有价值的�q�匮�?br />
资源
·javaworld.com:javaworld.com
·Matrix-Java开发者社�?http://www.matrix.org.cn/
·onjava.com:onjava.com
·下蝲�C�Z��E�序的全部源�?http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war
·DWR: http://www.getahead.ltd.uk/dwr/index.html
·HSQL:http://hsqldb.sourceforge.net/
·AJAX的定�?http://en.wikipedia.org/wiki/AJAX
· “AJAX:通向Web应用的新途径": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385.php
· “非常动态的Web界面�?Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
·XMLHttpRequest & AJAX 工作范例: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
· “可用的XMLHttpRequest实践�?Thomas Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/
·"XMLHttpRequest 使用导引" Thomas Baekdal (Baekdal.com,  2005.2):http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/
·AJAX实质:http://www.ajaxmatters.com/

阿成 2006-08-16 17:06 发表评论

阿成 — Wed, 16 Aug 2006 09:01:00 GMT

�?acronym title="Cascading Style Sheets">CSS中，一个很��被提及的优点就是能够层叠背景图片，允许它们之间通过"滑动"和层叠来创造出特定的效果。CSS2目前的状况要求每个背景图片都分别有与之相对应的HTML元素。在通常情况下，�l�成通用界面的典型标记已�l�提供了一些我们可以��用的元素�?/p>
�? 中的一个例子就是标�{�֯�航栏�Q�tabbed navigation�Q�。随着[标签��D��]的��用率不断上升�Q�它已逐渐成�ؓ了站点导航的��L��方式�Q�现在是时候来讨论一下对标签��D��栏的控制了。既然CSS 被广泛地支持�Q�我们就可以用它来优化站�Ҏ��{��质地和外观。你很可能会惛_��Q�CSS可以驯服�q�_��的无序列�?/a>。可能你已经见到�q�一些样式化为标�{��列表�Q�比如下面这个：

如果我们采用与上�?strong>完全相同的标�?/strong>�Q�但却把它们变成了下面的样子�Q�该如何��d��呢：

在这里，仅仅用非常简单的样式��可以实现�?/p>
创新之道

我所见过的许多基于CSS的标�{�N��受到了一些共同特性的限制�Q�单色的矩�Ş块，可能在当前标�{�上加了轮廓�Q�或者边框；在鼠标掠�q�时改变矩�Ş的颜色等�{�。这��是CSS能�ؓ我们提供的全部吗�Q�仅仅是成堆的单色方块？

�? 在CSS被广泛采用之前，我们��p��够看到许多在��D��设计上的创新。创新的外�Ş�Q�可控的色彩混合�Q�以及对现实世界中物力表面的模仿。但是这些设计通常都依�? 于将文字内嵌于图片的复杂�l�构或多层的表格嵌套。编辑标�{�上的文字或者改变它们的��序都会引�v�J�重的工作。文字的�~�放更是不可能，不然��׃��引�v严重的页�? 布局错误�?/p>

单纯的文字导航要比嵌入文字的囄��式导航更加易于管理�ƈ且加载更�q�速。而且�Q�虽然我们可以给每个囄��都加上alt属性，但是单纯的文字导航更��h��可读性，因�ؓ对于视力不好读者，�q�些文字都是可羃攄��。也正因为如此，由CSS样式化的文字的导航栏再次成�ؓ�|�页设计者们的�? 择，�q�不��ؓ奇。但是到目前为止�Q�大多数��Z��CSS的标�{�设计，只是后退了一步，回到了我们曾�l�的做法--当然�q�些是无法被优秀的设计作品采用的。采用一 ��Ҏ��技术（比如CSS�Q�应该能够让我们创作��Z��?strong>更好的东西，而不至于失去先前的表格或者图片式标签所能表现的质地�?/p>

“滑动门”技�?/h4>
�? 要我们用两片分离的背景图片，��p��够创造出�_��的手工界面，�q�且��h��高度的灵�z�L��，可随文字的羃放而自动适应。试想一下，左右两幅囄��Q�就像左右两扇滑�? 门一��P��构成了一扇完整的门。将�q�两扇门推近�Q�重叠的部分多一些，��可以适应一个比较狭�H�的�I�间�Q�而如果将它们拉开�Q�重叠的部分减少�Q�就可以满��较宽的空 ��_��正如下图所�C�：

�? �q�个例子中，一�q�图片盖住了另一�q�的某些部分。假设每�q�图片的边缘都有些独特的形状�Q�例如标�{��圆角�Q�我们不希望�q�些边缘被它前方囄��盖住。�ؓ了防止这�U? 情况发生�Q�我们将攄��在前方（以左边�ؓ例）的图片制作得��可能地�H�，但是保证它能够完整地昄��~�上的独特�Ş状。以圆角标签��Z��Q�我们将前方的图片制�? ��C��与圆角的部分同宽卛_��Q?/p>
�? 果目标物�׃��不同文字或文字类型而变得比上图所�C�的宽度更大,那么�q�两�q�图��׃��被拉开,出现一个非�怸��观的缺口�? �q�时��需要我们对可能的扩展性进行预��?在用��L��攑֭�体的时候，目标物会增大多少�Q�实际上�Q�我们至��应该�ؓ文字的羃放而作�?00%的可伸羃性准备�? 我们需要将背景图扩大到��_��弥补�~�口�?对于�q�些例子�Q�我们将把后面的囑փ� ( 双��) 制作�?400 x150 囄��, 前面的图像制作�ؓ 9 x150 囄��?/p>
要记住，背景囄��只能在它所应用的元素的“门前”出�?[内容区域+补丁区域(padding)]�?�q�两�q�图被分别安攑ֈ�他们所应用的元素外侧�?而这些背景的可见部分交叠在一��h��成了一个完整的标签样式:

如果标签被扩大的话，�q�两�q�图��分别向两侧滑动�Q�每一�q�都更多地被昄��出来�Q�以满��更宽的“门”的需求�?/p>
��? 比如我用Photoshop制作了两�q��^滑的�Q�略�?D效果的个性化标签囄��Q�正如文章开头的囄��所�C�。在另一个色彩明亮一点的版本中，�q�两�q�图片的填充色变的更亮，边缘的阴影更暗，�q�是为“当前”标�{�և�备的。�ؓ了给上面所�q�的技术作�C��Q�我们需要扩展标�{�背景的覆盖区域�Q��ƈ把它切成了两�?

那个明亮一些的版本也需要这样做�Q�一旦这些图片都作好了（1, 2, 3, 4�Q�，我们��可以进入CSS标记部分了�?/p>

创徏标签

当发��C��如何利用CSS创徏横向列表后，你可能会注意刎ͼ�臛_��有两�U�方法能够将一�l�列表排列成一行。一�U�是用内嵌方框，另一�U�是利用��动属性。它们各有利弊。而且每一�U�方法都会遇到CSS中非常奇怪的斚w��Q�很�Ҏ��让�h�q�h��?/p>

�W�一�U�方�?/strong>�Q�也是最常用的方法，��是��列表的��目属性设�|��ؓ“内嵌”，�q�种�Ҏ��׃��非常��便而具有相当的吸引力。然而，对于我们��要讨论的“滑动门”技术来��_��q�种内嵌的方法在某些特定的浏览器上会出现渲染问题�?strong>�W�二�U�方�?/strong>�Q�也是我们所要关注的�Q�是利用“��Q动”属性将列表��Ҏ��成一横行。而��Q动属性也会同样��o人无所适从。它们那些看来不协调的行为�ƈ不遵从自焉��辑。尽��如此，处理多个��动元素的基本认识以及将它们��实可靠地处理�ؓ可用元素的方法依然会取得另�h惊奇的效果�?/p>

�? 们会在一个��Q动的容器中创建多个��Q动的元素。这样做是�ؓ了��外部容器紧密围绕在内容元素的周围。利用这�U�方法，我们可以�l�标�{�֐�的空白加上背景。要切记�Q? 在标�{�之后布局的元素，一定要在CSS中用clear属性重新定位它的位�|�。这��h��Z��防止��动标签影响布局中的其他��面元素的位�|��?/p>

那么�Q�现在就让我们看看这些标记语�a��Q?/p>



Home

News

Products

About

Contact

事实上，头部(#header)的层可能同时会包含网站的LOGO以及一个搜索框。在�q�个的例子中�Q�我们会�_��每个锚点�Q�anchor�Q�中的href倹{��显�Ӟ��正常情况下这些值应该�ؓ锚点地址或者文件位�|��?/p>
�? 们最初的样式化就是让头部�Q?header�Q�的层��Q动。这样做是�ؓ了让�q�个作�ؓ容器的层能够真正地将它所容纳的那些��Q动列表项包在内部。由于这个元素是��? 动的�Q�我们需要给它标��Cؓ�?00%”的宽度。再�l�它加上临时的黄色背景来��认�q�一父容器的伸羃能够正好填满标签的整个背景区域。同时设�|�默认文字的�? 性，以保证容器内的文字看��h��一�?

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

现在�Q�我们将无序列表默认的内外补�?padding)都设�|��ؓ0�Q��ƈ��列表的��目�W�号��L��Q�给他们加上向左��动的属性：

#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

我们��锚点的昄��属性设�|��ؓ“块(display:block;)”，�q�样在控制它们的时候就不必担心内嵌�Ҏ��的问题了:

#header a {
display:block;
}

接下来，我们��右侧的囄��d��到列表项的背景中�Q�添加的部分�?strong>�_�体昄��Q�：

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

在加入左边的囄��之前�Q�我们先停下来看看到目前为止�Q?a >效果一�I�竟是怎样的�?/p>

- - -

现在�Q�我们就可以��在上方昄��的左侧图片加入到锚点�Q�内层元素）的背景中�Q�与此同�Ӟ��我们也加入了内补丁，��标�{�扩展，�l�文字与标签的边�~�间��d��一些空白：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

�q�些变化出现�?a >效果�?/a>中�? 看，现在标签已经有了大体的�Ş状。对于这一点，IE5/Mac的用户可能会感到奇怪了�Q�“这是怎么了，��Z��么标�{�会堆叠着伸展地穿�q�整个屏�q�？”别急，�? 们很快就要帮你解册��些问题。那么现在，��可能地跟着我们�l�箋下去�Q�如果手头有其他��览器的话，暂时先换一个来�l�箋往下看。IE5/Mac的问题一定会�? 到很好的解决�?/p>

- - -

�q�时�Q�普通的标签背景已经做好了，接下来，需要�ؓ“当前”标�{�֊�上背景。我们通过为当前标�{�ֆ�的锚点加上id=“current”来实现对它的定位。由于�ƈ不需要改变当前标�{��其他讄��Q�只需要更换背景，所以我们仅用以下的代码卛_��Q?/p>

				#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}

在标�{��下方�Q�我们想要有�Ҏ��出现�Q�但是如果用对父容器#header讄��下边框的的方法，那么��无法消除当前标�{��下边框。因此，我们用创��Z��q�新囄��的方法来代替�Q�这�q�图片的底部包含了我们想要的�Ҏ��Q�同时将囄��的颜色设�|��ؓ��许的梯度，��像下面�q�幅�Q?/p>

我们��这�q�图片用于容�?header的背景（代替了我们刚才所用的黄色�Q�，�q�将它设�|��ؓ底部寚w��Q�给容器讄��与之相应的背景色。同�Ӟ��body的内补丁�U�除�Q�给列表ul的上�Q�左�Q�右侧，分别加上10像素的内补丁�Q?/p>

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

�? 完成标签��D��栏，�q�需要将当前标签的下�Ҏ��消除。你可能会想刎ͼ��l�其他标�{�֊�上与#header背景色完全相同的下边框，然后�l�当前标�{�֊�上一个白色的�? �Ҏ��。然而，那些观察非常仔细的�h�q�是会在�q�样的做法中发现些许破熾。我们用�l�锚点加上内补丁的方法来替代它，�q�样��可以创建出完美的方形边角了。在下面 �l�过攑֤�的示意图中就可以看出区别�Q?/p>

��Z��实现�q�样的效果，我们为其他标�{�设�|�了4像素的内补丁�Q�而当前标�{��讄��?像素�Q?/p>

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

上面的代码保证了�?a >效果�?/a>中下�Ҏ��只出现在其他标签上，而不出现在当前标�{�上�?/p>

打磨完工

�? 锐的目光可能会发玎ͼ�在上一效果图中�Q�圆角标�{��角落上仍然留有白色的色块。这些前方图片上的不透明的边角挡住了��D��栏的背景。从理论上说�Q�我们可以将�q? 些边角的背景修改��Z��D��栏背景色一致来辑ֈ�看似透明的效果。但是我们的��D��标签可能会改变高度，��过背景的范��_��或者背景色出现更改。因此，不如直接��? 前方背景的边角设�|��ؓ透明�Q�这��h��为方�ѝ��如果圆角是抗锯齿的话，我们可以让它的边�~�以背景色进行柔化�?/p>

现在边角透明了，可是右侧囄��的一部分出现在左侧透明的边角后。�ؓ了抵消它�Q�我们在��目列表的左侧加上与左侧囄��相同大小�?像素的内补丁。由于项目列表加上了左内补丁�Q�就需要在锚点的左侧减��M��部分内补丁，以保证文字的居中(15px - 9px = 6px)�Q?/p>

#header li {
float:left;
background:url("right.gif")
no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 6px;
}

然而，�q�不能就�q�样把它攑֜�那儿�Q�因为左侧的囄��׃��刚才加上�?像素的内补丁而被推开了。既然左右两�q�图片的内边�~�已�l�相�q�了�Q�我们就没必要非��左侧的囄��保持在上斏V��因此，我们交换一下左右两�q�图片，让他们应用到�Ҏ��的元素上。当�Ӟ��当前标签也需要这样做�Q?/p>

#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
padding-bottom:5px;
}

一旦这样做好了�Q�就完成�?a >效果�?/a>�? 注意�Q��ؓ了��边角透明而做的这一�p�d��调整使得每个标签的左侧都有一��部分不可点凅R��这一非活动区域是在文字之外的�Q�所以�ƈ不是非常引�h注目。�ƈ不是每个�? 炚w��要求标签背景是透明的，如果不希望有�q�一��部分非�z�d��区域的话�Q�尽可以用纯色的背景和方角来代替透明和圆角。在我们的例子中�Q�依然保持透明和圆角的�? 果�?/p>

- - -

剩下的调整就很简单了�Q�我们一�q�来完成�Q�将标签字体讄��为粗体，正常标签的字体颜色设�|��ؓ��色�Q�当前标�{�N��色设�|��ؓ��q��Ԍ��L��下滑�U�，��鼠标悬��时的字体颜色同栯��|��ؓ��q��艌Ӏ�这些增加的变化�?a >效果�?/a>中表现出来�?/p>

一致性的特例

在效果二之后�Q�我们认识到�Q�在IE5/Mac中，标签被扩大到与页面同宽，��D��了他们垂直堆叠在下一个的上方�Q�这�q�不是我们想要的效果�?/p>

在大多数��览器中�Q��Q动会引�v收羃的效�?它会收羃��C��能容�U�_��所含元素的最��空间。如果��Q动元素中包含的是囄��Q�那么它会收�~�到与图片大��相同，如果仅包含文字的话，它会收羃��C��最长的不换行文字同宽�?/p>

�? 在IE5/Mac中，当一个自动调整宽度的块��元素�Q�block-level element�Q�被插入到另一��动元素中时�Q�就会出现问题。其他浏览器依然会尽可能地收�~��Q动元素，�q�不理会它所容纳的块�U�元素。但是IE5/Mac在这 �U�情况下�q�不收羃��动元素�Q�反而将��动和块�U�元素扩展到最大的可用宽度。在�q�种情况下，我们需要将锚点也同时��Q动，但是仅在IE5/Mac中这样做�Q�以�? 影响到其他浏览器。之后，我们��可以用反斜杠注释法�Q�Commented Backslash Hack�Q�来隐藏�q�些代码�Q��其仅在IE5/Mac下工作：

#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

�q�回�Q�IE5/Mac��览器应该显�C�我们所希望的效果了�Q�见效果�?/a>�? 在非IE5/Mac��览器中�Q�应该没有�Q何变化。注意，IE5.0/Mac中出��C��很多渲染错误�Q�在IE5.1中已得到更正。因此，在IE5.0中出现的错误已经��出了我所应该作�ؓ特例而修改的范畴了。由于现在升�U�到5.1�q�不困难�Q�而OS 9 Macs用户中仍然��用IE5.0的已�l�相当的��了�?/p>

适用�?/h4>
�? 们刚刚看�q�如何运用滑动门技术创建纯文本的导航标�{?它们是由一�p�d��锚点�l�成的无序列表标记而成,�q�赋予一些个性化的样式。它加蝲快�?易于�l�护,�q�且�? 以在不破坏原有设计的同时对其文本�q�行大比例的�~�放。那么这��Ҏ��术��够灵�z�d��Q�可以胜��d��建各�U�类型的�_��D��栏的��d��?

无需怀疑，�q�项技术的使用只局限于我们的想象力�?a >最�l�效�?/a>只展�C�出了其中一�U�可能性。但是我们不应被一�U�设计局限了自己的想�?

例如,标签没必要非得对�U�。我很快��制作出�q�些标签�?a >2.0�?/a>�Q? 在这个版本中�Q��ƈ没有使用3D阴媄效果,�q�样更利于展�C��^面色�?有角的边�~�，以及更宽,更细致的左边框。正�?.0版所�C�，我们甚至可以交换左右两幅�? 片的位置�Q�当�Ӟ��q�些均取决于你的设计。通过�l�致的计划和巧妙的图片处�?我们��可以将下边框彻底放�?�q�更有利于标�{�֛�片与背景的搭�?��如在我充满�? 感的 3.0�?/a>中所表现的那栗��如果你的浏览器支持在样式表间切换的�?你甚臛_��以看到这�?a >��L��?/a>在三个不同的版本的样式间切换�Q�注�Q�Firefox和Opera支持样式切换�Q��?/p>
�? 他我们没有讨论到的效果可以基于这��Ҏ��术��用。在一路�D来的�q�个例子�?我只改变了鼠标悬��时的文字颜�Ԍ��但除此之外你�q�可以将整个背景替换掉，以创造出更�ؓ有趣的翻转效果。只要有两个嵌套的HTML元素标记�Q�就可以利用CSS��Z��们加上背景，创造出我们甚至想都没想�q�的的效果。在�q�个例子中我制作了一�? 水��^的导航标�{?但是滑动门技术在其他许多情况下都是可以��用的�?/p>
那么,�?/strong>会用它做什么呢?

阿成 2006-08-16 17:01 发表评论

亚洲视频在线免费观看,国产a v无码专区亚洲av,亚洲国产精品成人网址天堂

JSP、JAVA、数据库�~�码�ȝ��

Ajax�~�何���行—来看看大象本��n

ajax各种资源

Ajax: A New Approach to Web Applications

Defining Ajax

How Ajax is Different

Who’s Using Ajax

Moving Forward

创新之道

创徏标签

打磨完工

一致性的特例

Ajax�~�何��行—来看看大象本��n