Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Руководство разработчика для prototype.js

Источник: realcoding.net

Что это?


На случай, если вы ни разу не пользовались, prototype.js — это JavaScript библиотека, написанная Сэмом Стефенсеном (Sam Stephenson).

Этот потрясающе продуманный и написанный в соответствии со стандартам код берет на себя немалую часть работы, связанной с созданием функционально-богатых интерактивных страниц, которые характерны для Web 2.0.

Если вы уже пытались использовать эту библиотеку, наверняка заметили, что документация не является ее сильной стороной. Как и многие разработчики до меня я разобрался с prototype.js путем чтения кода и экспериментов. Я подумал, что неплохо было бы, учась, делать заметки, и потом поделиться ими со всеми.

Так же я предлагаю неофициальную справку по объектам, классам, функциям и расширениям, предоставляемым этой библиотекой.

Вспомогательные функции


Библиотека располагает множеством предопределенных объектов и вспомогательных функций. Очевидная польза этих функций в сокращении необходимости набирать часто повторящиеся куски кода.

Использование функции $()


Функция $() — это короткая запись для очень часто используемой функции DOM document.getElementById(). Как и функция DOM, она возвращает элемент, который имеет id, переданный в агрументе.

Однако, в отличии от функции DOM эта делает чуть больше. Вы можете передать более одного аргумента и $() вернет массив (Array) объектов со всеми соответствующими элементами. Пример ниже демонстрирует это:

<script>

function
test1(){

<
span class=highlite>var d = $(myDiv);</span>

alert(d.innerHTML);

}


function
test2()
{

<
span class=highlite>var divs = $(myDiv,myOtherDiv);</span>

for(
i=0; i<divs.length; i++)

{

alert(divs[i].innerHTML);

}

}

</script>

<div id=myDiv>

<p>This is a paragraph</p>

</div>

<div id=myOtherDiv>

<p>This is another paragraph</p>

</div>

<input type=button onclick=test1(); value=Test1 />

<input type=button onclick=test2(); value=Test2 />

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

Использование функции $F()


Функция $F() — это еще одно удобное сокращение. Она возвращает значение полей ввода, таких как текстовые поля или выпадающие списки. Функция принимает в качестве параметра как id элемента, так и сам элемент.

<script>

function
test3()
{

alert( <span class=highlite>$F(userName)</span> );

}

</script>

<input type=text value=Joe Doe id=userName />

<input type=button onclick=test3(); value=Test3 />

Использование функции Try.these()


Функция Try.these() позволяет легко попробовать вызвать несколько функций, до тех пор пока какая-нибудь из них сработает.Она принимает в качестве параметров несколько функций и вызывает их одну за другой по порядку, пока какая-нибудь не заработает, и возвращает результат сработавшей функции.

В примере, приведенном ниже, функция xmlNode.text работает в одних браузерах,а xmlNode.textContent работает в других. Используя функцию Try.these() мы можем получить результат работающей.

<script>

function
getXmlNodeValue(xmlNode){

return <
span class=highlite>Try.these</span>(
function() {return
xmlNode.text;},

function() {return
xmlNode.textContent;)

);

}

</script>

Объект Ajax


Вспомогательные функции упомянутые здесь хороши, но не слишком сложны, не так ли? Вы, возможно, уже делали это сами и даже имеете похожие функции в своих скриптах. Но эти функции — только верхушка айсберга.

Я уверен, что ваш интерес к prototype.js вызван в основном его возможностями, связанными с AJAX. Давайте выясним, как эта библиотека может облегчить вам жизнь при реализации AJAX логики.

Объект Ajax — это предопределенный объект, созданный библиотекой, для сокрытия и упрощения кода, в котором требуется AJAX функциональность. Этот объект содержит несколько классов, содержащих инкапсулированную AJAX логику. Давайте взглянем на некоторые из них.

Использование класса Ajax.Request


