aptana studio 3 添加jquery 提示功能

aptana 3 相比之前的aptana 2,在代码提示的选择上有一点改变。以前是直接到插件中心下载,然后再到editor里面打对勾的,现在应该找不到了(确切的说是换地方也换名称了) aptana studio 3使用的是PortableGit的方式进行插件扩展,如果要装插件,则需要先安装aptana 3 的PortableGit。一般安装完aptana 3 首次打开时也会提示你安装的。 如果不打算安装PortableGit,也可以直接下载。 1、先说PortableGit下安装jquery代码提示插件的方法: 依次点击 Commands > Bundle Development > Install Bundle > jQuery。 这时会开始下载jquery插件包进行安装。 然后在项目里应用jquery。 依次点击 Properties > Project Build Path > jQuery 1.6.2 然后选择 相应的Jquery库即可。 整个过程无误的话,就可以使用jquery代码提示啦。

如果无法安装,可以试试直接把安装包下载(下载地址:https://github.com/aptana/javascript-jquery.ruble),然后放到目录:C:\Users\【用户名】\Aptana Rubles\javascript-jquery.ruble\ 下试试。

 

2、另外一种安装方法是

首先下载:https://raw.github.com/aptana/javascript-jquery.ruble/master/support/jquery.1.4.2.sdocml 一定 要保证是.sdocml文件不是文本文档,此链接打开后可能是一个文本网页,将网页中的内容复制保存为jquery.1.4.2.sdocml文件。

再下载:http://code.jquery.com/jquery-1.4.1-vsdoc.js

然后把这2个文件放到项目的根目录下(其实任意目录都可以),然后重启aptana就可以了。具体可查看https://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries

jquery获取图片真实宽高

var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

即将图片在内存里读取一遍即可。

Jquery利用getScript实现跨域请求数据

假设http://www.otherdomain.com/data.js 这个远程文件data.js内容如下:

testData={
    "rool": [
        {
            "desc": "小鸟_描述",
            "img": "http://t2.qpic.cn/mblogpic/47962be47270d036517c/160",
            "link": "2907109968",
            "title": "小鸟_标题"
        }
    ],
    "blockid": 1,
    "itemid": 1,
    "opt": 0,
    "pageid": 1,
    "tot": 1,
    "tplid": 0,
    "type": "mod_list_pic"
};
jQuery.getScript("http://www.otherdomain.com/data.js", function(){
   var data = testData;
   alert(data["rool"][0]["desc"]);//输出 “小鸟_描述”
});

说明:ajax不能跨域问题,大家应该都清楚。但是script标签能够加载其他域的文件,所以我们可以利用这点,进行跨域get操作。
这种方案要求跨域文件返回的数据必须是合法的JSON格式或者如JS文件的格式。
这种方式比较简单,只需要几行代码即可。如果不用jquery的话,可以通过动态创建script标签,然后设置src值,不过得注意判断script内容加载是否完成。

当然,跨域的方法很多,这里说的只是其中一种。

jquery扩展的2种方法比较

jQuery.extend = jQuery.fn.extend = function() {
     ...
};

我们可以用$.extend去扩展自定义的对象,如:

var myself = {name:jack};
$.extend(myself, {setName:function)(n){this.name=n;} });
myself.setName("tom");

通过$.extend为对象myself添加了setName方法。但这里主要讨论$.extend如何构建jquery库的。不知注意到上面代码中jQuery.extend和jQuery.fn.extend是同一个函数。我们浏览下jquery库,发现有些方法是通过调用jQuery.extend扩展的,有的则是通过调用jQuery.fn.extend扩展的。下面分别讨论:

1,通过jQuery.extend扩展

我们知道jQuery.extend中的jQuery类型是function,即typeof jQuery值为字符串“function”。如果把jQuery当成一个类,jQuery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。即jQuery.extend(…),jQuery又被赋值给$。因此我们更习惯$.extend(…)。

源码中直接调用jQuery.extend方法,只传一个参数。如下:

jQuery.extend({
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
...
});

我们知道extend中如果只传一个参数,那么将执行该句:

target = this;
[/js]

