2011年11月23日星期三

40多个Ajax,DHTML和Javascript应用技术

原文: Best of Ajax, Dhtml and Javascript- part1
翻译: 帕兰

本文收集了ajax的滚动技术,渐变效果,实时快速编辑,互动元素,视觉效果,动画,幻灯片,手风琴,评级以及更多的javascripts例子,你可以从中找到很多有用的元素,作用于你的AJAX的Web应用。
Scrolling Techniques 滚动技术
1) Ajax dynamic scrolling pages-Ajax动态滚动页面

这个脚本从你的服务器中载入内容并插入一个html空白元素(比如DIV标签)到你的页面中。新的页面可以添加动态效果,脚本将向下滚动显示新页面的内容。

(2) Control.Scroller- Control.Scroller是一个基于Prototype和 script.aculo.us JavaScript 框架的脚 本. 它在script.aculo.us使用Control.Slider并且进行扩大, 使用你可以控制你一个内容容器,对它进行裁剪和滚动。

40多个Ajax,DHTML和Javascript应用

(3) Text Scroller-文本滚动器。这是另一个可以通过鼠标的滑动来实现文本滚动的脚本。

40多个Ajax,DHTML和Javascript应用

(4) A Slider DataPager with Dynamic Tooltips- 这是一个小小的Smooth Javascript滚动脚本。

40多个Ajax,DHTML和Javascript应用

(
渐变效果
5) CSS Text Gradient- CSS文本渐变。文本渐变是简单的CSS技巧,允许你为网页中重要的标题字体添加渐变效果,而仅仅需要使用CSS和一张PNG图片。

40多个Ajax,DHTML和Javascript应用

(6) CSS Gradient Text Effect- 同样是使用CSS和一张PNG图片实现文本的渐变效果。之前帕兰有专门做过介绍

40多个Ajax,DHTML和Javascript应用

(
AJAX 实时编辑
7) Instant Edit-实时编辑

40多个Ajax,DHTML和Javascript应用

(8 ) Digg Style Update Characters While Typing-类似Digg风格的字符输入限制

教你如何实现类似Digg风格的实时显示文本输入的字符数,并且一旦超过你设置的字符限制,将不能再继续输入任何字符。

40多个Ajax,DHTML和Javascript应用

(9) Easy AJAX inline text edit 2.0-一个简单的Ajax内文编辑应用。让你实时编辑一个文本区域而且不需要使用提交按钮。

40多个Ajax,DHTML和Javascript应用

(
图像特效
10) SWF Image Replacement -使用JavaScript和Flash, swfIR 解决了一些在CSS和标准的HTML应用中的设计局限, 同时仍然符合标准的设计概念。

40多个Ajax,DHTML和Javascript应用

(11) Style Your Image Links-这个优秀的脚本可以让你为图片添加悬浮特效,当鼠标悬浮在图片时,出现一个互动作用的点击提示。

40多个Ajax,DHTML和Javascript应用

(12) Loupe- 可以让你添加一个Loupe也就是放大镜到你网页上的图片中。它使用一个简单的javascript脚本,这意味着你可以保持你的你的代码简洁,并且它支持大多数的主流浏览器。

40多个Ajax,DHTML和Javascript应用

(
AJAX 星形评级
13) Starbox: star rating script for prototype -Starbox可让你只需要一张PNG图片就创建一个简单的星形评级盒 . 这个脚本基于Prototype javascript框架.

40多个Ajax,DHTML和Javascript应用

(14) AJAX Star Rating-一个非常小巧但却非常实用的星级评级系统。

40多个Ajax,DHTML和Javascript应用

(15) Rabid Ratings v1.2-RabidRatings is a simple but eye-caching ratings system which allows users to your website to rate virtually anything.

40多个Ajax,DHTML和Javascript应用

(
Accordions-手风琴效果
16) Simple Javascript Accordions-一个非常轻量级的手风琴效果Javascript脚本,很容易使用和整合到页面中去。 不需要任何Javascript框架并且支持大多数主流浏览器。

40多个Ajax,DHTML和Javascript应用

(17)Accordion- 来自RapidWeaver的一个插件. 它从你的网页文本和图像中创建一个动态的交互菜单驱动。

40多个Ajax,DHTML和Javascript应用

(
SlideShows and Galleries-幻灯片和画廊应用
18)MooFlow- MooFlow是一个用于Gallery画廊的Javascript, 它创建出来的效果很像Apple的iTunes.

40多个Ajax,DHTML和Javascript应用