Если вы не используете вспомогательных библиотек, то, вероятно, пишете много кода для создания объекта XMLHttpRequest, потом асинхронно отслеживаете его работу, извлекаете ответ сервера и обрабатываете его. И счастливы, что вам не требуется поддержка нескольких браузеров.

Чтобы помочь с реализацией AJAX функциональности, библиотека определяеткласс Ajax.Request.

Допустим, у вас есть приложение, которое соединяется с сервером по адресу http://yoursever/app/get_sales?empID=1234&year=1998,который возвращает следующий ответ в формате XML:

<?xml version=1.0 encoding=utf-8 ?>

<ajax-response>

<response id=productDetails type=object>

<monthly-sales>

<employee-sales>

<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>

</employee-sales>

<employee-sales>

<employee-id>1234</employee-id>

<year-month>1998-02</year-month>

<sales>$11,147.51</sales>

</employee-sales>

</monthly-sales>

</response>

</ajax-response>

Обратиться к серверу для получения этого XML с использованием Ajax.Request очень легко. Пример ниже показывает, как это может быть сделано.

<script>

function
searchSales()
{

var
empID = $F(lstEmployees);

var
y = $F(lstYears);

var
url = http://yoursever/app/get_sales;

var
pars = empID= + empID + &year= + y;

<
div class=highlite>

var
myAjax = new Ajax.Request(

url,

{
method: get, parameters: pars, onComplete: showResponse}
);

</
div>

}
function
showResponse(originalRequest)

{

//put returned XML in the textarea

$(result).value = originalRequest.responseText;

}

</script>

<select onchange=searchSales() size=10 id=lstEmployees>
<option value=5>Buchanan, Steven</option>
<option value=8>Callahan, Laura</option>
<option value=1>Davolio, Nancy</option>
</select>

<select onchange=searchSales() size=3 id=lstYears>
<option value=1996 selected=selected>1996</option>
<option value=1997>1997</option>
<option value=1998>1998</option>
</select>

<textarea rows=10 cols=60 id=result></textarea>

Видите второй параметр, переданный конструктору Ajax.Request? Параметр {method: get, parameters: pars, onComplete: showResponse} представляет собой анонимный объект. Это значит, что мы передаем объект, который имеет свойство method, содержащее строку get, свойство parameters, содержащее строку параметров HTTP запроса и свойство/метод onComplete, содержащее функцию showResponse.

Есть еще несколько свойств, которые вы можете определить и использовать в этом объекте, например, свойство asynchronous, которое может принимать значения true или false, и определяет будет ли запрос к серверу асинхронным (значение по умолчанию true.)

Этот параметр определяет опции AJAX запроса. В нашем примере мы запрашиваем URL, указанный в первом аргументе, с помощью HTTP команды GET передавая строку запроса, указанную в переменной pars, и объект Ajax.Request вызовет функцию showResponse, когда получит ответ сервера.

Как вы, возможно, знаете, XMLHttpRequest сообщает о прогрессе во время HTTP запроса. Есть четыре различных состояния: Loading, Loaded, Interactive, или Complete. Вы можете указать объекту Ajax.Request вызывать различные собственные функции на разных стадиях, чаще всего это используется для состояния Complete. Чтобы сообщить объекту о своих функциях, просто передайте свойства/методы onXXXXX в опциях запроса, например onComplete, как в нашем примере. Функция, которую вы передадите, будет вызвана объектом с одним аргументом — объектом XMLHttpRequest. Вы можете использовать этот объект, чтобы получить данные, возвращенные сервером или проверить свойство status, которое содержит HTTP код ответа.

Две других интересных опции могут быть использованы для обработки результата. Свойство onSuccess — это функция, которая будет вызвана, если AJAX запрос выполнится без ошибок, а наоборот свойство onFailure может содержать функцию, которая будет вызвана, если случится ошибка на сервере. Как и опции-функции onXXXXX, эти две также будут вызваны с объектом XMLHttpRequest, который обслуживал запрос, в качестве аргумента.

