1. 将彻底屏蔽鼠标右键

2. 取消选取、防止复制

3. 不准粘贴

4. 防止复制

5. IE地址栏前换成自己的图标

6. 可以在收藏夹中显示出你的图标

7. 关闭输入法

8. 永远都会带着框架

9. 防止被人frame

10. 网页将不能被另存为

......

原文 - Javascript中最常用的55个经典技巧

Posted on December 18, 2009 9:24 PM | | Comments (0) | TrackBacks (0)

在网络开发方面,JavaScript起了很关键的作用;像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用,书写更强大,更坚实可靠的JavaScript的需要日益迫切。(51CTO编辑:当前Web开发界普遍认为JavaScript将会成为主流,可能会成为RIA的竞争对手。)

不管你是JavaScript新手还是经验丰富的开发者,你所使用的工具直接影响你的工作效率。开放源代码运动使得拥有得力的工具不再意味着付一大笔钱;实际上你什么都不用付出。下面是一个对JavaScript开发者真正有实用价值的免费工具列表。

测试

JSLint –JavaScript的验证器

JSLint取得一个JavaScript源代码并对其扫描。如果发现问题,它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上,不过常常正是这里出错。JSLint查看一些风格约定和结构问题,它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。

JsUnit

JsUnit是一个客户端(内浏览器)JavaScript单元测试框架。它其实是JUnit给JavaScript的一个口岸。其中还有一个平台来在多个浏览器上以及运行不同操作系统的多个机器上的自动执行测试。

YUI Test

YUI Test是一个测试框架,它针对基于浏览器的JavaScript解决方案。你可以用YUI Test在JavaScript 解决方案上轻松添加单元测试。

Obtrusive JavaScript Checker

可作为Firefox扩展,Greasemonkey用户脚本,以及Ubiquity命令;Obtrusive JavaScript Checker是一种可以扫过页面上所有元素的工具,发现带有行内事件的HTML元素(这是有危害性的,JavaScript应该是不张扬的)时,它给这部分加红边使其凸显。

Crosscheck

Crosscheck是一个开源测试框架,验证内浏览器JavaScript代码。它帮助你确保代码可以在Internet Explorer和Firefox等种种不同的浏览器上运行,而这些浏览器都不需要安装。

JSLitmus

JSLitmus是一个轻量级工具用来制作JavaScript的特定标准测试。

JavaScriptMVC的测试插件

JavaScriptMVC的测试库提供事件模拟,单元测试,Ajax 夹具,和一个控制台程序。

调试

Javascript调试工具包

JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugin,它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。

Firebug

作为最受欢迎的网页开发程序工具,Firebug是Firefox的一个插件,可以用它在任何网页上现时编辑,调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging,JavaScript解释器,DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。

Venkman

Venkman为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用断点管理,调用栈检查,变量/对象检查等功能,可以让你以最习惯的方式调剂。

NitobiBug

NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器(IE6+, Safari, Opera, Firefox)上运行以提供开发各种Ajax应用程序一致且功能强大的工具。

DamnIT

DamnIT是一种免费服务,当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。

JS Bin

JS Bin是一种在线网络应用程序,为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bin在线编辑测试JavaScript和HTML代码。一旦完成,你可以将URL保存并发送给同伴来进行审查或获得帮助。

Blackbird

许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。

HTTP监控

Fiddler

Fiddler是一种Web调试代理,它记录你的电脑和网络之间所有的HTTP(S)流量。可以用Fiddler检查所有HTTP(S)流量,设置断点,干涉进来或出去的数据。

TamperData

TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试,追踪请求/回应。

Live HTTP Headers

可以在浏览的时候查看网页的HTTP headers。可以用Live HTTP Headers调试网页应用程序,找出远端网站使用的是那种网站服务器,或者查看远端网站发送的小数据文件。

文件

jGrouseDoc

