Казалось бы, зачем это может понадобиться? Однако у меня сразу же появилась мысль о том, где такая возможность пригодиться. Довольно часто в моей практике встречались дизайны, в которых существовали элементы управления (различные кнопки, иконки) в двух видах - цветной, обозначающий что элемент активен, и серый, обозначающий что элемент не активен и нажимать на него не имеет смысла. Раньше я использовал два разных изображения - одно цветное, одно черно-белое, и если элемент деактивировался, то я подставлял нецветную картинку. Недостаток такого метода в том, что браузер должен подгружать дополнительную картинку, и хуже всего, что этих картинок может быть довольно много… Кроме того, нужно тратить время на то, чтобы создавать все эти нецветные изображения. При помощи предлагаемого здесь метода, обесцвечивание можно выполнить простой функцией grayscale().

Чтобы вам была более понятна суть, посмотрите мой демо пример. Однако здесь же замечу, что, хотя этот метод и тестировался в разных браузерах, все же пока это экспериментальное решение.

Теперь вкратце опишу принцип работы этого метода.

Хоть я частенько и ругаю IE за его огрехи, но в этом случае он справляется лучше всех, ибо в Internet Explorer существует специальный фильтр который позволяет сделать такое преобразование цвета:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

Фильтр может быть установлени и в CSS:

elem {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* Элемент должен иметь "hasLayout"! */
    zoom: 1;
}

Что касается остальных браузеров, то здесь все гораздо сложнее. Во первых обесцвечивание обычных элементов - параграфов, таблиц и т.п. В этом случае нужно просматривать значения “цветных” стилей: color, background-color, и изменять их цвет следующими фукнциями:

// Уменьшение насыщенности
function RGBtoDesat(r,g,b) {
    var average = (r + g + b) / 3;
    return {
        r: average,
        g: average,
        b: average
    };
}

// Преобразование в черно-белый цвет
function RGBtoGrayscale(r,g,b) {
    var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    return {
        r: mono,
        g: mono,
        b: mono
    };
}

Для обесцвечивания изображений используется другая технология - элемент <canvas> и его метод getImageData(), но при этом изображение должно находиться на том же домене, что и веб страница. По всей видимости метод getImageData() не поддерживается в Chrome и Safari меньше четвертой версии, поэтому для этих браузеров такой метод работать не будет.

Использование

Чтобы выполнить обесцвечивание, нужно вызвать функцию grayscale(), передав в качестве параметра элемент или коллекцию элементов:

// один элемент
var el = document.getElementById( 'myEl' );
grayscale( el );

// Массив элементов DOM
grayscale( document.getElementsByTagName('div') );

// Также работает с коллекциями jQuery
grayscale( $('div') );

Чтобы вернуть элемент в первоначальное, цветное, состояние, нужно воспользоваться функцией grayscale.reset():

grayscale.reset( el );
grayscale.reset( $('div') );

При всем этом, я бы не советовал вам использовать такую методику для больших изображений, так как их использование в элементе canvas может поглотить много ресурсов, даже если вы используете предлагаемую автором фунцкию grayscale.prepare() работы с такими изображениями.

Больше информации можете узнать на здесь. Там же можно скачать скрипт и посмотреть демо пример автора.

Смотреть демо

Теперь о том, как подключить и использовать скрипт.

Во-первых нужно скачать и подключить необходимые скрипты:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="source/Lighter.js"></script>
<script type="text/javascript" src="source/Flame.js"></script>
<script type="text/javascript" src="source/Flame.git.js"></script>
<script type="text/javascript" src="source/Fuel.js"></script>
<script type="text/javascript" src="source/Fuel.js.js"></script>
<script type="text/javascript" src="source/Fuel.ruby.js"></script>

Сначала подключается файл библиотеки Mootools, затем исходники Lighter.js. Заметьте, что файлы с префиксом Flame, содержат темы для подсветки синтаксиса. То есть, если вы хотите иметь подсветку в стиле github.com, то подключите файл Flame.git.js. Файлы с префиксом Fuel распознают исходный код языков. Это значит, что если вам нужно подсвечивать исходники на языках Ruby и JavaScript, то нужно подключить файлы Fuel.ruby.js и Fuel.js.js.

Блоки с подсвечиваемым кодом нужно отметить классом, в котором нужно указать язык программирования и тему подсветки:

<pre class="ruby:git">
// далее подсвечиваемый код
</pre>

Помимо этого, есть и другой способ указать скрипту тему и язык программирования - это указать в опциях вызова скрипта параметры Flame и Fuel.

Заключительный шаг - вызов функции light, в которую можно передать различные параметры работы скрипта:

$$('pre').light({
    altLines: 'hover',
    mode: 'ol'
});