Наш пример не делал ничего интересного с XML ответом. Мы просто выводили XML в текстовое поле. Типичным использованием ответа, наверное, является нахождение требуемой информации в XML и обновление некоторых элементов страницы, или даже применение XSLT трансформации, чтобы получить HTML на странице.

Для более полного объяснения смотрите справку по Ajax.Request и options.

Использование класса Ajax.Updater


Если ваш сервер может возвращать информацию, уже сформатированную в HTML, библиотека может сделать вашу жизнь еще легче с помощью класса Ajax.Updater. С ним вам надо только указать, в какой элемент должен быть вставлен HTML, возвращенный AJAX запросом. Пример все расскажет лучше, чем я смогу написать.

<script>
function
getHTML()
{
var
url = http://yourserver/app/getSomeHTML;
var
pars = someParameter=ABC;
<
div class=highlite>
var
myAjax = new Ajax.Updater(placeholder, url, {method: get, parameters: pars});
</
div>
}
</script>

<input type=button onclick=getHTML() value=GetHtml />
<div id=placeholder> </div>

Как видите, код очень похож на код из предыдущего примера, за исключением функции onComplete, которой теперь нет, и id элемента, передаваемого конструктору. Изменим немного код, чтобы показать, как можно в клиенте обрабатывать ошибки сервера.

Мы добавим в запрос несколько опции, указывающих функцию, которая будет обрабатывать ошибочные состояния. Это делается с помощью опции onFailure. Мы также укажем, что элемент placeholder должен обновляться только в случае удачного запроса. Чтобы добиться этого, мы вместо простого id элемента первым параметром укажем объект с двумя свойствами, success (которое будет использовано, если все сработает) и failure (которое будет использовано, если случится ошибка). Мы не будем использовать свойство failure в нашем примере, а только функцию reportError в свойстве onFailure.

<script>
function
getHTML()
{
var
url = http://yourserver/app/getSomeHTML;
var
pars = someParameter=ABC;
<
div class=highlite>
var
myAjax = new Ajax.Updater(
{
success: placeholder},
url,
{
method: get, parameters: pars, onFailure: reportError});
</
div>
}

function
reportError(request)
{
alert(Sorry. There was an error.);
}
</script>

<input type=button onclick=getHTML() value=GetHtml />
<div id=placeholder> </div>

Если ваш сервер возвращает JavaScript код вместо HTML Ajax.Updater может его исполнить этот код. Чтобы указать объект, что надо трактовать ответ как JavaScript, просто добавьте evalScripts: true; в список свойств в последнем аргументе конструктора.

Справка по prototype.js


Расширение классов JavaScript


Один из путей, которым библиотека prototype.js добавляет функциональность, — расширение существующих классов JavaScript.

Расширение класса Object


МетодДоступАргументыОписание
extend(destination, source)staticdestination: любой объект, source: любой объектПредоставляет способ реализовать наследование
копированием всех полей и методов source в
destination.
extend(object)instanceлюбой объектПредоставляет способ реализовать наследование
копированием всех полей и методов данного object.

Расширение класса Number


МетодДоступАргументыОписание
toColorPart()instance(нет)Возвращает шестнадцатеричное представление
числа. Удобно для конвертации RGB компонентов цвета в
HTML-представление.

Расширение класса Function


МетодДоступАргументыОписание
bind(object)instanceobject: объект, которому должна принадлежать функцияВозвращает экземпляр функции, которая будет
принадлежать данному объекту (т. е. будет его методом). Новая функция
будет иметь те же аргументы, что и исходная.
bindAsEventListener(object)instanceobject: объект, которому должна принадлежать функцияВозвращает экземпляр функции, которая будет
принадлежать данному объекту (т. е. будет его методом). Аргументом новой
функции будет текущий объект event.

Давайте посмотрим на одно из этих расширений в действии.

<input type=checkbox value=1 id=myChk /> Test?
<
script>
// Объявляем класс
var CheckboxWatcher = Class.create();

