Посмотреть пример.

Основные моменты:

• Полностью независим, не требует ни дополнительных CSS ни изображений.
• Поддерживает обьекты с неограниченной вложенностью.
• Поддерживаются все типы данных Javascript, а так же DOM элементы.
• Защищен от рекурсивных ссылок на обьекты.
• Позволяет задавать глубину отображения для объекта.
• Заголовки таблиц с градиентом.
• Позволяет кастомизацию через CSS.
• Проверен через JSLint!

Пример использования:

var table = prettyPrint( anyRandomThing, { /*optional options object */ } );

// Making the table viewable is down to you...
// e.g.
document.body.appendChild(table);

Дополнительная информация:
• Источник перевода на русском языке
• Официальная страница разработчика. Видео демонстрации возможностей
• Страница проекта на Github

The post prettyPrint – dump javascript объектов first appeared on Блог веб-разработчика.

Остается только дописать backend и получается отличный инструмент.

Последняя версия плагина imgAreaSelect v0.8 совместима с jQuery 1.3.x.

Ссылки:
• Все примеры использования плагина imgAreaSelect
• imgAreaSelect on jQuery Plugins
• ImageCrop с помощью jQuery, плагина imgAreaSelect и PHP GD
• Создание превьюшек: PHP и плагин imgAreaSelect для jQuery
• Другой плагин: JCROP IMAGE CROPPING PLUGIN

The post imgAreaSelect — jQuery-плагин для выделения области изображения first appeared on Блог веб-разработчика.

Листинг 1: Пример абсолютного позиционирования элемента

...
<div style="position: relative">
  <div id="login" style="position: absolute; top:50px; left:25px; width: 200px">
    Login: <input type="text" name="login" value="" />
    Password: <input type="password" name="password" value="" />
    <input type="submit" name="submit" value="Send" onclick="login()" />
  </div>
</div>

Листинг 2: Пример получения координат элемента через функции findPosX, findPosY

var el = document.getElementById('login');
var x = findPosX(el);
var y = findPosY(el);

function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft+=obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.x) {
        curleft+=obj.x;
    }
    return curleft;
}

function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop+=obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.y) {
        curtop+=obj.y;
    }
    return curtop;
}

В некоторых библиотеках есть необходимая функциональнось
Листинг 3: Примеры получения координат через библиотеки: jQuery, Prototype, Mootools

// jQuery
var offset = jQuery('#login').offset();
var x = offset.left;
var y = offset.top;


// Prototype
var el = $('login');
// Returns the first non-statically-positioned ancestor of the element.
var posReal = el.realOffset(element);
// Returns an Array with the total offsets of the element, 
// including any of the element's ancestors offsets. 
// The resulting array is similar to [total_left_offset, total_top_offset]
var pos = el.cumulativeOffset(element);

// Mootools 1.2
var position = $('login').getPosition(); //returns {x: 100, y: 500};

Ссылки по теме:
• JavaScript Find Position
• Quirksmode: Find position
• jQuery: CSS/offset
• Developer Notes for prototype.js: Position
• Mootools 1.2: Element Method: getPosition
• Element Position Swapping Using MooTools 1.2

The post Javascript: определение координат DOM элемента first appeared on Блог веб-разработчика.

Читать подробнее…

Хорошая презентация о замыканиях в JavaScript, Secrets of JavaScript closures

The post Замыкания в JavaScript first appeared on Блог веб-разработчика.

Материал на русском языке:
• http://javascript.ru/tutorial/object
• http://designformasters.info/posts/objectifying-javascript/
• http://dklab.ru/chicken/nablas/40.html