Здесь, в качестве параметров я передаю значение hover для парметра altLines для подсветки строк при наведении на них указателя мышки, ol для параметра mode для того, чтобы показывать номера строк. Все остальные опции можно узнать здесь.

Смотреть демо

Начнем с создания простой HTML страницы, в теле которой имеется всего лишь один div - в него будут подгружаться записи. В этот div добавим элемент <div id=”loader”>, для того, чтобы использовать его как индикатора ожидания.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>

	<style type="text/css">
	#blog {border:1px solid #aaf;background:#f9f9f9;padding:4px}
	.post {border:1px solid #aaa;background:#fff;padding:4px;margin: 2px 0}
	#loading {height: 40px}
	</style>
</head>

<body id="hello_body">

	<div id="blog">
		<div id="loading" style="display:none">Loading....</div>
	</div>
</body>
</html>

Здесь также подключаем скрипт jquery.js, а также стили для блога и записей.

Далее переходим к созданию скрипта, вся функциональность которого будет заключена в объект engine:

var engine = {
	posts : [],
	target : null,
	busy : false,
	count : 5
}

В переменных объекта engine хранятся различные параметры работы скрипта - количество подгружаемых за один раз записей (count), элемент, в который эти записи должны добавляться (target), состояние скрипта (busy), и массив записей (post).

Инициализация скрипта будет производиться функцией init:

init : function(posts, target){
	if (!target)
		return;

	this.target = $(target);

	this.append(posts);

	var that = this;
	$(window).scroll(function(){
		if ($(document).height() - $(window).height() <= $(window).scrollTop() + 50) {
			that.scrollPosition = $(window).scrollTop();
			that.get();
		}
	});
}

Функция принимает два параметра - массив записей и элемент, в который записи должны быть добавлены. В конце функции добавляется обработчик события onscroll для объекта window. Его задача - определять положение полосы прокрутки, и если она находится в крайнем нижнем положении, то вызывать функцию подгрузки записей get(). Фунция get() отправляет AJAX запрос на сервер и, получая в ответ записи блога, добавляет их в элемент target:

get : function() {
	if (!this.target || this.busy) return;

	if (this.posts && this.posts.length) {
		var lastId = this.posts[this.posts.length-1].id;
	} else {
		var lastId = 0;
	}

	this.setBusy(true);

	var that = this;
	$.getJSON('getposts.php', {count:this.count, last:lastId},
		function(data){
			if (data.length > 0) {
				that.append(data);
			}
			that.setBusy(false);
		}
	);
}

Данные о всех записях, которые загружаются с сервера, хранятся в переменной engine.posts. Перед отправкой очередного запроса на сервер, функция get() получает id последнего элемента в этом списке (lastId), для того чтобы передать его в параметрах запроса. Это нужно для того, чтобы серверный скрипт знал, какие записи уже получены, и какие элементы нужно отправить.

Как в функции init(), так и в функции get(), для отображения записей используется функция append(), которая в связке с render() создает HTML код записи и добавляет его в целевой элемент (target):

append : function(posts){
	posts = (posts instanceof Array) ? posts : [];
	this.posts = this.posts.concat(posts);

	for (var i=0, len = posts.length; i < len; i++) {
		this.target.append(this.render(posts[i]));
	}

	if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
		$(window).scrollTop(this.scrollPosition);
	}
},

render : function(obj){
	var xhtml = '<div class="post" id=post_'+obj.id+'>';
	if (obj.title) {
		xhtml += '<h2>'+obj.title+'</h2>';
	}
	if (obj.posted_at) {
		xhtml += '<div class="posted_at">Posted on: '+obj.posted_at+'</div>';
	}
	if (obj.comments_count) {
		xhtml += '<div class="comments_count">Comments: ' + obj.comments_count + '</div>';
	}
	xhtml += '<div class="content">' + obj.content + '</div>';
	xhtml += '</div>';

	return xhtml;
}

Еще стоит упомянуть одну небольшую деталь: в обработчике события onscroll я сохраняя позицию полосы прокрутки, чтобы потом, после добавления новых записей, восстановить её. Это нужно для того, чтобы положение полосы прокрутки не изменялось, при добавлении новых записей в конец списка:

// сохраняем значение в обработчике onscroll
that.scrollPosition = $(window).scrollTop();

.......

// восстанавливаем значение в функции append
if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
	$(window).scrollTop(this.scrollPosition);
}

Теперь, после того, как скрипт создан, можно использовать его. Так же как и для большинства скриптов jQuery, добавляем код инициализации в фукнцию ready():

$(document).ready(function(){
	engine.init(null, $("#blog"));
	engine.get();
});

Вот пожалуй и все описание скрипта, как видите он совсем не сложный. Демо приложения можно посмотреть здесь: смотреть демо. Полностью скрипт доступен на github.