jGrouseDoc可以从源代码中的注释生成API文件。你可以用这个工具记载你需要的所有构造——不仅有函数和变量,还有类文件包,界面,命名空间,包和其它。使用那种JavaScript框架是无关紧要的——你可以不采取框架或工具强加的方式而以自己希望的方式记录代码,

JSDoc Toolkit

JavaScript的一种文件产生器,以JavaScript形式写成;它自动从加注的JavaScript源代码中生成格式模版化,多页面HTML(或XML, JSON, 抑或其它文本)。

压缩

Online Javascript Compression Tool

一个可以用一些压缩算法如JSMin Packer压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件,因为它们常常将文件大小减小30-90%。在很大程度上,文件尺寸的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。

Scriptalizer

一个将多个JavaScript文件组合为一个文件的在线工具。

Dojo ShrinkSafe

一种命令行实用程序,允许你用浏览器缩小文件大小,从而缩短响应时间。Dojo压缩器不是建立在脆弱的规则表达式基础上的。它基于来自莫兹拉专案的JavaScript引擎。由于一个基于真正的parse stream,Dojo压缩器比基于规则表达式的工具可以更好体现代符(变量名等等)的环境。

YUI Compressor

The YUI Compressor是一种JavaScript压缩器。去除注释和空格之外,它还可以用最小可用变量名混淆局部变量。即使在使用‘eval’或‘with’之类构造(在这些情况下压缩并不合适),这种混淆也是安全的。与jsmin相比,它平均节省20%。

格式化

JavaScript代码美化工具

这个美化工具可处理散乱或压缩的JavaScript代码,不断对其进行快速的格式化并使其可读。

编辑程序&集成开发环境

Aptana Studio

Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试,HTML/CSS/JavaScript代码提示,以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的,包括你自己的JavaScript提供代码提示。

Komodo Edit

Komodo Edit是一种免费开放的源编辑程序。它提供自动完成,调用提示,多种语言支持,语法高亮颜色显示,语法检查,Vi emulation,Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对JavaScript开发者有用的扩展(如JSLint plugin for Komodo, Venkman JavaScript Debugger,等等)。

Spket IDE

Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成,语法高亮显示和内容概要等功能,这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。

其它工具

Google的 AJAX APIs Playground

AJAX API Playground装载有Google JavaScript APIsMaps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries和 Earth,等等)例子,你可以编辑运行这些例子帮助你探究Google的APIs可提供的功能。同时也还有保存和输出功能。你可以用保存功能保持编辑的例子以留待以后使用。而输出功能可用来修改例子并把代码公布在一个永久的URL上。

QuirksMode – 相容性表

检查CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events 和CSS Object Model View主要浏览器相容性状态的最受欢迎的出处。

HTML到JavaScript转换器

HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明。

Glimmer

Glimmer是一种桌面应用软件,可以用它利用jQuery库的作用在网页上轻松制作交互式元素。可以用它轻松制作交错感受如旋转相册/报头,下拉导航,悬停效果,或自定义动画。

jQuery Function Builder

你可以用这个工具很快建立一个函数集,当页面加载完毕/准备完毕时,调用该函数集。

JavaScript Regex Generator

一个制作规则表达的在线工具。

其它浏览器扩展

Firefox, Flock & Seamonkey的网络开发人员扩展

网络开发人员拓展在浏览器中增加了一个菜单和工具条,其中包含许多网络开发工具包括能使你的XHTML生效,发现JavaScript/CSS的错误,网页结构可视化,测试网络表单,改变运行中的XHTML,检查HTTP头信息等等。

Opera Dragonfly

Opera Dragonfly 是Opera浏览器的跨设备,跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM, 并且查看移动设备或计算机上的错误。

IE6/7的开发者工具条

微软的英特网浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具。

原文:List of Really Useful Free Tools For JavaScript Developers

Posted on June 23, 2009 6:20 PM | | Comments (0) | TrackBacks (0)

写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上

实现拖动效果.

以下为引用的内容:

$(document).ready( function() { $("#divPanel").easydrag(); } );
Html 代码

以下为引用的内容:

 Title