即扩展自己,而这里的this则是function jQuery。也就是说给function jQuery添加了许多静态方法,这些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$(“#id”).xx。也许下面这个例子更容易理解:

function fun(){}//定义一个类(函数)

//为该类(函数)添加一个静态方法extend
fun.extend=function(obj){
for(var a in obj)
this[a] = obj[a];//注意:这里的tihs即fun
}

//调用extend为该类添加了静态属性name,静态方法method1
fun.extend({name:"fun",method1:function(){}});

//输出name,prototype,extend,method1
console.dir(fun)

因此,jquery中的isFunction, isArray, trim等都是静态方法,只能通过$.isFunction, $.isArray, $.trim来调用。而不能通过$(“…”).isFuction, $(“…”).isArray, $(“…”).trim调用。

2,通过jQuery.fn.extend扩展

jQuery.fn等于jQuery.prototype,也就是说给function jQuery的原型(prototype)上挂了个extend方法。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行

target = this;

而这时的this则是jQuery.prototype(上面则是jQuery函数自身)。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。该函数会new一个jQuery(见上一篇jquery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解:

function fun(){}//定义一个类(函数)

//给该类原型上添加一个方法extned
fun.prototype.extend = function(obj){
	for(var a in obj)
		this[a] = obj[a];//注意:这里的this即是fun.prototype
}			

//调用extend方法给fun.prototype上添加属性,方法
fun.prototype.extend({name:"fun2",method1:function(){}})

//输出name,extend,method1
console.dir(new fun())

因此扩展的属性或方法都添加到jquery对象上了。
如bind, one, unbind等可以通过$(“…”).bind, $(“…”).one, $(“…”).unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。

jquery库与prototype库一样都是通过extend方法扩展出整个库的。相对来说jqueyr的扩展方式更难理解一些。
总结如下:
a,jQuery.extend({…})是给function jQuery添加静态属性或方法
b,jQuery().extend({…})是给jquery对象添加属性或方法。

ps:这里的jQuery即为$。

最后附一个jq1.4 extend源码分析:

/*!
 * jQuery源码分析-extend函数
 * jQuery版本:1.4.2
 * 
 * ----------------------------------------------------------
 * 函数介绍
 * jQuery.extend与jQuery.fn.extend指向同一个函数对象
 * jQuery.extend是jQuery的属性函数(静态方法)
 * jQuery.fn.extend是jQuery函数所构造对象的属性函数(对象方法)
 *
 * ----------------------------------------------------------
 * 使用说明
 * extend函数根据参数和调用者实现功能如下:
 * 1.对象合并:
 * 对象合并不区分调用者,jQuery.extend与jQuery.fn.extend完全一致
 * 也就是说对jQuery对象本身及jQuery所构造的对象没有影响
 * 对象合并根据参数区分,参数中必须包括两个或两个以上对象
 * 如:$.extend({Object}, {Object}) 或 $.extend({Boolean},{Object}, {Object})
 * 对象合并返回最终合并后的对象,支持深度拷贝
 * 
 * 2.为jQuery对象本身增加方法:
 * 这种方式从调用者和参数进行区分
 * 形式为 $.extend({Object})
 * 这种方式等同于 jQuery.{Fnction Name}
 * 
 * 3.原型继承:
 * 原型继承方式可以为jQuery所构造的对象增加方法
 * 这种方式也通过调用者和参数进行区分
 * 形式为 $.fn.extend({Object})
 * 这种方式实际上是将{Object}追加到jQuery.prototype,实现原型继承
 * 
 * ----------------------------------------------------------
 * 
 */
 
// jQuery.fn = jQuery.prototype
// jQuery.fn.extend = jQuery.prototype.extend
jQuery.extend = jQuery.fn.extend = function(){

    //目标对象
    var target = arguments[0] || {},    
    
    //循环变量,它会在循环时指向需要复制的第一个对象的位置,默认为1
    //如果需要进行深度复制,则它指向的位置为2
    i = 1,    
    
    //实参长度
    length = arguments.length,    
    
    //是否进行深度拷贝
    //深度拷贝情况下,会对对象更深层次的属性对象进行合并和覆盖
    deep = false,    
    
    //用于在复制时记录参数对象
    options,    
    
    //用于在复制时记录对象属性名
    name,    
    
    //用于在复制时记录目标对象的属性值
    src,    
    
    //用于在复制时记录参数对象的属性值
    copy;
    
    //只有当第一个实参为true时,即需要进行深度拷贝时,执行以下分支
    if (typeof target === "boolean") {
        //deep = true,进行深度拷贝
        deep = target;
        
        //进行深度拷贝时目标对象为第二个实参,如果没有则默认为空对象
        target = arguments[1] || {};
        
        //因为有了deep深度复制参数,因此i指向的位置为第二个参数
        i = 2;
    }
    
    //当目标对象不是一个Object且不是一个Function时(函数也是对象,因此使用jQuery.isFunction进行检查)
    if (typeof target !== "object" && !jQuery.isFunction(target)) {
        
        //设置目标为空对象
        target = {};
    }
    
    //如果当前参数中只包含一个{Object}
    //如 $.extend({Object}) 或 $.extend({Boolean}, {Object})
    //则将该对象中的属性拷贝到当前jQuery对象或实例中
    //此情况下deep深度复制仍然有效
    if (length === i) {
        
        //target = this;这句代码是整个extend函数的核心
        //在这里目标对象被更改,这里的this指向调用者
        //在 $.extend()方式中表示jQuery对象本身
        //在 $.fn.extend()方式中表示jQuery函数所构造的对象(即jQuery类的实例)
        target = this;
        
        //自减1,便于在后面的拷贝循环中,可以指向需要复制的对象
        --i;
    }
	
	//循环实参,循环从第1个参数开始,如果是深度复制,则从第2个参数开始
    for (; i < length; i++) {
        
        //当前参数不为null,undefined,0,false,空字符串时
        //options表示当前参数对象
        if ((options = arguments[i]) != null) {
            
            //遍历当前参数对象的属性,属性名记录到name
            for (name in options) {
                
                //src用于记录目标对象中的当前属性值
                src = target[name];
                
                //copy用于记录参数对象中的当前属性值
                copy = options[name];
                
                //存在目标对象本身的引用,构成死循环,结束此次遍历
                if (target === copy) {
                    continue;
                }
                
                //如果需要进行深度拷贝,且copy类型为对象或数组
                if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
                
                    //如果src类型为对象或数组,则clone记录src
                    //否则colne记录与copy类型一致的空值(空数组或空对象)
                    var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src : jQuery.isArray(copy) ? [] : {};
                    
                    //对copy迭代深度复制
                    target[name] = jQuery.extend(deep, clone, copy);
                    
                    //如果不需要进行深度拷贝
                } else if (copy !== undefined) {
                    
                    //直接将copy复制给目标对象
                    target[name] = copy;
                }
            }
        }
    }
    
    //返回处理后的目标对象
    return target;
};


/**
 * jQuery框架本身对extend函数的使用非常频繁
 * 典型示例为jQuery.ajax
 * 
 */

//使用extend对jQuery对象本身进行扩展,只给了一个参数对象
//该对象中的属性将被追加到jQuery对象中
jQuery.extend({
 
    //jQuery.ajax
    //$.ajax
 
    //这里的origSettings参数是自定义的ajax配置
    //jQuery对象本身有一个ajaxSettings属性,是默认的ajax配置
    ajax: function(origSettings){ 
 
        //这里使用extend对ajax配置项进行合并
        //第一个参数表示进行深度拷贝
        //首先将第3个参数jQuery.ajaxSettings(即jQuery默认ajax配置)复制到第2个参数(一个空对象)
        //然后将第4个参数(自定义配置)复制到配置对象(覆盖默认配置)
        //这里的s就得到了最终的ajax配置项
        var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
  
        //其它相关代码...(省略)
    }
}); 

50个非常有用的javascript和jquery特效插件

这篇文章没做翻译,反正也凑合能看懂吧。大概看看图,需要的话点击进去看具体插件介绍。

个人感觉这50个插件,有部分还是很不错的。留下做个标记以后好找。呵呵~~

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

JS-03 in 50 Useful JavaScript and jQuery Techniques and Plugins

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

JS-39 in 50 Useful JavaScript and jQuery Techniques and Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

JS-00 in 50 Useful JavaScript and jQuery Techniques and Plugins

Nivo Slider
The Most Awesome jQuery Image Slider

JS-02 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

JS-04 in 50 Useful JavaScript and jQuery Techniques and Plugins

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

JS-05 in 50 Useful JavaScript and jQuery Techniques and Plugins

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

JS-06 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

JS-07 in 50 Useful JavaScript and jQuery Techniques and Plugins

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

JS-08 in 50 Useful JavaScript and jQuery Techniques and Plugins

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

JS-09 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

JS-10 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery MegaMenu Plugin

JS-11 in 50 Useful JavaScript and jQuery Techniques and Plugins

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

JS-13 in 50 Useful JavaScript and jQuery Techniques and Plugins

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

JS-14 in 50 Useful JavaScript and jQuery Techniques and Plugins

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

JS-15 in 50 Useful JavaScript and jQuery Techniques and Plugins

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

JS-16 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

JS-17 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

JS-18 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

JS-19 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

JS-20 in 50 Useful JavaScript and jQuery Techniques and Plugins

Extending jQuery’s selector capabilities

JS-21 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

JS-22 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

JS-24 in 50 Useful JavaScript and jQuery Techniques and Plugins

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

JS-26 in 50 Useful JavaScript and jQuery Techniques and Plugins

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

JS-27 in 50 Useful JavaScript and jQuery Techniques and Plugins

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JS-28 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Shell
A command-line interface for JavaScript and DOM.

JS-29 in 50 Useful JavaScript and jQuery Techniques and Plugins

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JS-30 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
– The Old-School Way
– Singleton
– Module Pattern
– Revealing Module Pattern
– Custom Objects
– Lazy Function Definition

JS-31 in 50 Useful JavaScript and jQuery Techniques and Plugins

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

JS-32 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

JS-33 in 50 Useful JavaScript and jQuery Techniques and Plugins

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

JS-34 in 50 Useful JavaScript and jQuery Techniques and Plugins

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

JS-35 in 50 Useful JavaScript and jQuery Techniques and Plugins

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

JS-36 in 50 Useful JavaScript and jQuery Techniques and Plugins

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

JS-37 in 50 Useful JavaScript and jQuery Techniques and Plugins

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

JS-38 in 50 Useful JavaScript and jQuery Techniques and Plugins

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

JS-40 in 50 Useful JavaScript and jQuery Techniques and Plugins

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

JS-41 in 50 Useful JavaScript and jQuery Techniques and Plugins

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

JS-43 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

JS-47 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Collapsing and Expanding Table Rows

JS-48 in 50 Useful JavaScript and jQuery Techniques and Plugins

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

JS-49 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Grid Plugin

JS-50 in 50 Useful JavaScript and jQuery Techniques and Plugins

Pines Notify jQuery Plugin
Pines Notify’s features include:
– Timed hiding with visual effects.
– Sticky (no automatic hiding) notices.
– Optional hide button.
– Supports dynamically updating text, title, icon, type…
– Stacks allow notice sets to stack independently.
– Control stack direction and push to top or bottom.

JS-51 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

JS-52 in 50 Useful JavaScript and jQuery Techniques and Plugins

原文转自:http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

用jquery插件创建视觉震撼的网站

HoverFade

Demo Download

jQuery-Notes 1.0.2

Demo Download

gMap – Google Maps Plugin For jQuery

Demo Download

jQuery Menu Style

Demo Download

Contextual Slideout Tips With jQuery & CSS3

Demo Download

Growl

Demo Download

Animate Panning Slideshow with jQuery

Demo Download

jQuery Masonry

Demo Download

jQuery Quicksand

Demo Download

Jquery Plugin MopSlider 2.4

Demo Download

jQuery color plugin xcolor

Demo Download

jQuery Image Scroller

Demo Download

Auto-Playing Featured Content Slider

Demo Download

Horinaja

Demo Download

Slide Deck

Demo Download

Automatic Image Slider w/ CSS & jQuery

Demo Download

Create a Slick and Accessible Slideshow Using jQuery

Demo Download

Fancy Thumbnail Hover Effect w/ jQuery

Demo Download

Coda Slider Effect

Demo Download

Micro Image Gallery: A jQuery Plugin

Demo Download

Image Highlighting and Preview with jQuery

Demo Download

Textarea Words, Characters counter and maxlength plugin

Demo Download

GOOGLE CHARTS

Demo Download

IdmgAreaSelect

Demo Download

jQuery Bookmark

Demo Download

Poshy Tip

Demo Download

jqPlot Charts and Graphs for jQuery

Demo Download

jQuery MegaMenu Plugin

Demo Download

FullCalendar – Full-sized Calendar jQuery Plugin

Demo Download

jQuery Canvas Loader

Demo Download

Meerkat

Demo Download

jQuery PhotoShoot Plugin 1.0

Demo Download

jqFancyTransitions

Demo Download

jQuery Slider plugin (Safari style)

Demo Download

jTextTranslate: A jQuery Translation Plugin

Demo Download

xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin

Demo Download

Get TopUp!

Demo Download

FireQuery – Firebug extension for jQuery development

Demo Download

ImagineMenu

Demo Download

Jquery AjaxSuggest

Demo Download

Ajax File Uploader

Demo Download

3d Tag Sphere

Demo Download

(MB)Extruder

Demo Download

jQuery Simple Multi-Select

Demo Download

Fancy Box

Demo Download

转自:http://www.smashingapps.com/2010/09/28/awesome-jquery-plugins-and-techniques-to-create-visually-excellent-websites.html

JavaScript单元测试框架介绍

  • FireUnit

介绍:这个是John Resig另起炉灶做的,在他的博客John Resig – FireUnit: JavaScript Unit Testing Extension,发布了他与Jan Odvarko合作开发的基于Firebug的扩展FireUnit。
简单说来,FireUnit给Firebug增加了一个标签面板,并提供了一些简单的JavaScript API来记录和查看测试。参考:http://shawphy.com/2008/12/fireunit.html
评价:FireUnit在易用性上表现非常出众,非常适合基于Firebug做调试环境的前端工程师。

  • QUnit

介绍:QUnit 是一款强大而且容易使用的JavaScript 测试框架,它被用于jQuery 与其插件的测试,同时它也同样可以测试普通的JavaScript 代码。参考:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

评价:QUnit是一款易用的,基于jQuery的测试框架,如果项目中用到jquery,推荐用QUnit做单元测试。

  • jsUnit

介绍:系统化的解决方案,基于XNuit规范,如果你会使用jUnit、NUnit等框架,对这个应该会很容易上手,且包括服务器端(Java的)。参考:http://www.jsunit.net/

评价:非常全面,专业,适合大型企业级开发。

  • Test.Simple & Test.More

介绍:这个是jQuery之父John Resig在他的著作《Pro Javascript》中推荐的测试框架

参考:http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/Test/Simple.html
评价:非常容易上手,非常简洁,适合中小型项目快速引入单元测试。

总结:推荐使用Qunit和FireUnit。

Jquery实现广告弹窗(背投),绕过所有浏览器拦截

PopUpAdClass = { };
PopUpAdClass = new function() {
 // Private fields
 var that = this;
 var windowHandles = {};
 var isChrome = /chrome/.test(navigator.userAgent.toLowerCase());

 // Public Members
 this.focus = function(windowHandle) {
 if (!windowHandle) {
 throw new Exception("Window handle can not be null.");
 }

 if (isChrome) {
 windowHandle.blur();
 setTimeout(windowHandle.focus, 0);;
 }
 else {
 windowHandle.focus();
 }
 }

 this.windowExists = function(windowTarget) {
 return windowTarget &amp;&amp; windowHandles[windowTarget] &amp;&amp; !windowHandles[windowTarget].closed;
 }

 this.open = function(url, windowTarget, windowProperties) {
 // See if we have a window handle and if it's closed or not.
 if (that.windowExists(windowTarget)) {

 // We still have our window object so let's check if the URLs is the same as the one we're trying to load.
 var currentLocation = windowHandles[windowTarget].location;

 if (
 (
 /^http(?:s?):/.test(url) &amp;&amp; currentLocation.href !== url
 )
 ||
 (
 // This check is required because the URL might be the same, but absolute,
 // e.g. /Default.aspx ... instead of http://localhost/Default.aspx ...
 !/^http(?:s?):/.test(url) &amp;&amp;
 (currentLocation.pathname + currentLocation.search + currentLocation.hash) !== url
 )
 ) {
 // Not the same URL, so load the new one.
 windowHandles[windowTarget].location = url;
 }

 // Give focus to the window. This works in IE 6/7/8, FireFox, Safari but not Chrome.
 // Well in Chrome it works the first time, but subsequent focus attempts fail,. I believe this is a security feature in Chrome to avoid annoying popups.
 that.focus(windowHandles[windowTarget]);
 }
 else {
 // Need to do this so that tabbed browsers (pretty much all browsers except IE6) actually open a new window
 // as opposed to a tab. By specifying at least one window property, we're guaranteed to have a new window created instead
 // of a tab.
 //windowProperties = windowProperties || 'menubar=yes,location=yes,width=700, height=400, scrollbars=yes, resizable= yes';
 windowProperties = windowProperties || 'menubar=yes,location=yes,width=' + (screen.availWidth - 15) + ', height=' + (screen.availHeight - 140) + ', scrollbars=yes, resizable= yes';
 windowTarget = windowTarget || "_blank";

 // Create a new window.
 var windowHandle = windowProperties ? window.open(url, windowTarget, windowProperties) : window.open(url, windowTarget);

 if (null === windowHandle || !windowHandle) {
 alert("You have a popup blocker enabled. Please allow popups for " + location.protocol + "//" + location.host);
 }
 else {
 if ("_blank" !== windowTarget) {
 // Store the window handle for reuse if a handle was specified.
 windowHandles[windowTarget] = windowHandle;
 windowHandles[windowTarget].focus();
 }
 }
 }
 }
}
调用
$(document).click(function(){
		PopUpAdClass.open("http://www.ghugo.com/popup.html",'_blank');
//这个是背投功能,popup 弹出来来或马上失去焦点,最大限度的兼顾用户体验。
		PopUpAdClass.focus(window);
//popup一次就好啦,整天弹会让人反感滴。
		$(document).unbind("click");
	})

扩展阅读:
http://stackoverflow.com/questions/2758608/window-focus-not-working-in-google-chrome
http://www.planabc.net/2008/03/05/ad_back_pop/
http://www.cnblogs.com/birdshome/archive/2007/12/22/window-open.html

Ecshop与Jquery冲突的解决办法

ecshop 居然与 jquery 冲突,实在杯具。
网上一搜大多说是 transport.js 的Object.prototype.toJSONString 方法导致的。

ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。

但恰恰的,在封装JSON各种方法的同时对object的模型进行了重写,这个就跟jQuery冲突了。因为众所周知的,jQuery对各种JavaScript对象进行了扩展。

这一切其实都很容易理解,各有各的理由十分自然,但头痛和无奈的就变得在我们这些使用者身上了。在ECShop论坛上原来也有很多朋友提出了这个问题,也提出了各种各样的方法,我尝试了一些,不好或者甚至无用,所以只好自己动手了。

解决思路大概就是屏蔽ECshop扩展的toJSONString方法,用别的函数代替。

为了照顾下小菜们,就写详细点吧。

1,首先复制一份 transport.js 改名为 transport.org.js 提供给后台使用

2,屏蔽掉transport.js里的toJSON功能 行数大概有497-737行之间
修改352行为:

1. legalParams = “JSON=” + $.toJSON(params);

复制代码

修改408行为:

1. result = $.evalJSON(result);

复制代码

3,修改index.js文件44行改为:

1. var res = $.evalJSON(result);

复制代码

4,修改common.js文件
第34行改为:

1. Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), addToCartResponse, ‘POST’, ‘JSON’);