Материал на английском языке:
• http://mckoss.com/jscript/object.htm
• http://jibbering.com/faq/faq_notes/closures.html
• http://phrogz.net/JS/Classes/OOPinJS.html
• http://phrogz.net/JS/Classes/OOPinJS2.html
• http://developer.mozilla.org/en/docs/Introduction_to_Object-Oriented_JavaScript
• http://blogs.msdn.com/jscript/archive/2007/09/24/classes-in-jscript-part-i.aspx
• http://blogs.msdn.com/jscript/archive/2007/09/30/classes-in-jscript-part-ii-instance-properties-methods-class-properties-methods.aspx
• http://blogs.msdn.com/jscript/archive/2007/10/31/classes-in-jscript-part-iii-class-hierarchy-and-data-encapsulation.aspx
• http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide

The post Javascript: ООП, объекты, наследование, prototype first appeared on Блог веб-разработчика.

Javascript Tree for jQuery:

С Drop & Drag:

• A tree component based on jQuery
Demo | Download | Documentation

• SimpleTree Plugin
Demo | Download | Documentation

• Interface lightweight JavaScript library for jQuery
Demo | Download | Documentation

• nestedsortables
Demo | Download | Documentation

• jTree
Demo | Download

Без Drop & Drag:

• jQuery plugin: Treeview
Demo | Download | Documentation

• jQuery File Tree
Demo | Download | Documentation

Other:
• jQuery treeView

Javascript Tree for Mootools:

• Mif.Tree
Demo | Download | Documentation

• mooTree 2
Demo | Download | Пример на русском

• TreeWidget
Demo | Download | Documentation

• Tree Component for MooTools
Demo | Download

Other:
• Nested Sortable Lists using Mootools

Javascript Tree for Prototype:

• Scriptaculous Sortable Draggable
Demo | Download | Documentation

Другие решения:

• DHTML eXtension dhtmlxTree
Demo | Download | Documentation

• EXT JS Tree
Download | Tutorial:Ext20 Tree TreeLoader PHP MySQL
Demo:
1. http://extjs.com/deploy/dev/examples/tree/reorder.html
2. http://extjs.com/deploy/dev/examples/tree/two-trees.html
3. http://extjs.com/deploy/dev/examples/tree/column-tree.html
4. http://extjs.com/deploy/dev/examples/tree/xml-tree-loader.html

• Yahoo! UI Library: TreeView
Demo | Download | Documentation

• Dojo dijit.Tree
Demo | Download | Documentation | dijit.Tree and dojo.data in Dojo 1.1

• Folder trees by dhtmlgoodies.com
Demo | Download | Documentation

• XLoadTree
Demo | Download | Documentation

• http://www.blueshoes.org/en/javascript/tree/
• Dragging and dropping table rows in Javascript
• AjaxRain tag tree
• FileTreePanel Client-Server Interface Specification

Погуглить:
• javascript Drag and Drop tree
• javascript Drag and Drop Sortable Tree
• javascript Nested Sortable Tree
• javascript Nested Sortable Lists

The post Javascript Tree – примеры реализаций деревьев на яваскрипте first appeared on Блог веб-разработчика.

1. DebugBar
Тип: расширение, платное (59 € )
Версия: 5.1 (2008-07-22)
Поддержка: IE6, IE7
Возможности: DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer
Впечатления: очень хороший инструмент, по возможностям аналогичен FireBug.

2. Companion.JS
Тип: бесплатное расширение
Версия: v0.3 (2008-02-02)
Поддержка: IE6, IE7
Описание: добавляет базовые возможности для отладки JavaScript. Облеченная версия отладчика FireBug. Разработчик один и тот же что и DebugBar.
Требует установки модуля Microsoft Script Debugger.

3. Internet Explorer Developer Toolbar
Тип: бесплатное расширение
Версия: 1.00.2188.0 (2007-09-05)
Поддержка: IE6, IE7
Описание: создан самой компанией Microsoft. Ничем не хуже плагина для браузера Firefox Web Developer. Есть DOM, валидация HTML, CSS, WAI, and RSS web feed links…