EasyDrag还可以指定可拖动的区域,比如只能通过标题拖动整个div,我们JS可以这样写

以下为引用的内容:

$(document).ready ( function()
{
$("#divPanel").easydrag();

$("#divPanel").setHandler("divTitle");
}
);

一个setHandler搞定,不错开源是个好东西,Jquery更是好东西,插件扩展机制不是一般的好。 (cnblogs.com)

Posted on May 12, 2009 8:13 PM | | Comments (0) | TrackBacks (0)

1.Lightbox JS :

Top 17 JavaScript Light box Demo

Original; a simple, unobtrusive script used to overlay images on the current page.

2.Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.

Greasemonkey-install

3.GreyBox :

GreyBox

4.Greybox Redux :

Greybox Redux

5.Leightbox :

Leightbox

6.Lightbox Plus :

Lightbox Plus

7.Lightbox Gone Wild:

Lightbox Gone Wild 8.The Lightbox Effect without Lightbox:

The Lightbox Effect without Lightbox

9.Multifaceted Lightbox :

Multifaceted Lightbox

10.Prototype Window Class :

Prototype Window Class

11.Suckerfish HoverLightbox:

Suckerfish HoverLightbox 12.Thickbox - One box to rule them all. : by Cody Lindley

Thickbox - One box to rule them all 13.Slightly ThickerBox :

Slightly ThickerBox

14.WP lightbox JS WordPress plugin :

WP lightbox JS WordPress plugin

Related Post:

Lightbox Projects List

More about lightbox

Ajax Image Galleries & Lightboxes



  • Minishowcase
    Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.

    Screenshot

  • JonDesign’s SmoothGallery
    Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 16kb.

    Screenshot

  • Ajax Photo Gallery
    The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

    Screenshot

  • Pyxy-gallery
    Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, “drop-in” image gallery.

    Screenshot

  • zenphoto
    Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.

    Screenshot

  • Couloir.org: Resizing, Fading Slideshow Demo - AJAX Slideshow
    This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is — Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs.

  • Grey Box
    A pop-up window that doesn’t suck. GreyBox can be used to display websites, images and other content in a beautiful way.

  • Lightbox2
    Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

  • Litebox
    Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

    Screenshot

  • Multifaceted Lightbox
    A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.

    Screenshot

  • Slightly ThickerBox 1.7
    Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

  • TripTracker
    The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

    Screenshot

  • Slimbox, the ultimate lightweight Lightbox clone
    Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

    Screenshot

  • Suckerfish HoverLightbox
    The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries.

    Screenshot

  • Suckerfish HoverLightbox Redux
    The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility.

  • ThickBox 2.1.1
    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

    Screenshot