复制代码

第850行改为:

1. Ajax.call(‘flow.php?step=add_package_to_cart’, ‘package_info=’ + $.toJSON(package_info), addPackageToCartResponse, ‘POST’, ‘JSON’);

复制代码

第1056行改为:

1. Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), addToCartResponse, ‘POST’, ‘JSON’);

复制代码

5,修改compare.js文件
第49行改为:

1. this.data = $.evalJSON(cookieValue);

复制代码

第67行改为:

1. var obj = $.evalJSON(cookieValue);

复制代码

第133行改为:

1. document.setCookie(“compareItems”, $.toJSON(this.data));

复制代码

6, 修改global.js文件
第16行改函数名 :function $e()
第114和126行都改为:    var element = $e(element);

<!———–路径修改———–>
修改后台头部引入transport.js路径 admin/templates/pageheader.htm 第9行改为: {insert_scripts files=”../js/transport.org.js,common.js”}

修改themes/default/library/page_header.lbi文件在{insert_scripts files=’transport.js,utils.js’}上面加上如下代码
{insert_scripts files=’jquery.js,jquery.json.js,other.js’}

<!—–修改文件—–>
library/comment_list.lbi
第188行 :

1. Ajax.call(‘comment.php’, ‘cmt=’ + $.toJSON(cmt), commentResponse, ‘POST’, ‘JSON’);

复制代码

compare.dwt
第20行 :

1. var obj = $.evalJSON(document.getCookie(“compareItems”));

复制代码

第24行 :

1. document.setCookie(“compareItems”, $.toJSON(obj));

复制代码

flow.dwt
第138行 :

1. Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), collect_to_flow_response, ‘POST’, ‘JSON’);

复制代码

第199行 :

1. Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), fittings_to_flow_response, ‘POST’, ‘JSON’);

复制代码

<!—–jquery文件需置顶的dwt文件—-jquery.js文件需要在compare.js文件加载前加载,否则会报错—–>

brand.dwt
brand_list.dwt
category.dwt
exchange_list.dwt
search.dwt

如:
{* 包含脚本文件 *}
{insert_scripts files=’jquery.js,jquery.json.js,other.js’}
{insert_scripts files=’common.js,global.js,compare.js’}

很高兴,你能看到这里,如果嫌太麻烦,也可以直接下载文件覆盖过去。我把需要修改的文件都打包了。哈哈。。

下载地址:ecshop-jquery