JSToolbox - все о JavaScript » MooTools http://www.jstoolbox.com Блог о программировании вообще и о JavaScript в частности, уроки, статьи, заметки, база знаний. Mon, 07 Mar 2011 18:19:17 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Lighter.js – подсветка синтаксиса для Mootools http://www.jstoolbox.com/2009/05/02/lighterjs-podsvetka-sintaksisa-dlya-mootools/ http://www.jstoolbox.com/2009/05/02/lighterjs-podsvetka-sintaksisa-dlya-mootools/#comments Sat, 02 May 2009 20:50:28 +0000 admin http://www.jstoolbox.com/?p=449 Lighter.js - это скрипт для подсветки синтаксиса, который использует для своей работы библиотеку Mootools. Скрипт прост в использовании и настройке, имеет различные цветовые темы. Я создал небольшой демо пример, чтобы вы могли оценить его способности. Смотреть демо пример.

]]> Lighter.js – это скрипт для подсветки синтаксиса, который использует для своей работы библиотеку Mootools. Скрипт прост в использовании и настройке, имеет различные цветовые темы. Я создал небольшой демо пример, чтобы вы могли оценить его способности. Смотреть демо пример.

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

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

<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 для того, чтобы показывать номера строк. Все остальные опции можно узнать здесь.

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

]]> http://www.jstoolbox.com/2009/05/02/lighterjs-podsvetka-sintaksisa-dlya-mootools/feed/ 1 Что такое JSONP? http://www.jstoolbox.com/2009/03/18/chto-takoe-jsonp/ http://www.jstoolbox.com/2009/03/18/chto-takoe-jsonp/#comments Wed, 18 Mar 2009 14:54:55 +0000 admin http://www.jstoolbox.com/?p=422 В последнее время довольно часто замечал в разных статьях упоминание о JSONP. Судя по названию это тот же JSON, но с каким-то наворотом. Поразобравшись немного с этим, оказалось что этот формат нужен для того, чтобы иметь возможность выполнять асинхронные запросы к серверу расположенному на другом домене. Напомню, что для объекта XMLHTTPRequest есть такое ограничение. То есть, если ваш сайт расположен по адресу mysite.com, то AJAX запрос на сервер anothersite.com выполнить не удастся.

]]> В последнее время довольно часто замечал в разных статьях упоминание о JSONP. Судя по названию это тот же JSON, но с каким-то наворотом. Поразобравшись немного с этим, оказалось что этот формат нужен для того, чтобы иметь возможность выполнять асинхронные запросы к серверу расположенному на другом домене. Напомню, что для объекта XMLHTTPRequest есть такое ограничение. То есть, если ваш сайт расположен по адресу mysite.com, то AJAX запрос на сервер anothersite.com выполнить не удастся.

Так вот, чтобы обойти это ограничение поступали следующим образом – динамически создавали и добавляли в документ новый тег <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 :)

]]> http://www.jstoolbox.com/2009/03/18/chto-takoe-jsonp/feed/ 6 Шаблоны для 960gs и Mootools http://www.jstoolbox.com/2009/02/08/shablony-dlya-960gs-i-mootools/ http://www.jstoolbox.com/2009/02/08/shablony-dlya-960gs-i-mootools/#comments Sun, 08 Feb 2009 20:52:04 +0000 admin http://www.jstoolbox.com/?p=376 Если вы часто работаете с библиотекой Mootools и CSS фреймворком 960.gs, то вам, пожалуй понравятся шаблоны, созданные Стефаном Бау. Это резиновые и фиксированные шаблоны, в которых есть все основные элементы дизайна - формы, таблицы, нумерованные и ненумерованные списки и пр. Из mootools позаимствованы такие элементы, как аккордеон, открывающиеся панели, меню.

]]> Если вы часто работаете с библиотекой Mootools и CSS фреймворком 960.gs, то вам, пожалуй понравятся шаблоны, созданные Стефаном Бау. Это резиновые и фиксированные шаблоны, в которых есть все основные элементы дизайна – формы, таблицы, нумерованные и ненумерованные списки и пр. Из mootools позаимствованы такие элементы, как аккордеон, открывающиеся панели, меню.