Так вот, чтобы обойти это ограничение поступали следующим образом - динамически создавали и добавляли в документ новый тег <script>, который подгружал скрипт с нужными данными:

<script src="/some/url/here" type="text/javascript"></script>

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

var data = {
    one : "12",
    two : "34"
}

someCallback(data);

Если в указанном выше примере не объявлять переменную data, а сразу поместить её в вызов someCallback, то получим то, что сейчас стали называть JSONP:

someCallback({ one : "12",  two : "34" });

В данный момент некоторые популярные сервисы поддерживают как JSON, так и JSONP. Типичным примером является API для поиска от YAHOO. Чтобы получить данные от сервера в виде JSON, мы указываем параметр output=json:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=finances&format=pdf&output=json

Теперь, чтобы получить данные в виде JSONP, просто добавляем название функции-callback, в которую будут “завернуты” возвращаемые данные. Указанная выше ссылка будет выглядеть так:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=finances&format=pdf&output=json&callback=loadit

По этой ссылке сервер вернет следующие данные:

loadit({"ResultSet":{"type":"web","totalResultsAvailable":22600000,"totalResultsReturned":10, ... } });

Теперь, короткий пример получения и обработки формата JSONP:

<html>
<head>
<script type="text/javascript">

// callback
function loadit(data) {
  // работаем с данными
  if (!data) {
    return;
  }

  var oTotal = document.getElementById("total");
  oTotal.innerHTML = data.ResultSet.totalResultsAvailable;
}

// здесь будет ссылка на новый элемент script
var oElem = null;

function sendJSONP(url, callback) {
  if (!url || !callback)
    return;

  url += '&callback='+callback;

  // выполняем запрос JSONP
  if (oElem) {
    oElem.parentNode.removeChild(oElem);
  }

  oElem = document.createElement('script');
  oElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(oElem);
  oElem.setAttribute('src', url);
}

window.onload = function(){
  document.getElementById("searchBtn").onclick = function(){
    var query = document.getElementById("query").value;
    sendJSONP('http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query='+encodeURIComponent(query)+'&output=json', 'loadit');
  }
}
</script>
</head>
<body>
<input type="text" name="search" value="" id="query" /><input type="button" value="Искать" name="s" id="searchBtn"/>
<div id="total"></div>
</body>
</html>

Этот скрипт работает следующим образом: пользователь вводит в поле поиска искомую фразу и нажимает на кнопку “Искать”. Из возвращаемых результатов поиска мы выделяем значение общего количества результатов totalResultsAvailable и показываем это значение в элементе <div id=total>. Запрос к серверу выполняется в функции sendJSONP, которая принимает 2 параметра - url и callback.

В библиотеке jQuery имеется встроенная поддержка формата JSONP. При использовании этого фреймворка, нет нужды самому код, который добавляет тег SCRIPT в DOM. Всё, что нужно будет сделать, это изменить URL, чтобы указать jQuery, что выполняется JSONP запрос. Заканчивая URL вопросительным знаком, мы даем jQuery понять, что получаемые данные будут в формате JSONP. Не нужно также и указывать название функции обработчика. Пример:

<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
var baseurl = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&output=json&query='

function search() {
     var search = $("#search").val()
     console.log(search)
     var surl = baseurl + escape(search) + '&callback=?'
     $.getJSON(surl, function(data) {
          var res = '<h1>Search for '+search+'</h1>'
          res += '<p>There were '+data.ResultSet.totalResultsAvailable+' results.</p>'
          for(var i=0; i<data.ResultSet.Result.length; i++) {
               var result = data.ResultSet.Result[i]
               var resultStr = '<img src="'+result['Thumbnail']['Url']+'" align="left">';
               resultStr += '<a href="'+result['ClickUrl']+'">'+result['Title']+'</a><br clear="left"/>'
               res+=resultStr
           }
          $("#result").html(res)
      })
}
$(document).ready(function() {
     $("#searchBtn").click(search)
});

</script>
</head>

<body>
    <input type="text" name="search" id="search"> <input type="button" value="Search" id="searchBtn">
    <div id="result"></div>
</body>
</html>

Этот пример для работы с jQuery позаимствован на InsideRIA.

Поддержка JSONP скоро будет доступна и в Mootools. В данный момент она уже есть в версии 1.3rc1. Выглядит это так:

new JsonP('http://api.cnet.com/restApi/v1.0/techProductSearch', {
    data: {
        partTag: 'mtvo',
        iod: 'hlPrice',
        iewType: 'json',
        results: '100',
        query: 'ipod'
    },
    onComplete: myFunction.bind(someObject)
}).request();

На мой взгляд гораздо понятнее и проще, чем чудеса с вопросительными знаками в jQuery