// Определяем остальную часть реализации класса
CheckboxWatcher.prototype = {

initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
// присоединяем наш метод к событию
<span class=highlite>this.chkBox.onclick = this.showMessage.bindAsEventListener(this);</span>
},

showMessage: function(evt) {
alert(this.message + ( + evt.type + ));
}
};


var
watcher = new CheckboxWatcher(myChk, Changed);
</script>

Расширение класса String


МетодДоступАргументыОписание
stripTags()instance(нет)Возвращает строку без HTML или XML тегов
escapeHTML()instance(нет)Возвращает строку с корректно экранированной
HTML разметкой
unescapeHTML()instance(нет)Метод, обратный
escapeHTML()

Расширение класса document DOM object


МетодДоступАргументыОписание
getElementsByClassName(className)instanceclassName: название CSS класса, ассоциированного с элементамиВозвращает все элементы, у которых указано
данное имя класса.

Расширение класса Event object


СвойствоТипОписание
KEY_BACKSPACENumber8: Константа. Код клавиши Backspace.
KEY_TABNumber9: Константа. Код клавиши Tab.
KEY_RETURNNumber13: Константа. Код клавиши Return.
KEY_ESCNumber27: Константа. Код клавиши Esc.
KEY_LEFTNumber37: Константа. Код клавиши «влево».
KEY_UPNumber38: Константа. Код клавиши «вверх».
KEY_RIGHTNumber39: Константа. Код клавиши «вправо».
KEY_DOWNNumber40: Константа. Код клавиши «вниз».
KEY_DELETENumber46: Константа. Код клавиши Delete.
observers:ArrayСписок закэшированных обозревателей. Часть
внутренней реализации объекта.

МетодДоступАргументыОписание
element(event)staticevent: объект EventВозвращает элемент, породивший событие.
isLeftClick(event)staticevent: объект EventВозвращает true
если была нажата левая кнопка мыши.
pointerX(event)staticevent: объект EventВозвращает координату x указателя мыши на
странице.
pointerY(event)staticevent: объект EventВозвращает координату y указателя мыши на
странице.
stop(event)staticevent: объект EventИспользуйте эту функцию, чтобы оборвать
поведение по умолчанию этого события и запретить его дальнейшее
распространение.
findElement(event, tagName)staticevent: объект Event, tagName: название требуемого тега.Обходит дерево DOM вверх в поисках первого
элемента с данным названием тега, начиная с элемента, который породил
событие.
observe(element, name, observer, useCapture)staticelement: объект или id, name: название события (например, click,
load, и т. д.), observer: функция, которая будет обрабатывать событие,
useCapture: если true, обрабатывает событие в
фазе capture (возникновения), если false,
то в фазе bubbling (распространения).
Добавляет обработчик данному событию.
stopObserving(element, name, observer, useCapture)staticelement: объект или id, name: название события (например, click),
observer: функция, которая будет обрабатывать событие, useCapture: если
true, обрабатывает событие в фазе capture
(возникновения), если false, то в фазе
bubbling (распространения).
Убирает обработчик данного события.
_observeAndCache(element, name, observer, useCapture)static Приватный метод, не думайте о нем.
unloadCache()static(нет)Приватный метод, не думайте о нем. Забывает
все закэшированные обозреватели.

Рассмотрим, как воспользоваться этим объектом, чтобы добавить обработчик событию load объекта window.

<script>
<
span class=highlite>Event.observe(window, load, showMessage, false);</span>

function
showMessage() {
alert(Page loaded.);
}
</script>

Новые объекты и классы, определенные prototype.js


Еще одна полезная возможность библиотеки — предоставление множества объектов, реализующих поддержку объектно-ориентированного дизайна и общей функциональности.

Объект PeriodicalExecuter


Этот объект предоставляет способ периодического вызова функций через заданный интервал.

МетодДоступАргументыОписание
[ctor](callback, interval)конструкторcallback: функция без параметров, interval: количество секундСоздает один экземпляр данного объекта,
который будет периодически вызывать данную функцию.