moo-960-2

Такие шаблоны это как раз то, что нужно для любителей программировать на языке “копи-пейст”. Нужно просто выбрать один из предлагаемых шаблонов, вырезать лишнее, и вставить то, что нужно. Если нужно меню, то что может быть проще – копируем что-то вроде этого:

<ul class="nav main">
    <li>
        <a href="#">Menu 1</a>
        <ul>
          <li>
            <a href="#">Submenu 1</a>
          </li>
          <li>
            <a href="#">Submenu 2</a>
          </li>
          <li>
            <a href="#">Submenu 3</a>
          </li>
          <li>
            <a href="#">Submenu 4</a>
          </li>
          <li>
            <a href="#">Submenu 5</a>
          </li>
        </ul>
      </li>

	  <!-- и так далее -->

	</li>
</ul>

Я раньше всегда использовал YUI CSS фреймворк, но честно говоря 960 grid system нравится все больше. Если вы никогда раньше не пользовались им, настоятельно рекомендую.

При поддержке:
Подарки детям, подарок ребенку на день рождения
Обслуживание компьютеров: абонентское обслуживание компьютеров
Ювелирных украшения, обручальные кольца – ювелирный магазин
]]> http://www.jstoolbox.com/2009/02/08/shablony-dlya-960gs-i-mootools/feed/ 0 Новый плагин для Mootools – Request.Queue http://www.jstoolbox.com/2008/12/07/mootools-request-queue/ http://www.jstoolbox.com/2008/12/07/mootools-request-queue/#comments Sun, 07 Dec 2008 21:16:56 +0000 admin http://www.jstoolbox.com/?p=281 Request.Queue - это новый плагин для библиотеки Mootools, который позволяет последовательно отправлять AJAX запросы на сервер. Работает это так: пользователь создает некоторое количество запросов Request, которые должны быть отправлены на сервер один за одним, затем добавляет их в очередь Request.Queue, после чего для каждого запроса вызывается метод send() в том порядке, в котором они должны быть отправлены.

]]> Request.Queue – это новый плагин для библиотеки Mootools, который позволяет последовательно отправлять AJAX запросы на сервер. Работает это так: пользователь создает некоторое количество запросов Request, которые должны быть отправлены на сервер один за одним, затем добавляет их в очередь Request.Queue, после чего для каждого запроса вызывается метод send() в том порядке, в котором они должны быть отправлены.

Рассмотрим следующий пример:

var num1 = new Request({ url: '/wiki/simple.php', data: {num: 1, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num2 = new Request({ url: '/wiki/simple.php', data: {num: 2, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num3 = new Request({ url: '/wiki/simple.php', data: {num: 3, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var myQueue = new Request.Queue();
// можно добавлять запросы по одному
myQueue.addRequest('num1', num1);
// ... или сразу несколько
myQueue.addRequests({ num2: num2, num3: num3 });
num1.send();
num2.send();
num3.send();

В этом примере очередь запросов будет отправлять по очереди запросы num1, num2, num3. Каждый из них будет отправляться только после того, как предыдущий завершился.

Стоит отметить, что Request.Queue может отправлять не только по одному запросу за раз, а и по нескольку, если указать для него опцию concurrent (по умолчанию равняется 1). Кроме этой опции, есть также stopOnFailure и autoAdvance (обе по умолчанию равны true). Первая приостанавливает отправку запросов при возникновении ошибки, при этом возобновить отправку запросов можно при помощи функции resume(). Если установить эту опцию в false, то запросы будут отправляться даже если один из них завершился с ошибкой. Вторая опция – autoAdvance автоматически отправляет следующий запрос. Если установить опцию в false, то отправить следующий запрос в очереди можно будет используя функцию runNext().

Как вы уже видели из предыдущего примера, запросы можно добавлять при помощи функций addRequest() и addRequests(). Удалять запросы из очереди можно при помощи функции removeRequest():

var foo = new Request();
myRequestQueue.addRequest('fooRequest', foo);
myRequestQueue.removeRequest(foo);
// или
myRequestQueue.removeRequest('fooRequest');

Если вам нужно полностью очистить очередь запросов, то это можно сделать одной функцией – clear():

myRequestQueue.clear();

Также, объектам Request.Queue можно назначать следующие события:

  • onRequestStart
  • onRequestEnd
  • onRequestSuccess
  • onRequestComplete
  • onRequestCancel
  • onRequestException
  • onRequestFailure

Узнать подробнее о всех функциях и событиях можно в документации. Скачать скрипт можно здесь – просто отметьте в списке доступных для скачивания плагинов Request.Queue и жмите Download.

Спонсор статьи:
Профессиональное продвижение сайтов, раскрутка в поисковых системах, оптимизация интернет-магазинов.
Живая изгородь своими руками на сайте “Ваш Сад”.
Интернет-магазин dvd – купить dvd-диски в киеве, продажа фильмов DVD почтой, dvd в украине.
]]> http://www.jstoolbox.com/2008/12/07/mootools-request-queue/feed/ 0 Как создать свой CSS селектор в MooTools http://www.jstoolbox.com/2008/11/11/mootools-pseudo-selector/ http://www.jstoolbox.com/2008/11/11/mootools-pseudo-selector/#comments Mon, 10 Nov 2008 22:29:56 +0000 admin http://www.jstoolbox.com/2008/11/11/mootools-pseudo-selector/ В библиотеке Mootools уже реализованы большинство псевдоселекторов CSS3: :nth-child, :contains, :not и др. Но у вас есть возможность не ограничиваться имеющимся выбором и создать свой собственный CSS селектор, который можно будет использовать в таких функциях Mootools, как $$ и getElement. Все, что нужно будет сделать, это добавить свою функцию к объекту Selectors.Pseudo. В функцию будут передаваться два аргумента – параметр, передаваемый селктору (:pseudo(parameter)) и объект, который может быть использован в качестве временного хранилища данных при последовательном проходе элементов. Последний аргумент используется к примеру в псевдоселекторе :nth-child. Функция должна возвращать true если элемент соответствует критериям выбора или false в обратном случае.

В качестве примера можно продемонстрировать псевдокласс :random, созданный Яном Кассенсом:

Selectors.Pseudo.random = function(probability, local){
	return Math.random() < (probability || .5).toFloat();
};

// выбор примерно половины div-ов на странице
$$('div:random');

// выборка 20% заголовков h2 с классом article
$$('h2.article:random(.2)');

Такой псевдоселектор позволяет выбирать случайные элементы из DOM. В первом примере будут выбраны примерно половина элементов div на странице, а во втором будет произведена выборка всех загловков h2 с классом article, а затем в случайном порядке будут выбраны 20% из их общего числа.

Еще один пример реализации псевдоселектора я подсмотрел на блоге у Девида Уолша:

Selectors.Pseudo.selected = function(){
	return (this.selected && this.get('tag') == 'option');
};

Это селектор :selected, который имеется в jQuery. Суть его заключается в том, что он выбирает выбранные элементы option из списка select:

<select name="mysel" id="mysel" multiple="multiple">
	<option value="One">One</a>
	<option value="Two">Two</a>
	<option value="Three" selected="selected">Three</a>
	<option value="Four" selected="selected">Four</a>
</select>

Удобная это вещь - псевдоселектор, не правда ли? Тем более если его можно легко создавать самому, под свои нужды.

]]> http://www.jstoolbox.com/2008/11/11/mootools-pseudo-selector/feed/ 0