4. IE WebDeveloper – Dom Inspector
Тип: расширение, платное $79
Версия: 2.4.1 (2008-03-12)
Поддержка: IE6, IE7
Описание: DOM-View, DOM Inspect, отображение CSS, валидация онлайн (Online validate W3C HTML, HTML Tidy, CSS, Feed, Links, WAI, Section 508 and P3P. Local validate W3C HTML and CSS), онлайн утилиты для вебмастера (Whois lookup, Ping, Trace route, DNS and My IP, Website details by alexa.com, Webpage speed report).
Впечатления: очень хороший аддон

5. Web Accessibility Toolbar
Тип: бесплатное расширение
Версия: 1.2 (2006-12-04)
Поддержка: IE6

6. Firebug Lite
Тип: Javascript файл
Версия: 1.2 (2008-07-25)
Описание: легкий аналог плагина FireBug для Firefox
Впечатления: лучшее решение на Яваскрипте

7. Faux Console
Тип: Javascript файл
Версия: 2007-02-13
Описание: очень простенький отладчик, функциональности особой нету, только обычный console.log

8. dbug – a console.log (firebug) wrapper (CNET Clientside Mootools)
Тип: Javascript файл
Описание: интересное решение, смотрел давно, но после появления FireBug Lite интерес к этому решению пропал

Ссылки по теме:
• Отладка скриптов в Internet Explorer
• Отладка JavaScript в MS IE средствами Visual Web Developer
• Отладка для Internet Explorer (в Visual Studio)
• Обзор средств для разработчиков в разных браузерах

The post Инструменты отладки Javascript скриптов в Internet Explorer (IE) first appeared on Блог веб-разработчика.

Mootools plugins:

Mootools: 41 плагин из личной коллекции
http://speckyboy.com/2008/04/09/41-of-the-best-mootools-ajax-example-downloads/
http://www.mooscripts.com/
http://www.katodivaihe.com/index.php/mootools-plugins/
http://clientside.cnet.com/cnet-js-standards/cnet-clientside-mootools-plugins-12-release/
http://clientside.cnet.com/wiki/cnet-libraries/
http://www.hotajax.org/content/blogsection/7/420/
http://www.artviper.net/test/mooSlide2/
http://www.visual-blast.com/javascript/mooslidebox-32/
http://www.phatfusion.net/

• Mocha, demo — A window class that uses canvas tag graphics.
• Calendar, demo — A very nice looking date picker.
• Slideshow, demo — A cool slideshow class, from the same developer above.
• Fancy Upload, demo — The best Ajax file uploader around.
• toChart, demo — A nice class that takes tables from HTML and turns them into charts using canvas tag graphics.

Неплохой пример сортировки и drag and drop на Mootools 1.2 с возможностью сохранить результат.

Тестирование производительности фреймворков:
http://mootools.net/slickspeed/
http://lusever.ru/css-selectors/
http://slickspeed.googlecode.com/

The post Mootools plugins: коллекции плагинов first appeared on Блог веб-разработчика.

20 невероятных плагинов и 65 великолепных ресурсов для jQuery – 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources

Ссылки на плагины:

• http://plugins.jquery.com/
• http://habrahabr.ru/blog/webdev/47620.html
• http://www.sastgroup.com/jquery/240-plugins-jquery
• http://enhance.qd-creative.co.uk/index.php/2008/javascript/10-useful-jquery-plugins
• http://bassistance.de/jquery-plugins/

Библиотеки построенные на jQuery:

• http://interface.eyecon.ro
• jQuery UI , http://docs.jquery.com/UI

The post jQuery плагины first appeared on Блог веб-разработчика.

Примеры меню

JavaScript слайдеры. Только лучшее.

Lightbox and Clones
http://planetozh.com/projects/lightbox-clones/ – Comparison of various scripts that display images and other objects in somehow cool CSS popups.

The post jQuery примеры реализации. Примеры слайдеров, LightBox first appeared on Блог веб-разработчика.