СвойствоТипОписание
callbackFunction()Функция, которая будет вызвана. Без
параметров.
frequencyNumberПериод вызова функции в секундах.
currentlyExecutingBooleanИндикатор того, что функция в данный момент
выполняется.

Объект Prototype


Объект Prototype не делает ничего особенного, кроме того, что объявляет используемую версию библиотеки.

СвойствоТипОписание
VersionStringВерсия библиотеки
emptyFunctionFunction()Пустая функция

Объект Class


Объект Class используется для объявления других классов библиотеки. Использование этого класса гарантирует, что новый класс будет поддерживать метод initialize(), который используется как конструктор.

Смотрите пример ниже.

// Объявляем класс
<span class=highlite>var MySampleClass = Class.create();</span>

// определяем остальные детали реализации класса
MySampleClass.prototype = {

initialize: function(message) {
this.message = message;
},

showMessage: function(ajaxResponse) {
alert(this.message);
}
};

// теперь создаем и используем объект
var myTalker = new MySampleClass(hi there.);
myTalker.showMessage(); // показывает окно предупреждения

МетодДоступАргументыОписание
create(*)instance(any)Определяет конструктор нового класса

Объект Ajax


Этот объект используется как основа для многих других классов, предоставляющих AJAX функциональность.

МетодДоступАргументыОписание
getTransport()instance(нет)Возвращает новый объект
XMLHttpRequest

Класс Ajax.Base


Этот класс используется как базовый для других классов, определенных в объекте Ajax.

МетодДоступАргументыОписание
setOptions(options)instanceoptions:
опции
AJAX
Устанавливает требуемые
опции
для данной AJAX операции
responseIsSuccess()instance(нет)Возвращает true,
если AJAX операция была выполнена успешно, false
в противном случае
responseIsFailure()instance(нет)Функция, обратная
responseIsSuccess()
.

Класс Ajax.Request


Наследуется от Ajax.Base
Содержит AJAX операции

СвойствоТипДоступОписание
EventsArraystaticСписок возможных событий/состояний, о которых
сообщается во время AJAX операции. Список содержит: Uninitialized,
Loading, Loaded, Interactive, и Complete.
transportXMLHttpRequestinstanceОбъект XMLHttpRequest,
обслуживающий AJAX операцию

МетодДоступАргументыОписание
[ctor](url, options)конструкторurl: URL, по которому совершается запрос, options: AJAX опцииСоздает один экземпляр объекта с данными
url и options.
Важно: Стоит заметить, что выбранный URL подвергается
проверке браузера на безопасность. Во многих случаях браузер не будет
совершать запрос, если URL не принадлежит тому же хосту (домену), что и
текущая страница. В идеале, вы должны использовать только локальные URL,
чтобы избежать настроек или ограничений пользовательских браузеров.
(Спасибо Clay.)
request(url)instanceurl: URL, по которому будет совершен AJAX запросЭтот метод обычно не вызывается снаружи. Он
заранее вызван из конструктора.
setRequestHeaders()instance(нет)Этот метод обычно не вызывается снаружи. Он
вызывается самим объектом, чтобы установить HTTP заголовки, которые
будут отправлены в запросе.
onStateChange()instance(нет)Этот метод обычно не вызывается снаружи. Он
вызывается самим объектом, когда меняется AJAX статус.
respondToReadyState(readyState)instancereadyState: номер состояния (от 1 до 4)Этот метод обычно не вызывается снаружи. Он
вызывается самим объектом, когда меняется AJAX статус.

Класс options argument object


Аргумент options является важной частью AJAX операций. Для этого нет класса options. Любой объект, имеющий требуемые свойства, может быть использован. Обычно используются анонимные объекты, созданные специально для AJAX запросов.

