Что нового в этой версии:

• Улучшена производительность; особенно это относится к IE.
• Добавлена поддержка события onDomReady. Теперь скрипт инициализируется не дожидаясь, пока загрузятся все изображения. Вам не нужно отныне добавлять инициализацию скрипта в window.onload, достаточно просто lightgallery.init(); (однако старая конфигурация с window.onload также будет работать).
• Добавлены 2 новые темы. Одна из них – shape, любезно предоставлена Shape Design Studio, за что им большое спасибо.
• Исправлен ряд мелких багов.

Смотреть демоСкачать

Страница проектаСтраница проекта на Google Code

Как оказалось, такое выражение будет работать правильно не во всех браузерах, поскольку символ “\s” реализован в них по-разному и некоторые символы не трактуются как “пробельные”. Подробней об этом можете прочитать здесь (англ.). Из этого же источника привожу результаты сравнительных тестов, показывающих различие в работе со строками в различных браузерах.

Как вариант решения этой проблемы, вместо выражения “\s” можно использовать группировку по симолам Unicode для обрезаемых символов:

[\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029]

Один из вариантов реализации функций trim, trimLeft и trimRight с использованием такой группировки я нашел в библиотеке vice-versa:

/** vice-versa String
 * @author      Andrea Giammarchi
 * @license     Mit Style License
 * @blog        http://webreflection.blogspot.com/
 * @project     http://code.google.com/p/vice-versa/
 * @version     0.20090710192302
 * @note        these method are about ECMAScript 5
 */

/** full specs String prototype trim, trimLeft, and trimRight
 * @target  Chrome, FireFox < 3.5, Internet Explorer, Opera, Safari
 */
(function(trim){
    var o = {
        trim:new RegExp("^" + trim + "|" + trim + "$", "g"),
        trimLeft:new RegExp("^" + trim),
        trimRight:new RegExp(trim + "$")
    },  k;
    for(k in o)
        if(!String.prototype[k])
            String.prototype[k] = (function(trim){
                return function(){
                    return this.replace(trim, "");
                };
            })(o[k]);
    delete o;
    delete k;
})("[\\x09\\x0A-\\x0D\\x20\\xA0\\u1680\\u180E\\u2000-\\u200A\\u2028\\u2029\\u202F\\u205F\\u3000]+");

Источник: http://code.google.com/p/vice-versa/source/browse/trunk/src/String.js.

Представленный ниже плагин перед копированием сжимает скрипты и стили. Но учтите, что YUI-Compressor требует, чтобы была установлена Java:

<?php
/**
 * Uses the Phing Task
 */
require_once 'phing/Task.php';

/**
 * Task to compress files using YUI Compressor.
 *
 * @author      Keith Pope
 */
class kpMinTask extends Task
{
    /**
     * path to YuiCompressor
     *
     * @var  string
     */
    protected $yuiPath;

    /**
     * the source files
     *
     * @var  FileSet
     */
    protected $filesets    = array();

    /**
     * Whether the build should fail, if
     * errors occured
     *
     * @var boolean
     */
    protected $failonerror = false;

    /**
     * directory to put minified javascript files into
     *
     * @var  string
     */
    protected $targetDir;

    /**
     * sets the path where JSmin can be found
     *
     * @param  string  $yuiPath
     */
    public function setYuiPath( $yuiPath )
    {
        $this->yuiPath = $yuiPath;
    }

    /**
     *  Nested creator, adds a set of files (nested fileset attribute).
     */
    public function createFileSet()
    {
        $num = array_push( $this->filesets, new FileSet() );
        return $this->filesets[$num - 1];
    }

    /**
     * Whether the build should fail, if an error occured.
     *
     * @param boolean $value
     */
    public function setFailonerror( $value )
    {
        $this->failonerror = $value;
    }

    /**
     * sets the directory compressor traget dir
     *
     * @param  string  $targetDir
     */
    public function setTargetDir( $targetDir )
    {
        $this->targetDir = $targetDir;
    }

    /**
     * The init method: Do init steps.
     */
    public function init()
    {
        return true;
    }