(19)Flickrshow- 为你提供最简单的方法在你的网页上显示来自Flickr的相册。

40多个Ajax,DHTML和Javascript应用

(
Manipulating Fields -处理区域
20) TextboxList meets Autocompletion-基于Mootools脚本库,在搜索区域中使用自动提示和自动完成功能,允许用户增加或删除词句。

40多个Ajax,DHTML和Javascript应用

(21)Toggler v0.1-这是一个模仿桌面系统功能应用的Javascript, 当你点击Chechbox中的一个Lable的时候,如果你保持鼠标按下并移动鼠标,就可以批量选择Lable。

40多个Ajax,DHTML和Javascript应用

(
Drag & Drop -拖拽
22)Drag & Drop Sortable Lists -可拖拽的分类菜单

40多个Ajax,DHTML和Javascript应用

(23) Drag & Drop - 可实现图像和多层拖拽

40多个Ajax,DHTML和Javascript应用

(
Tooltips 提示工具
24) How to add advanced tooltips on your photo-这篇文章向你介绍如何使用 Taggify widget 来提高你博客的功能,主要是为你的网页上的图片添加一个弹出提示。

40多个Ajax,DHTML和Javascript应用

(25)Nice titles- 可以让你的链接标题显示的漂亮,更重要的是,它在标题里显示链接和URL地址。

40多个Ajax,DHTML和Javascript应用

(26)Bubble Tooltips- Bubble Tooltips通过一小个CSS和 javascript,为你的任何页面链接分创建一个花俏的弹出效果样式。

40多个Ajax,DHTML和Javascript应用

(
Date, Time & Calendars 日期,时间和日历
27) The DHTML / JavaScript Calendar- 显示一个弹出或单调和DHTML日历,拥有相配的日期和时间选择样式。

40多个Ajax,DHTML和Javascript应用

(28) DateJs- Datejs是一个开源的 JavaScript日期库。

40多个Ajax,DHTML和Javascript应用

(29) JS Calendar- 这是一个兼容各大浏览器的Javascript日历.

40多个Ajax,DHTML和Javascript应用

(
AJAX poller-Ajax投票系统
30) AJAX poller script- 这是一个简单的Ajax投票演示. 它使用Ajax(Asyncron Javascript 和XML) 发送投票到你的服务器.,并且实时返回处理的投票结果到你的浏览器中。

40多个Ajax,DHTML和Javascript应用

(31) How To Make an AJAX Poll

这是一篇相关文章,主要介绍如何创建一个Ajax投票系统

(
Must See Examples – 应该了解的一个实例
32) ShadedBorder -JavaScript实现的圆角阴影效果

点击查看 demo

40多个Ajax,DHTML和Javascript应用

(33) Change Text Size On Click With Javascript-使用一个小小的 JavaScript 脚本和HTML实现文本字体大小的改变。

40多个Ajax,DHTML和Javascript应用

(34) Fancy Form -一个强大的checkbox复选框替换脚本,它提供HTML元素所不能达到的灵活性。

点击查看demo演示

40多个Ajax,DHTML和Javascript应用

(35) Ajax Domain Search- 实时搜索检查你的域名(.com, .net, .org, .info, .biz, .us).

(36) Pushing a shopping cart -一个随浏览器移动的购物车系统应用。好处就是随时悬浮,跟随用户。

40多个Ajax,DHTML和Javascript应用

(37) Timeline- Timeline时间线是一个DHTML-基于AJAXy的日期事件形象化显示的widget. 它的移动效果有点像Google Maps。

40多个Ajax,DHTML和Javascript应用

(38) Prototype Window- 这个脚本javascrip允许你添加你窗口到HTML页面中.

40多个Ajax,DHTML和Javascript应用

(39) Ajax Chess widget-这是一个国际象棋的widget,它使用Aajx从服务器中分析响应国际象棋的动作。

40多个Ajax,DHTML和Javascript应用

(40) ClickHeat | Clicks heatmap- ClickHeat 在一个页面中加入Heatmap, 显示炎热和寒冷的点击地带.

(41) ScrolLovers- Scrollovers提供一种简便快捷的方法增强你的网页能力, 它能让用户来控制网页中的元素效果。比如使用一个色盘来调整网页中特定字符的颜色。

40多个Ajax,DHTML和Javascript应用

(42) df Javascript Smooth Scroll -使用一个浮动块来调整内容的显示,并弹出详细的提示信息。

40多个Ajax,DHTML和Javascript应用

来源于 40多个Ajax,DHTML和Javascript应用技术 | 帕兰映像

没有评论:

发表评论