СвойствоТипЗначение по умолчаниюОписание
methodStringpostМетод HTTP запроса
parametersStringСписок параметров, сформатированный как в URL
asynchronousBooleantrueИндикатор того, что AJAX запрос будет
асинхронным
postBodyStringundefinedДанные передаваемые в теле HTTP POST запроса
requestHeadersArrayundefinedСписок HTTP заголовков запроса. Этот список
должен содержать четное число элементов, каждый нечетный должен быть
именем заголовка, следующий за ним четный должен быть значением этого
заголовка. Например: [my-header1, this is the
value, my-other-header, another value]
onXXXXXXXXFunction(XMLHttpRequest)undefinedВаши собственные функции, которые будут
вызваны при соответствующем событии или изменении состоянии AJAX
запроса. Например: var myOpts = {onComplete:
showResponse, onLoaded: registerLoaded};
. Функции будет передан
один параметр, содержащий объект XMLHttpRequest,
который обслуживает данную AJAX операцию.
onSuccessFunction(XMLHttpRequest)undefinedВаша функция, которая будет вызвана, если
AJAX запрос завершится успешно. Функции будет передан один параметр,
содержащий объект XMLHttpRequest, который
обслуживает данную AJAX операцию.
onFailureFunction(XMLHttpRequest)undefinedВаша функция, которая будет вызвана, если
AJAX запрос завершится с ошибкой. Функции будет передан один параметр,
содержащий объект XMLHttpRequest, который
обслуживает данную AJAX операцию.
insertionFunction(Object, String)nullФункция, которая будет вызвана, чтобы
вставить полученный текст внутрь элемента. Она будет вызвана с двумя
аргументами: элементом, который надо обновить и текстом ответа.
Применяется только к объектам

Ajax.Updater
.
evalScriptsBooleanundefined, falseОпределяет, будут ли выполнены скриптовые
блоки в ответе. Применяется только к объектам

Ajax.Updater
.
decayNumberundefined, 1Определяет прогрессирующее замедление
обновлений в объекте

Ajax.PeriodicalUpdater
, если ответ совпал с предыдущим. Например,
если вы установите 2, то после обновления, получившего тот же результат,
что и предыдущее, объект будет ждать в два раза дольше до следующего
обновления. Если это повторится еще раз, объект будет ждать в четыре
раза дольше и так далее. Оставьте неопределенным или используйте 1,
чтобы избежать этого.

Класс Ajax.Updater


Наследуется от Ajax.Request

Используется, когда запрошенный URL возвращает HTML, который вы хотите напрямую вставить в определенный элемент на странице. Вы можете так же использовать этот объект, если URL возвращает блоки

Hello, <span id=person style=color:red;>Wiggum. Hows it going?</span>

<script> <span class=highlite>new Insertion.Before(
person, Chief )</span>; </script>

<p> Изменит HTML на </p>
<pre>
Hello, <span class=highlite>Chief </span><span style=color: red; id=person>Wiggum. How
s it going?</span>

Класс Insertion.Top


Наследуется от Abstract.Insertion

Вставляет HTML первым ребенком данного элемента. Данные будут вставлены сразу после открывающего тега элемента.

МетодДоступАргументыОписание
[ctor](element, content)конструкторelement: элемент или id, content: HTML, который должен быть вставленНаследуется от

Abstract.Insertion
. Создает объект, облегчающий задачу динамической
вставки HTML.

Следующий код

Hello, <span style=color: red; id=person>Wiggum. Hows it going?</span>

<script> <span class=highlite>new Insertion.Top(
person, Mr. )</span>; </script>

Изменит HTML на

Hello, <span style=color: red; id=person><span class=highlite>Mr. </span>Wiggum. Hows it going?</span>

Класс Insertion.Bottom


Наследуется от Abstract.Insertion

Вставляет HTML последним ребенком данного элемента. Данные будут вставлены перед закрывающим тегом элемента.

МетодДоступАргументыОписание
[ctor](element, content)конструкторelement: элемент или id, content: HTML, который должен быть вставленНаследуется от

Abstract.Insertion
. Создает объект, облегчающий задачу динамической
вставки HTML.