CSS-Based Image Galleries



  • A Photograph Gallery
    Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.

    Screenshot

  • A simple CSS photo-album
    The text numbers and images are held in an unordered list without any extra markup (no ‘ems’ or ’spans’ etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.
    Screenshot

  • Cross Browser Multi-Page Photograph Gallery
    Based on Suckerfish HoverLightbox this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version is pure CSS.

    Screenshot

  • CSS Image Gallery
    This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

    Screenshot

  • CSS: Photo Showcase
    This experiment uses CSS and basic markup to create a simple way to display photo thumbnails on your site while offering convenient fast zoom viewing, even for dialup users.

    Screenshot

  • Hoverbox Image Gallery
    Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.

    Screenshot

  • Photo scroll gallery
    A combination of several of my previous galleries to give a scrolling ‘thumbnail’ image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.

    Screenshot

  • Sliding Photograph Galleries
    It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

    Screenshot


JavaScript + CSS-based Galleries & DHTML-Galleries



  • xImgGallery - Javascript Image Gallery & Slideshow
    This script implements a Javascript image gallery and slideshow - all in one file.

    Screenshot

  • easyAlbum
    A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.

    Screenshot

  • ImageGal
    imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images. This simple script was inspired by a Jeremy Keith’s article on aListApart.com.

  • Highslide JS
    Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: No plugins like Flash or Java required. Popup blockers are no problem. The images expand within the active browser window.

    Screenshot

  • Satellite
    Satellite is an all in one photo gallery website that takes advantage of Yahoo Flickr’s image hosting and management tools. You can upload and manage your images using Flickr and host your portfolio on your own server via Satellite.

  • Dhonishow
    Showing Picture Online with Javascript.


Posted on April 20, 2009 3:28 PM | | Comments (0) | TrackBacks (0)

jQuery UI 1.7发布了,开发者宣称这一版本较上一版本有了重大的改进,而且对类库的结构也进行了大幅度的调整。此外添加了很多新的团队,大大提升了它的开发进度。

该版本包含很多的新特性。首先是修正了很多的bug,看看新特性吧:

◆新的网站,致力于jQuery UI的项目

◆兼容 jQuery 1.3

◆插件的修改和优化

◆可扩展的新CSS框架

◆增加了Themeroller主题的应用

◆演示和文档的更新

◆提供离线文档

◆支持CSS Framwork和主题放在Google AJAX Libraries API上

◆开设了一个专门的博客

点击进入jQuery UI博客 (51CTO)
Posted on March 11, 2009 6:29 PM | | Comments (0) | TrackBacks (0)

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸臃肿。在某些场合,如果你只想完成特定的工作,可以使用 一些功能更专一的轻量库,本文介绍了40个非常出色的轻量级 JavaScript 库。

这是本文的第二部分,第一部分参见40 个轻量级 JavaScript 库 (上)

5. 字符串与数学函数

Date.js
和日期打交道不是件容易事,有很多格式要处理。Datejs 可以很好地处理简单或复杂的日期函数。可以将日期解析出诸如"Next thursday","+2 years"一类的格式,也支持所有日期形式,如 2009.01.08, 12/6/2001。

Datejs

Sylvester
一个处理矢量和点阵的数学 JavaScript 库,包含多维矢量和点阵建模类,以及在3D空间的一些模型。

Sylvester

Pretty Date
一个很出色的 JavaScript 库,用一种很漂亮,很友好的方式显示日期,如下图所示。

Pretty Date

XRegExp
JavaScript 中的 RegExp 对象已经支持正则表达式,XRegExp 增加了更多未来浏览器可能包含的功能(ECMAScript 4 - ES4)。该库对 RegExp 对象进行缓存,重用并增加了众多新功能。

JavaScript URL Library
一个用来处理 URL 的 JavaScript 库,可以对 URL 中的任意部分进行处理。

6. Fonts

typeface.js
这个库可以让你在网页中使用任意字体,但和 sIFR 以及 FLIR 这些基于 Flash 的方案不一样,typeface.js 100% 基于 JavaScript,只需将你的字体文件上传到一个基于 Web 的生成器那里,再将生成的 JavaScript 文件下载回来包含到网页中即可。

Typeface.js

Cufón
和 typeface.js 很相像,Cufón 也可以让你在网页中使用任意字体,同样,它也是使用一个生成器,将字体转换成 VML,将生成的 .js 文件包含到网页即可。

7. 调试与记录

Blackbird
人们经常使用 Alert() 调试 JavaScript 程序,Blackbird 提供了一个漂亮的控制台记录,查看,过滤程序的运行。

Blackbird

NitobiBug
基于浏览器的跨浏览器 javaScript 对象记录与检查工具。

NitobiBug

Firebug Lite
目前最好的 JavaScript 调试工具非 Firebug 莫属,然而该工具只支持 FireFox,将 Firebug Lite .js 文件插入你的网页,就可以在所有浏览器都实现 FireBug 功能。

Firebug Lite

8. 其它

swfobject
这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代码,并探测用户播放器版本。如果用户版本不支持,会显示备用内容。

swfobject

sorttabledragtable
不管你喜欢与否,table 仍然是最好的表现数据的方式,但可以更好地利用。sorttable 可以让表格数据排序,只需在 table 上加一个 class="sortable" 标志,还可以排除指定的栏。dragtable 让表格的栏可以拖动,在表格上加上 class="dragable" 标志即可,这两个类可以结合起来使用,只需加上 class="sortable dragtable" 即可。

DD_roundiesDD_belatedPNG
DD_roundies 可以不依赖图片实现圆角功能,只面向 IE, 通过 VML 实现,其它浏览器会被略过,因为那些浏览器本身支持 CSS 圆角。

JavaScript Rounded Corners

DD_belatedPNG 是为了解决 IE6 对 PNG 支持不好问题而开发的,不管 PNG 图片用于 src 还是 background-image,DD_belatedPNG 都能提供修补。

Custom JavaScript Dialog Boxes
一个只有 4.5K 的轻量 JavaScript 库,可以创建用户定制对话框,可显示4种类型的消息框,alerts, warnings, prompts, success。可以设定消息框标题,内容,以及过多长时间显示。

Custom Dialog Boxes

GameJS
GameJS 是微软的 XNA 游戏框架在 JavaScript 上的移植,使用 canvas 对象作为输出设备。JavaScript 不是最佳游戏平台,但对那些帧率较低的游戏也没有问题。

GameJS

Shortcuts.js
从 Google Reader 和 Gmail 开始,Web 程序中的快捷键开始流行起来。Shorcuts.js 让快捷键的处理变得简单。

Mapstraction
有不少地图提供商都提供不同 API,如果你要更换提供商,比如从 Google Maps 到 MapQuest,需要更新代码,Mapstraction 提供了常用地图提供商的 API,只需该一行代码就能完成转换。

Mapstraction

Amberjack
一个只有 4K 的微型 JavaScript 库,可以为你的网站添加漂亮的教程功能,一个模式窗口会以教程的形式显示任意内容,教程中的步骤可以通过手工编码实现或在线自动生成。可以使用主题或 CSS 控制内容的格式。

Amberjack

JsLoad
JsLoad 可以从 Google server 远程加载各种 JavaScript 库,可以自动加载各种版本的支撑库。

本文国际来源:http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源:COMSHARP CMS 官方网站

Posted on March 8, 2009 9:48 PM | | Comments (0) | TrackBacks (0)

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸臃肿。在某些场合,如果你只想完成特定的工作,可以使用 一些功能更专一的轻量库,本文介绍了40个非常出色的轻量级 JavaScript 库。

1. 表单相关
wForms
一个低调的开源项目,简化了绝大多数常用 JavaScript 表单功能,包含可以直接使用的表单验证功能,另外,还包含强大的表单同步以及表单条件判断功能。


Validanguage
又一个低调的 JavaScript 表单验证框架。它拥有集成逻辑,一些设置可以针对全局,单个表单或单个对象。提供两个API,集成 AJAX 支持,缓存,以及回调函数。它提供类似 HTML 的 API 语句,以及面向对象的 JavaScript API 。


LiveValidation

一个轻量的表单验证库。除了传统的验证功能,还提供实时验证,可以一边输入一遍验证。Ruby on Rails 用户可能会发现这个库非常好用,因为他们的命名规则和参数十分近似。该库既有独立版本,又有一个 Prototype 版本。

yav
一个强大,灵活,可扩展的表单验证库。支持各种场合,从简单的如日期,电子邮件地址以及整数的验证,到复杂的,如正则表达式。内置 AJAX 支持,输出的错误消息可以定位到对象级。

qForms
处理表单的整套方案。功能包括各种验证规则,防止多次发布的机制,以及锁定或解锁制定输入框。

formreform
不基于 table 的多栏设计向来是一个挑战。这个微型库将传统的表单变成漂亮的多栏形式。


2. 动画相关
$fx()
一个用来让 HTML 对象运动的轻量库。你可以在一个时间轴上改变任何 CSS 属性,对于复杂动画,你可以将各种效果结合起来,将对象分组,让它们并行运动。


JSTweener
一个生成中间帧的 JavaScript 库,它的 API 类似著名的中间帧引擎 Tweener。你可以指定动画时间,定义切换效果以及时延。在几乎任何点都可以触动事件。


Facebook Animation
一个强大的,用来创建可定制的,基于 CSS 的动画。在 Facebook 动画中,几行代码就可以改善 UI。语法和 FBJS (用于 Facebook 的库)一样。

FX
一个语法类似 YUI 的轻量 JavaScript 库,可以为几乎任何 CSS 属性创建中间帧。支持颜色和滚动动画,为对象设置 to 和 from 值就可以了。
3. 视觉与图形效果
JS charts
支持柱状图,圆饼图以及简单的曲线图。直接将这个库插入网页,然后从 XML 文件或 JavaScript 数组变量调用数据。PNG 格式,兼容所有主要浏览器。


Canvas 3D JS Library (C3DL)
C3DL 使 3D 程序的编写变得简单。提供一套数学,场景与 3D 对象类,可以直接在浏览器中开发 3D 内容,不需要很深的 3D 知识。


Processing.js
这是 Processing 语言在 JavaScript 的移植。2D输出功能丰富。提供了绘图,色彩处理,字体,对象等处理函数。


Raphaël
一个让人惊叹的 JavaScript 库,可以在 Web 上实现矢量图。使用 SVG, VML 创建的图形可以被更改或绑定事件。功能极其丰富,包括旋转,动画,缩放等。

ImageFX
该 JavaScript 库为图片添加效果,如虚化,锐化,浮雕,加亮等。ImageFX 使用画布对象实现这些效果,兼容所有主流浏览器。这个库非常容易使用,只要将 .js 库文件插入网页,调用那些函数即可。


Pixastic
Pixastic 使用 HTML5 画布对象,允许对原始像素进行操作。效果包括去饱和度,灰度级,反转,亮度,对比度调整,色调,饱和度调整,以及浮雕,虚化等效果。因为用到了 HTML 5 的画布对象,因此还无法兼容所有浏览器。

Reflection.js
一个很低调的 JavaScript 自动实现倒影效果。倒影的高度,透明度可以调整。支持所有主流浏览器,文件尺寸小于5K。

4. 数据库
Taffy DB
一个 JavaScript 库,可以看作浏览器中的 SQL Server,或高级数组管理器。在使用了 AJAX 的程序中,可以用作数据库层,可以创建,读取,编辑,删除数据,使用循环,排序以及高级查询。

ActiveRecord.js
这个库支持 Google Gears 以及 Chrome,Aptana Jaxer, Adobe AIR 以及任何支持 HTML 5 SQL 细则的平台(目前有 Webkit 以及 iPhone)。可以自动创建表,验证和同步数据。

本文国际来源:http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源:COMSHARP CMS 官方网站

Posted on March 5, 2009 6:03 PM | | Comments (0) | TrackBacks (0)
一、ASP
<%
host=lcase(request.servervariables("HTTP_HOST"))
'开始条件跳转
SELECT CASE host

CASE "blog.wjabc.com"
        response.redirect "/blog/"
CASE "bbs.wjabc.com"
        response.redirect "/bbs/"
case "cyle.wjabc.com"
        response.redirect "/cyle/"
case "www.wjabc.com"
        response.redirect "/cyle/"
CASE ELSE
        response.redirect "/main/"
END SELECT
%>

二、PHP

情况:多个域名都指向一台服务器的同一个文件夹"NNN",要求
www.ddd.com
www.eee.com
当URL为www.ddd.com的时候,页面自动跳转到NNN文件夹里的ddd
当URL为www.eee.com的时候,页面自动跳转到NNN文件夹里的index.htm
代码:

<?php
$domain_net="wjabc.net";
$domain_com="wjabc.com";
$dot_net_url="bbs/";
$dot_com_url="index.html";
if(($HTTP_HOST=="$domain_net")or($HTTP_HOST=="www.$domain_net"))
{
Header("Location: $dot_net_url");
}
elseif(($HTTP_HOST=="$domain_com")or($HTTP_HOST=="www.$domain_com"))
{
Header("Location: $dot_com_url");
}
else
{
include_once('hehe.php');
}
?>


三、JS代码:

<script>try {if( self.location == "http://wjabc.com/" ) {
top.location.href = "http://wjabc.com/directory";
}
else if( self.location == "http://gzcy.net/" ) {
top.location.href = "http://gzcy.net/directory";
}
else if( self.location == "http://gzzp.net/" ) {
top.location.href = "http://gzzp.net/directory";
}
else if( self.location == "http://vinzine.com/" ) {
top.location.href = "http://vinzine.com/directory";
}
else {document.write ("错误的访问地址")}} catch(e) {}</script>
Posted on March 4, 2009 11:37 PM | | Comments (0) | TrackBacks (0)
近日,知名技术开发网站SYS-CON 媒体列出十个应用最广的Javascript框架,文章说,Javascript库已经成为设计优秀网站的基础,当今几乎所有站点都带有Javascript或Ajax元素。在Web2.0开发大潮中,它也许是最关键的要素。

以下十个十大Javascript框架,你常用其中的几个?

1. script.aculo.us (http://script.aculo.us/)

 URL: http://script.aculo.us/.
文档: http://wiki.script.aculo.us/.
注释: script.aculo.us不是自己独立的framework,而是Prototype的附加组件。
 "script.aculo.us能为你提供使用简单、跨浏览器用户接口的JavaScript库,它让你的网站和程序如虎添翼。"

2. Prototype (http://www.prototypejs.org/)

 URL: http://www.prototypejs.org/.
Blog: http://www.prototypejs.org/blog.
文档: http://www.prototypejs.org/learn.

 "Prototype是让动态web程序开发更加简单的JavaScript framework。它为class-driven开发提供了独特简单的工具箱,并以目前最好的Ajax库著称。Prototype正在迅速成为每位 web程序开发者的codebase of choice。"

3. Moo Tools (http://www.mootools.net/)

 URL: http://www.mootools.net/.
Blog: http://blog.mootools.net/.
文档: http://docs.mootools.net/.
演示:http://demos.mootools.net/.

 "MooTools是精简而模式化的面向对象JavaScript framework,它专为从中级向高级迈进的JavaScript开发者设计。在它优雅、详细并且流畅的API帮助下,你能够写出强大、灵活、可跨浏览器使用的代码。"

4. jQuery (http://jquery.com/)

 URL: http://jquery.com/.
Blog: http://jquery.com/blog/.
文档: http://docs.jquery.com/.

 "jQuery是一个快速、简洁的JavaScript库,能够简化阅读HTML文档、处理事件、实现动画以及向网页添加Ajax互动等过程。jQuery改进了你编写JavaScript的方式。"

5. MochiKit (http://www.mochikit.com/)

 URL: http://www.mochikit.com/.
Blog: http://www.mochikit.com/blog.html.
文档: http://www.mochikit.com/doc/html/MochiKit/index.html.
演示:http://www.mochikit.com/demos.html.

 "MochKit-让JavaScript不那么差劲了。"

6. Rialto (http://rialto.improve-technologies.com/wiki/)

URL: http://rialto.improve-technologies.com/wiki/.
Blog: 无
文档: http://rialto.improve-technologies.com/js/doc/.
演示:http://rialto.improve-technologies.com/rialto/.

 "Rialto (Rich Internet Application Toolkit)是基于Ajax的跨浏览器Javascript小型工具集。"

7. Dojo Toolkit (http://dojotoolkit.org)
URL: http://dojotoolkit.org/about.
Blog: http://dojotoolkit.org/blog.
文档: http://dojotoolkit.org/docs.
演示:http://dojotoolkit.org/demos.

 "Dojo是用JavaScript编写的一款开源的DHTML工具箱。Dojo解决了DHTML部分历史遗留问题,这些问题曾让大量动态web程序开发无法实现。"

8. Spry Framework (http://labs.adobe.com/technologies/spry/)

URL: http://labs.adobe.com/technologies/spry/.
Blog: 无
文档: http://www.adobe.com/go/labs_gnav_wiki.
演示:http://www.adobe.com/go/labs_gnav_showcase.

 "为Ajax设计的Spry framework是一个能提供简单而强大Ajax功能的JavaScript库,它令开发者能开发出让用户有更丰富体验的页面。它还可以使Ajax的复杂度降低,以便设计师更为简单的创建Web2.0页面。"

9. ASP.NET Ajax Framework (http://asp.net/ajax/)

URL: http://asp.net/ajax/.
Blog: 无
文档: http://asp.net/ajax/documentation/.
演示:http://asp.net/ajax/showcase/.

 "ASP.NET AJAX是一款免费框架,能让你在各种流行浏览器上快速创建有效而互动的Web程序。"
10. Cean Ajax Framework (http://sourceforge.net/projects/clean-ajax/)
URL: http://sourceforge.net/projects/clean-ajax/.
Blog: 无
文档: http://sourceforge.net/docman/?group_id=145307.

 "简单易用的AJAX 框架,能提供消息排序, XSLT, XPath, 加密软件 (SHA1, MD5), Web服务入口 (SOAP, XMLRPC), JSON-RPC, 跨浏览器 AJAX以及 AJAX历史及缓存控制。"等功能。(CSDN)
Posted on February 20, 2009 1:47 PM | | Comments (0) | TrackBacks (0)
Opera 并没有像其他浏览器厂商一样只是在以前的成就上驻足不前。

今天,他们宣布了新的JavaScript引擎"Carakan",目前数度是其他已存在JavaScript引擎(基于SunSpider)的2.5倍。其在转化为本地机器代码时专门针对正则表达式做了优化(有意思的是,Chrome浏览器也刚刚宣布了此点)。

下面是他们的话:

我们正在努力来集中改善我们以前的引擎在三个主要领域:

1.基于寄存器的字节码。之前的引擎"ECMAScript"使用的是基于堆栈字节码指令集。这种基于对堆栈存取的方法对于生成字节码是比较简单的。

在新的引擎里,我们采用了基于寄存器的字节码指令集。这种方式采用了固定大小的寄存器,每次操作都可以访问任意的寄存器,更少的指令被执行并且不会拷贝大量的数据。

2.本地代码生成
。我们将整个或部分"ECMAScript"引擎编译到本地代码中以达到更快的执行速度。

3.自动对象分类。在新的引擎中每个对象都是被封装成类以存取不同的数据,这些类的划分是与原型保持一致的。(CSDN)
Posted on February 6, 2009 12:44 PM | | Comments (0) | TrackBacks (0)
1 2 3 4 5 6 7 8 9 10
相关内容
最新评论
[评论] : 电视导购的确很让人痛苦 网购还是专业的导购站比较好的!~ <a href="http://www.t
[评论] lindou : 试试用国产的speedphp框架吧,那速度挺快的,而且教程比较多。
[评论] allsyringefilters : 哎,这是雅虎的悲哀啊..当年那么高的价格收购,到如今...哎
[评论] : 互动娱乐找链接 www.9yni.com 有意者赶紧联系!~
[评论] mirypath : 第一次来,收益匪浅。怎么订阅不了啊,那收藏起来。
[评论] nick : 推荐一个和好用的ASN.1编译器 ,香农asnlab的编译器,编解码速率快。支持GUI ,
[评论] 李伟打 : 360不只是与金山打架了,它与很多正规安全厂商都不和气,这是为什么呢。。
[评论] andy : 楼主写得逻辑错了,开始是谈这种形式得到的结果. 下面我们换用", 到底前半部分是谈jsp:i
[评论] 无涯博客 : 最近几年里,淘宝还做不这么强大。 毕竟传统行业的根基太厚。
[评论] : 第24句我记得好象是 不要自找麻烦 吧