    /**
     * The main entry point method.
     */
    public function main()
    {
        $command = 'java -jar {yuipath} {src} -o {target}';

        foreach( $this->filesets as $fs )
        {
            try
            {
                $files    = $fs->getDirectoryScanner( $this->project )->getIncludedFiles();
                $fullPath = realpath( $fs->getDir( $this->project ) );

                foreach( $files as $file )
                {
                    $this->log( 'Minifying file ' . $file );

                    $target = $this->targetDir . '/' . str_replace( $fullPath, '', $file );

                    if( file_exists( dirname( $target ) ) == false )
                    {
                        mkdir( dirname( $target ), 0700, true );
                    }

                    $cmd = str_replace( '{src}', $fullPath . DIRECTORY_SEPARATOR . $file, $command );
                    $cmd = str_replace( '{target}', realpath( $target ), $cmd );
                    $cmd = str_replace( '{yuipath}', realpath( $this->yuiPath ), $cmd );

                    $output = array();
                    $return = null;

                    exec( $cmd, $output, $return );

                    foreach( $output as $line )
                    {
                        $this->log( $line, Project::MSG_VERBOSE );
                    }

                    if( $return != 0 )
                    {
                      throw new BuildException( "Task exited with code $return" );
                    }

                }
            } 

            catch( BuildException $be )
            {
                // directory doesn't exist or is not readable
                if ($this->failonerror)
                {
                    throw $be;
                }
                else
                {
                    $this->log($be->getMessage(), $this->quiet ? Project::MSG_VERBOSE : Project::MSG_WARN);
                }
            }
        }
    }
}

Сохраните этот файл в папке build/extended/tasks/kpMinTask.php, а yuicompressor в build/tools/yuicompressor.jar. Здесь, build – это папка, в которой находится XML файл сборки.

Далее, в файле сборки build.xml добавляем задачи для сжатия:

<taskdef name="minify" classname="extended.tasks.kpMinTask" />

<target name="minify-js">
    <echo>--------------------------------</echo>
    <echo>| Minify javascript to release |</echo>
    <echo>--------------------------------</echo>
    <minify targetDir="${DEPLOY_DIR}/public/js/"
              yuiPath="tools/yuicompressor.jar">
        <fileset dir="${TRUNK_PATH}/public/">
                <include name="js/*.js" />
                <include name="js/**/*.js" />
        </fileset>
    </minify>
</target>

<target name="minify-css">
    <echo>--------------------------------</echo>
    <echo>| Minify CSS to release |</echo>
    <echo>--------------------------------</echo>
    <minify targetDir="${DEPLOY_DIR}/public/"
              yuiPath="tools/yuicompressor.jar">
        <fileset dir="${TRUNK_PATH}/public/css/">
                <include name="css/**/*.css" />
                <include name="css/*.css" />
        </fileset>
    </minify>
</target>

Теперь, для выполнения сжатия/копирования файлов нужно запустить задачу minify-js или minify-css или включить их в другую задачу.

Если у вас нет возможности использовать YUI-Compressor (например нет java на хостинге), то можете воспользоваться другими скриптами: JSMin и CSSMin. Подробнее о том, как их использовать вместе с Phing читайте здесь.

В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.

Наш плагин начинаем следующим образом:

(function($){
    $.fn.backgroundHover = function(options) {
       return this.each(function () {
          // Код плагина
       });
    };
})(jQuery);

Первая и последняя строка этого блока представляют собой вызов анонимной функции, единственным аргументом которого будет объект jQuery. В результате, мы получим еще одну область определения переменных (scope), то есть, все переменные и функции, объявленные внутри этой анонимной функции будут недоступны извне (не распространяются на глобальную область видимости window). Поскольку плагин выполняет действия над некоторым множеством элементов DOM в одном вызове, то мы должны обрабатывать все эти элементы в одном цикле. Это делается при помощи функции each в строке 3.

Все плагины способны принимать некоторое количество параметров, выполним эту функциональность следующим образом:

$.fn.backgroundHover = function(options) {
      options = $.extend({
         background: 'red',
      }, options);

Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае, имеем всего лишь один параметр – цвет фона (background), по умолчанию он имеет значение red.

Ну и последний шаг – добавляем функциональность плагина внутрь функции each:

var self = $(this);
   self.mouseover(function() {
      self.oldBG = self.css('backgroundColor');
      self.css('backgroundColor',options.background);
   });

   self.mouseout(function() {
      self.css('backgroundColor',self.oldBG);
   });

В первой строке мы создаем переменную self, которая будет ссылаться на текущий элемент DOM. Для всех выбранных элементов будут добавлены два обработчика событий – mouseover и mouseout, которые будут менять цвет фона в соответсвии с параметром options.background.

На этом создание плагина закончено, используется он следующим образом:

$('.someNodes').backgroundHover({background: "#fce"});

Исходный код плагина можно посмотреть здесь: background.jquery.js.

Демо примерИсточник

http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2-vsdoc.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js

Помимо основной библиотеки, на CDN можно также найти и плагин для валидации форм jQuery Validate, статью о котором я писал ранее:

http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js
http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

Ну и уж совершенно очевидно, что на своем CDN-е Microsoft также разместил свою библиотеку Microsoft Ajax, полный список файлов которой, вы можете просмотреть здесь: http://www.asp.net/ajax/cdn/.