Следующий код

Hello, <span style=color: red; id=person>Wiggum. Hows it going?</span>

<script> <span class=highlite>new Insertion.Bottom(
person, Whats up?)</span>; </script>

Изменит HTML на

Hello, <span style=color: red; id=person>Wiggum. Hows it going?<span class=highlite> Whats up?</span></span>

Класс Insertion.After


Наследуется от Abstract.Insertion

Вставляет HTML сразу за закрывающим тегом элемента.

МетодДоступАргументыОписание
[ctor](element, content)конструкторelement: элемент или id, content: HTML, который должен быть вставленНаследуется от

Abstract.Insertion
. Создает объект, облегчающий задачу динамической
вставки HTML.

Следующий код

Hello, <span style=color: red; id=person>Wiggum. Hows it going?</span>

<script> <span class=highlite>new Insertion.After(
person, Are you there?)</span>; </script>

Изменит HTML на

Hello, <span style=color: red; id=person>Wiggum. Hows it going?</span><span class=highlite> Are you there?</span>

Объект Field


Этот объект предоставляет несколько вспомогательных функций для работы с полями ввода форм.

МетодДоступАргументыОписание
clear(field1 [, field2 [, field3 [...]]])instancefieldN: поле или idОчищает значение каждого переданного поля.
present(field1 [, field2 [, field3 [...]]])instancefieldN: поле или idВозвращает true
если все поля имеют непустые значения.
focus(field)instancefield: поле или idФокусирует данное поле.
select(field)instancefield: поле или idВыделяет значение поля, которое поддерживает
текстовое выделение
activate(field)instancefield: поле или idФокусирует элемент и выделяет значение поля,
которое поддерживает текстовое выделение

Объект Form


Этот объект предоставляет несколько вспомогательных функций для работы с формами и их полями ввода.

МетодДоступАргументыОписание
serialize(form)instanceform: поле формы или idВозвращает сформатированный как в URL список
полей и их значений, например:
field1=value1&field2=value2&field3=value3
getElements(form)instanceform: поле формы или idВозвращает массив (Array)
содержащий все поля ввода формы.
getInputs(form [, typeName [, name]])instanceform: поле формы или id, typeName: тип элемента формы, name: имя
поля ввода.
Возвращает массив (Array),
содержащий все элементы
формы. Опционально, список может быть отфильтрован по атрибутам
type или name.
disable(form)instanceform: поле формы или idОтключает все элементы формы.
enable(form)instanceform: поле формы или idВключает все элементы формы.
focusFirstElement(form)instanceform: поле формы или idАктивирует первое видимое и включенное поле
формы.
reset(form)instanceform: поле формы или idВозвращает форму в исходное состояние.
Аналогично вызову метода reset() объекта
формы.

Объект Form.Element


Этот объект предоставляет несколько вспомогательных форм для работы с видимыми и невидимыми элементами формы.

МетодДоступАргументыОписание
serialize(element)instanceelement: элемент или idВозвращает пару имя=значение элемента,
например: elementName=elementValue
getValue(element)instanceelement: элемент или idВозвращает значение элемента.

Объект Form.Element.Serializers


Этот объект предоставляет несколько вспомогательных функций, которые используются внутри библиотеки для облегчения извлечения значений элементов форм.

МетодДоступАргументыОписание
inputSelector(element)instanceelement: объект или id элемента формы, у которого есть свойство
checked, например радио-кнопка или чекбокс.
Возвращает массив (Array)
с именем и значением элемента, например:
[elementName, elementValue]
textarea(element)instanceelement: объект или id элемента формы, у которого есть свойство
value, например, текстовое поле, кнопка или поле ввода пароля.
Возвращает массив (Array)
с именем и значением элемента, например:
[elementName, elementValue]
select(element)instanceelement: объект или id элементаВозвращает массив (Array)
с именем элемента и всеми выбранными значениями или текстами, например:
[elementName, selOpt1 selOpt4 selOpt9]

Класс Abstract.TimedObserver


Этот класс используется как базовый для других классов, которые следят за изменением значения элемента (или любого другого его свойства, которое определяет производный класс). Этот класс используется как абстрактный класс.

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

МетодДоступАргументыОписание
[ctor](element, frequency, callback)конструкторelement: элемент или id, frequency: период в секундах, callback:
функция, которая будет вызвана, когда элемент поменяется
Создает объект, который будет следить за
изменениями объекта.
getValue()instance, abstract(нет)Производные классы должны определять этот
метод, чтобы он возвращал текущее значение наблюдаемого свойства.
registerCallback()instance(нет)Этот метод обычно не вызывается снаружи. Он
вызывается самим объектом, чтобы начать слежение за элементом.
onTimerEvent()instance(нет)Этот метод обычно не вызывается снаружи. Он
периодически вызывается самим объектом для проверки элемента.

СвойствоТипОписание
elementObjectОтслеживаемый элемент.
frequencyNumberИнтервал в секундах между проверками.
callbackFunction(Object, String)Функция, которая должна быть вызвана, если
элемент изменится. Ей передается сам элемент и новое значение
отслеживаемого свойства.
lastValueStringПоследнее значение элемента.

Класс Form.Element.Observer


Наследуется от Abstract.TimedObserver

Реализация Abstract.TimedObserver, которая отслеживает значения полей ввода. Используйте этот класс, если вы хотите следить за элементом, который не создает события при изменении значения. В противном случае вы можете воспользоваться классом Form.Element.EventObserver.

МетодДоступАргументыОписание
[ctor](element, frequency, callback)конструкторelement: элемент или id, frequency: интервал в секундах, callback:
функция, которая должна быть вызвана, когда изменится значение элемента
Наследуется от

Abstract.TimedObserver
. Создает объект, который будет отслеживать
свойство value элемента.
getValue()instance(нет)Возвращает значение элемента.

Класс Form.Observer


Наследуется от Abstract.TimedObserver

Реализация Abstract.TimedObserver, которая отслеживает изменения любого из полей формы. Используйте этот класс, если вы хотите следить за формой, которая содержит элементы, которые не создают события при изменении значения. В противном случае вы можете воспользоваться классом Form.EventObserver.

МетодДоступАргументыОписание
[ctor](form, frequency, callback)конструкторform: объект формы или id, frequency: интервал в секундах, callback:
функция, которая должна быть вызвана, если изменится какое-либо из полей
формы
Наследуется от

Abstract.TimedObserver
. Создает объект, отслеживающий изменения в
форме.
getValue()instance(нет)Возвращает все элементы формы в
сериализованном виде.

Класс Abstract.EventObserver


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

К одному и тому же элементу можно быть присоединено несколько объектов типа Abstract.EventObserver без помех друг для друга. Они будут вызываться в порядке присоединения.

Событие, на котором срабатывает объект: onclick для радио-кнопок и чекбоксов и onchange для всех текстовых полей и списков.

МетодДоступАргументыОписание
[ctor](element, callback)конструкторelement: элемент или id, callback: функция, которая будет вызвана,
когда произойдет событие
Создает объект, следящий за элементом.
getValue()instance, abstract(нет)Производные классы должны определить этот
метод, чтобы он возвращал текущее значение отслеживаемого элемента.
registerCallback()instance(нет)Этот метод обычно не вызывается снаружи. Он
вызывается внутри объекта, что присоединиться к событию



Похожие статьи:
- Магазин рекламных мест
- Cайт с помощью HTML::Mason
- Самый быстрый способ определить количество пользователей на сайте онлайн
- Валидность HTML
- Функции постраничного вывода в PHP
- SEO оптимизация текста
- О порталах CMS
- Обман в обмене ссылками.
- FAQ по HTML (часть 1)
- WML - язык разметки
- Что такое WAP?
- Создание мобильных WAP сайтов
- Как сделать Wap версию сайта


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]