Учебники

script.aculo.us — Краткое руководство

Январь 12, 2019

script.aculo.us — Обзор

script.aculo.us — это библиотека JavaScript, созданная на основе Prototype JavaScript Framework, улучшающая графический интерфейс пользователя и предоставляющая веб-пользователям возможность работы с Web 2.0.

script.aculo.us был разработан Томасом Фуксом и впервые был выпущен для публики в июне 2005 года.

script.aculo.us предоставляет динамические визуальные эффекты и элементы пользовательского интерфейса через объектную модель документа (DOM).

Prototype JavaScript Framework — это JavaScript-фреймворк, созданный Сэмом Стивенсоном, который предоставляет Ajax-фреймворк и другие утилиты.

Как установить script.aculo.us?

Установить библиотеку script.aculo.us довольно просто. Это можно настроить в три простых шага —

  • Перейдите на страницу загрузки, чтобы скачать последнюю версию в удобной упаковке.

  • Распакуйте загруженный пакет, и вы найдете следующие папки —

    • lib — содержит файл prototype.js

    • src — содержит следующие 8 файлов —

      • builder.js
      • controls.js
      • dragdrop.js
      • effects.js
      • scriptaculous.js
      • slider.js
      • sound.js
      • unittest.js

    • test — содержит файлы для тестирования.

    • CHANGELOG — Файл, содержащий историю всех изменений.

    • MIT-LICENSE — файл с описанием условий лицензирования.

    • README — файл с описанием пакета установки, включая инструкции по установке.

  • Теперь поместите следующие файлы в каталог вашего сайта, например, / javascript.

    • builder.js
    • controls.js
    • dragdrop.js
    • effects.js
    • scriptaculous.js
    • slider.js
    • prototype.js

Перейдите на страницу загрузки, чтобы скачать последнюю версию в удобной упаковке.

Распакуйте загруженный пакет, и вы найдете следующие папки —

lib — содержит файл prototype.js

src — содержит следующие 8 файлов —

test — содержит файлы для тестирования.

CHANGELOG — Файл, содержащий историю всех изменений.

MIT-LICENSE — файл с описанием условий лицензирования.

README — файл с описанием пакета установки, включая инструкции по установке.

Теперь поместите следующие файлы в каталог вашего сайта, например, / javascript.

ПРИМЕЧАНИЕ. — Файлы sound.js и unittest.js являются необязательными.

Как использовать библиотеку script.aculo.us?

Теперь вы можете включить скрипт script.aculo.us следующим образом: 

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

По умолчанию scriptaculous.js загружает все остальные файлы JavaScript, необходимые для эффектов, перетаскивания, ползунков и всех других функций script.aculo.us.

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

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Сценарии, которые можно указать:

  • последствия
  • перетаскивания
  • строитель
  • управления
  • ползунок

ПРИМЕЧАНИЕ. — Некоторые скрипты требуют, чтобы другие загружались для правильной работы.

Как вызвать библиотечную функцию script.aculo.us?

Чтобы вызвать библиотечную функцию script.aculo.us, используйте теги HTML script, как показано ниже —

Live Demo 

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Здесь мы используем модуль Effect и применяем эффект Highlight к элементу.

Это даст следующий результат —

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

Live Demo 

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Это даст следующий результат —

script.aculo.us — Модули

script.aculo.us разделен на модули, каждый из которых имеет свой собственный файл JavaScript. Эти модули описаны здесь —

Последствия

Модуль эффектов содержит более двадцати пяти визуальных эффектов и семь режимов перехода.

Перетащить

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

Слайдеры

Слайдер — это своего рода небольшой рельс или дорожка, по которой можно скользить ручкой. Это переводит в числовое значение. С script.aculo.us вы можете создавать такие ползунки с большим контролем.

Автозаполнение

Элементы управления автозаполнением позволяют вводить текстовые поля в стиле Google-Suggest, локальном и серверном автозаполнении.

Редактирование на месте

Вы можете сделать любой текст или коллекцию элементов для редактирования на месте, просто щелкнув по нему.

строитель

Помощник для создания фрагментов DOM в JavaScript. Это инструмент разработчика, который значительно облегчает создание DOM.

звук

В версии 1.7.1 появилась звуковая система, которая позволяет легко воспроизводить звуки, ставить их в очередь, использовать несколько дорожек и т. Д.

script.aculo.us — Визуальные эффекты

Эффекты script.aculo.us разделены на две группы —

Основные эффекты

Следующие шесть основных эффектов являются основой JavaScript-библиотеки script.aculo.us Visual Effects.

Effect.Opacity

Effect.Scale

Effect.Morph

Effect.Move

Effect.Highlight

Effect.Parallel

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

Все специфичные для эффекта Общие параметры были обсуждены в этом руководстве вместе с эффектами.

Комбинированные эффекты

Все комбинированные эффекты основаны на пяти основных эффектах и ​​рассматриваются как примеры, позволяющие вам создавать свои собственные эффекты.

Обычно эти эффекты зависят от параллельного, синхронизированного выполнения других эффектов. Такое исполнение легко доступно, следовательно, создавать свои собственные комбинированные эффекты очень легко. Вот список комбинированных эффектов —

Effect.Appear

Effect.Fade

Effect.Puff

Effect.DropOut

Effect.Shake

Effect.SwitchOff

Effect.BlindDown

Effect.BlindUp

Effect.SlideDown

Effect.SlideUp

Effect.Pulsate

Effect.Squish

Effect.Fold

Effect.Grow

Effect.Shrink

Кроме того, есть служебный метод Effect.toggle для элементов, которые вы хотите временно показать с помощью анимации « Появиться / исчезнуть» , «Слайд» или «Слепой».

Effect.toggle

Библиотечные файлы, необходимые для эффектов

Чтобы использовать возможности эффектов script.aculo.us, вам нужно загрузить модуль эффектов. Итак, ваша минимальная загрузка для script.aculo.us будет выглядеть так: 

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>
	
   <body>
      ...
   </body>
</html>

Функции эффекта вызова

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

Синтаксис 

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Эти два синтаксиса технически эквивалентны. Выбор между ними в основном зависит от вашего личного эстетического восприятия кода.

пример

Вот два эквивалентных вызова, так что вы можете увидеть, как связаны синтаксисы, которые очень взаимозаменяемы — 

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });

script.aculo.us — Drag & Drop

Самая популярная особенность интерфейса Web 2.0 — это функция перетаскивания. К счастью, script.aculo.us обладает встроенной способностью поддерживать перетаскивание.

Чтобы использовать возможности перетаскивания в script.aculo.us, вам необходимо загрузить модуль dragdrop , для которого также требуется модуль эффектов . Таким образом, ваша минимальная загрузка для script.aculo.us будет выглядеть так: 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Перетаскивание вещей вокруг

Сделать элемент перетаскиваемым с помощью script.aculo.us очень просто. Это требует создания экземпляра класса Draggable и определения элемента, который нужно сделать перетаскиваемым.

Draggable Синтаксис 

new Draggable( element, options );

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

Перетаскиваемые параметры

При создании перетаскиваемого объекта вы можете использовать один или несколько из следующих параметров.

вариант Описание Примеры
возвращаться Если установлено значение true , элемент возвращается в исходное положение после завершения перетаскивания. Также указывает, будет ли вызываться обратный эффект обратного эффекта при остановке операции перетаскивания. По умолчанию false .

пример

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

  • Если ему назначено целое число x, перетаскиваемый объект будет привязан к сетке из x пикселей.

  • Если массив [x, y], горизонтальное перетаскивание привязывается к сетке из x пикселей, а вертикальное — к y пикселям.

  • Это также может быть функция, соответствующая функции (x, y, draggable), которая возвращает массив [x, y].

пример

ZIndex Задает z-индекс CSS, который будет применен к элементу во время операции перетаскивания. По умолчанию для z-индекса элемента задано значение 1000 при перетаскивании.

пример

ореолы Логическое значение, определяющее, следует ли клонировать перетаскиваемый объект для перетаскивания, оставив оригинал на месте, пока клон не будет отброшен. По умолчанию false .

пример

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

пример

справиться Указывает элемент, который будет использоваться в качестве дескриптора для запуска операции перетаскивания. По умолчанию элемент является собственным дескриптором.

пример

starteffect Эффект, вызываемый для элемента при начале перетаскивания. По умолчанию изменяет непрозрачность элемента до 0,2 за 0,2 секунды.

пример

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

пример

endeffect Эффект, вызываемый для элемента при перетаскивании, заканчивается. По умолчанию изменяет непрозрачность элемента до 1,0 за 0,2 секунды.

пример

пример

Если ему назначено целое число x, перетаскиваемый объект будет привязан к сетке из x пикселей.

Если массив [x, y], горизонтальное перетаскивание привязывается к сетке из x пикселей, а вертикальное — к y пикселям.

Это также может быть функция, соответствующая функции (x, y, draggable), которая возвращает массив [x, y].

пример

пример

пример

пример

пример

пример

пример

пример

Параметры обратного вызова

Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options —

функция Описание Примеры
OnStart Вызывается, когда начинается перетаскивание.

пример

onDrag Вызывается повторно при перемещении мыши, если положение мыши меняется с предыдущего вызова.

пример

менять Вызывается так же, как onDrag (который является предпочтительным обратным вызовом).

пример

под конец Вызывается, когда перетаскивание закончено.

пример

пример

пример

пример

пример

За исключением обратного вызова «change», каждый из этих обратных вызовов принимает два параметра: объект Draggable и объект события мыши.

Draggable Пример

Здесь мы определяем 5 элементов, которые сделаны перетаскиваемыми: три элемента <div>, элемент <img> и элемент <span>. Цель трех различных элементов <div> состоит в том, чтобы продемонстрировать, что независимо от того, начинается ли элемент с правила позиционирования статического (по умолчанию), относительного или абсолютного, поведение перетаскивания не изменяется.

Live Demo 

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

Это даст следующий результат —

Отбрасывание вытащенных вещей

Элемент преобразуется в целевой объект с помощью вызова метода add () в пространстве имен с именем Droppables .

Пространство имен Droppables имеет два важных метода: add () для создания цели удаления и remove () для удаления цели удаления.

Синтаксис

Вот синтаксис метода add () для создания цели удаления. Метод add () создает целевой объект из элемента, переданного в качестве его первого параметра, используя параметры хэша, переданные в качестве второго. 

Droppables.add( element, options );

Синтаксис для remove () еще проще. Метод remove () удаляет поведение цели удаления из переданного элемента. 

Droppables.remove(element);

Опции

При создании перетаскиваемого объекта вы можете использовать один или несколько из следующих параметров.

вариант Описание Примеры
Hoverclass Имя класса CSS, который будет добавлен к элементу, в то время как Droppable активен (имеет приемлемое перетаскивание над ним). По умолчанию равно нулю.

пример

принимать Строка или массив строк, описывающих классы CSS. Падение может принимать только перетаскиваемые объекты, которые имеют один или несколько из этих классов CSS.

пример

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

пример

перекрываться Если установлено значение «горизонтальный» или «вертикальный», перетаскиваемый элемент будет реагировать на перетаскиваемый элемент только в том случае, если он перекрывается более чем на 50% в заданном направлении. Используется Sortables, обсуждается в следующей главе.
жадный Если true (по умолчанию), он перестает зависать над другими дескрипторами, при перетаскивании не будет искать.

пример

пример

пример

пример

пример

Параметры обратного вызова

Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options —

функция Описание Примеры
onHover Определяет функцию обратного вызова, которая активируется, когда подходящий перетаскиваемый элемент находится над целью отбрасывания. Используется Sortables, обсуждается в следующей главе.
OnDrop Определяет функцию обратного вызова, которая вызывается, когда подходящий перетаскиваемый элемент помещается на цель удаления.

пример

пример

пример

Здесь первая часть этого примера аналогична нашему предыдущему, за исключением того, что мы использовали удобную функцию $ A () Prototype для преобразования списка узлов всех элементов <img> в элементе с идентификатором draggables в массив ,

Live Demo 

<html>
   <head>
      <title>Drag and Drop Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            // Make all the images draggables from draggables division.
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
				
            // Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
			
         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
				
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
			
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
			
         .hoverActive {
            background-color: #ffffcc;
         }
			
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

Это даст следующий результат —

script.aculo.us — сортировка элементов

Часто вам нужно предоставить пользователю возможность изменять порядок элементов (например, элементов в списке), перетаскивая их.

Без перетаскивания переупорядочение может быть кошмаром, но script.aculo.us предоставляет расширенную поддержку переупорядочения из коробки через класс Sortable . Элемент, который должен стать Sortable , передается методу create () в пространстве имен Sortable.

Сортируемый состоит из элементов элемента в элементе контейнера. Когда вы создаете новый Sortable, он заботится о создании соответствующих Draggables и Droppables .

Чтобы использовать возможности Sortable для script.aculo.us, вам необходимо загрузить модуль dragdrop , для которого также требуется модуль эффектов . Так что ваша минимальная загрузка для script.aculo.us будет выглядеть так — 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Сортируемый синтаксис

Вот синтаксис метода create () для создания сортируемого элемента. Метод create () берет идентификатор элемента контейнера и сортирует их на основе переданных параметров. 

Sortable.create('id_of_container',[options]);

Используйте Sortable.destroy, чтобы полностью удалить все обработчики событий и ссылки на Sortable, созданный Sortable.create.

ПРИМЕЧАНИЕ. — Вызов Sortable.create неявно вызывает Sortable.destroy, если указанный элемент уже был Sortable. Вот простой синтаксис для вызова функции уничтожения. 

Sortable.destroy( element );

Сортируемые параметры

При создании объекта Sortable вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

тег

Определяет тип элементов в сортируемом контейнере, которые должны быть отсортированы с помощью перетаскивания. По умолчанию это «li».

2

только

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

3

перекрытие

Один из ложных, горизонтальных или вертикальных . Управляет точкой, в которой происходит изменение порядка. По умолчанию вертикальный .

4

ограничение

Один из ложных, горизонтальных или вертикальных . Ограничивает движение перетаскиваемых сортируемых элементов. По умолчанию вертикальный .

5

политика сдерживания

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

6

справиться

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

7

hoverclass

Указывает имя класса CSS, которое будет применено к не перетаскиваемым сортируемым элементам, когда перетаскиваемый элемент проходит над ними. По умолчанию имя класса CSS не применяется.

8

ореолы

Подобно параметру «Перетаскивание» с тем же именем, если этот параметр имеет значение «истина», исходный элемент операции перетаскивания остается на месте, пока полупрозрачная копия элемента перемещается вместе с указателем мыши. По умолчанию false . Эта опция не работает с IE.

9

dropOnEmpty

Если true, это позволяет сортируемым элементам быть помещенным в пустой список. По умолчанию false .

10

свиток

Если сортируемый контейнер обладает полосой прокрутки из-за настройки атрибута переполнения CSS, эта опция включает автоматическую прокрутку списка за пределами видимых элементов. По умолчанию false .

12

scrollSensitivity

Когда прокрутка включена, она регулирует точку, в которой происходит прокрутка. По умолчанию 20.

13

Scrollspeed

Когда прокрутка включена, она регулирует скорость прокрутки. По умолчанию 15.

14

дерево

Если это правда, это разрешает сортировку с подэлементами в сортируемом элементе. По умолчанию false.

15

treeTag

Если опция дерева включена, она указывает тип элемента контейнера для подэлемента, чьи дочерние элементы участвуют в сортируемом поведении. По умолчанию используется значение ul.

тег

Определяет тип элементов в сортируемом контейнере, которые должны быть отсортированы с помощью перетаскивания. По умолчанию это «li».

только

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

перекрытие

Один из ложных, горизонтальных или вертикальных . Управляет точкой, в которой происходит изменение порядка. По умолчанию вертикальный .

ограничение

Один из ложных, горизонтальных или вертикальных . Ограничивает движение перетаскиваемых сортируемых элементов. По умолчанию вертикальный .

политика сдерживания

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

справиться

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

hoverclass

ореолы

Подобно параметру «Перетаскивание» с тем же именем, если этот параметр имеет значение «истина», исходный элемент операции перетаскивания остается на месте, пока полупрозрачная копия элемента перемещается вместе с указателем мыши. По умолчанию false . Эта опция не работает с IE.

dropOnEmpty

Если true, это позволяет сортируемым элементам быть помещенным в пустой список. По умолчанию false .

свиток

Если сортируемый контейнер обладает полосой прокрутки из-за настройки атрибута переполнения CSS, эта опция включает автоматическую прокрутку списка за пределами видимых элементов. По умолчанию false .

scrollSensitivity

Когда прокрутка включена, она регулирует точку, в которой происходит прокрутка. По умолчанию 20.

Scrollspeed

Когда прокрутка включена, она регулирует скорость прокрутки. По умолчанию 15.

дерево

Если это правда, это разрешает сортировку с подэлементами в сортируемом элементе. По умолчанию false.

treeTag

Если опция дерева включена, она указывает тип элемента контейнера для подэлемента, чьи дочерние элементы участвуют в сортируемом поведении. По умолчанию используется значение ul.

Вы можете предоставить следующие обратные вызовы в параметре options —

Sr.No Вариант и описание
1

по изменению

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

2

OnUpdate

Функция, которая будет вызываться после завершения операции перетаскивания, которая приводит к изменению порядка элементов.

по изменению

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

OnUpdate

Функция, которая будет вызываться после завершения операции перетаскивания, которая приводит к изменению порядка элементов.

Примеры сортировки

Это демо было проверено для работы в IE 6.0. Это также работает в последней версии Firefox.

Live Demo 

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

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

Это даст следующий результат —

Обратите внимание на использование тега: «li» . Аналогично, вы можете отсортировать следующий список изображений, доступных в <div> —

Live Demo 

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

Это даст следующий результат —

Сериализация сортируемых элементов

Объект Sortable также предоставляет функцию Sortable.serialize () для сериализации Sortable в формате, подходящем для запросов HTTP GET или POST. Это может быть использовано для отправки порядка сортировки с помощью вызова Ajax.

Синтаксис 

Sortable.serialize(element, options);

Опции

При создании объекта Sortable вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

тег

Устанавливает тип тега, который будет сериализован. Это будет похоже на то, что используется в Sortable.create .

2

название

Задает имя ключа, который будет использоваться для создания пар ключ / значение для сериализации в формате HTTP GET / POST. Так что, если имя будет xyz, строка запроса будет выглядеть так:

xyz [] = значение1 & xyz [] = значение2 & xyz [] = значение3

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

тег

Устанавливает тип тега, который будет сериализован. Это будет похоже на то, что используется в Sortable.create .

название

Задает имя ключа, который будет использоваться для создания пар ключ / значение для сериализации в формате HTTP GET / POST. Так что, если имя будет xyz, строка запроса будет выглядеть так:

xyz [] = значение1 & xyz [] = значение2 & xyz [] = значение3

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

Сериализировать примеры

В этом примере выходные данные сериализации будут давать только цифры после подчеркивания в идентификаторах элементов списка.

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

Live Demo 

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + 
            $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

Это даст следующий результат —

Перемещение предметов между сортируемыми элементами

В следующем примере показано, как перемещать элементы из одного списка в другой.

Live Demo 

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

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

Мы устанавливаем для dropOnEmpty значение true для обоих списков. Чтобы увидеть влияние этой опции на этот список, переместите все элементы из одного списка в другой, чтобы один список был пустым. Вы обнаружите, что он позволяет удалить элемент в пустой список.

Это даст следующий результат —

Привязка к Аяксу

Конечно, onUpdate является основным кандидатом для запуска Ajax-уведомлений на сервер, например, когда пользователь переупорядочивает список дел или какой-либо другой набор данных. Комбинация Ajax.Request и Sortable.serialize делает живое постоянство достаточно простым —

Live Demo 

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize создает строку вроде: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, где числа являются частями идентификаторов идентификаторов элементов списка после подчеркивания.

Теперь нам нужно кодировать файл file.php , который будет анализировать опубликованные данные как parse_str ($ _ POST [‘data’]); и вы можете делать с этими отсортированными данными все, что захотите.

Чтобы узнать больше об AJAX, ознакомьтесь с нашим простым руководством Ajax .

script.aculo.us — создание слайдеров

Ползунки — это тонкие дорожки с одной или несколькими ручками, которые пользователь может перемещать по дорожке.

Цель ползунка состоит в том, чтобы предоставить альтернативный метод ввода для определения числового значения; ползунок представляет диапазон, а перемещение ручки по дорожке определяет значение в этом диапазоне.

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

Чтобы использовать возможности слайдера script.aculo.us, вам необходимо загрузить модуль slider.js вместе с модулем prototype.js. Так что ваша минимальная загрузка для script.aculo.us будет выглядеть так — 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Создание элемента управления Slider

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

new Control.Slider(handle, track [ , options ] );

Элементом track обычно является <div>, а элементом handle является <div> или <span> внутри элемента track. Оба могут быть переданы либо по id =, либо по прямым ссылкам DOM, как обычно.

Варианты слайдеров

При создании объекта Slider вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

Ось

Определяет ориентацию элемента управления как горизонтальную или вертикальную . Ориентация по умолчанию горизонтальная .

2

Спектр

Определяет диапазон значений ползунка как экземпляр экземпляра Prototype ObjectRange. По умолчанию от 0 до 1.

3

Ценности

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

4

sliderValue

Устанавливает начальное значение ползунка. Если опущено, значение, представленное крайним левым (или самым верхним) краем ползунка, является начальным значением.

5

инвалид

Если true, он создает слайд, который изначально отключен. Очевидно, по умолчанию используется значение false.

6

SetValue

Обновит значение ползунка и, таким образом, переместит ручку ползунка в соответствующую позицию.

7

setDisabled

Устанавливает ползунок в отключенное состояние (disabled = true).

8

setEnabled

Устанавливает ползунок во включенное состояние (disabled = false).

Ось

Определяет ориентацию элемента управления как горизонтальную или вертикальную . Ориентация по умолчанию горизонтальная .

Спектр

Определяет диапазон значений ползунка как экземпляр экземпляра Prototype ObjectRange. По умолчанию от 0 до 1.

Ценности

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

sliderValue

Устанавливает начальное значение ползунка. Если опущено, значение, представленное крайним левым (или самым верхним) краем ползунка, является начальным значением.

инвалид

Если true, он создает слайд, который изначально отключен. Очевидно, по умолчанию используется значение false.

SetValue

Обновит значение ползунка и, таким образом, переместит ручку ползунка в соответствующую позицию.

setDisabled

Устанавливает ползунок в отключенное состояние (disabled = true).

setEnabled

Устанавливает ползунок во включенное состояние (disabled = false).

Вы можете предоставить следующие обратные вызовы в параметре options —

Sr.No Вариант и описание
1

onSlide

Вызывается всякий раз, когда ползунок перемещается путем перетаскивания. Вызываемая функция получает значение ползунка в качестве параметра.

2

по изменению

Вызывается всякий раз, когда ползунок завершил перемещение или его значение изменилось через функцию setSlider Value. Вызываемая функция получает значение ползунка в качестве параметра.

onSlide

Вызывается всякий раз, когда ползунок перемещается путем перетаскивания. Вызываемая функция получает значение ползунка в качестве параметра.

по изменению

Вызывается всякий раз, когда ползунок завершил перемещение или его значение изменилось через функцию setSlider Value. Вызываемая функция получает значение ползунка в качестве параметра.

Пример слайдеров

Live Demo 

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

Обращает на себя внимание —

  • Вы можете изменить изображение слайдера любого слайдера, используя CSS. Используйте свойства CSS background-image: url (track.gif) и background-repeat: no-repeat, чтобы установить изображение слайдера.

  • Значение диапазона можно указать с помощью $ R (minValue, MaxValue). Например, $ R (1, 100).

  • Значение диапазона может быть указано в терминах конкретных значений. Например, значения: [1,25,50,75,100]. В этом случае ползунок получит только те дискретные значения, которые указаны при перемещении ручки.

  • В любое время значение ползунка можно установить под управлением программы, вызвав метод setValue () экземпляра ползунка, например: sliderInstance.setValue (50);

Вы можете изменить изображение слайдера любого слайдера, используя CSS. Используйте свойства CSS background-image: url (track.gif) и background-repeat: no-repeat, чтобы установить изображение слайдера.

Значение диапазона можно указать с помощью $ R (minValue, MaxValue). Например, $ R (1, 100).

Значение диапазона может быть указано в терминах конкретных значений. Например, значения: [1,25,50,75,100]. В этом случае ползунок получит только те дискретные значения, которые указаны при перемещении ручки.

В любое время значение ползунка можно установить под управлением программы, вызвав метод setValue () экземпляра ползунка, например: sliderInstance.setValue (50);

Это даст следующий результат —

script.aculo.us — Автозаполнение

Изначально script.aculo.us поддерживает два источника автозаполнения:

  • Удаленные источники (полученные через Ajax),
  • Локальные источники (строковые массивы в скриптах вашей веб-страницы).

В зависимости от источника, который вы планируете использовать, вы будете создавать экземпляры Ajax.Autocompleter или Autocompleter.Local соответственно. Хотя эти два объекта оснащены специальными опциями, они имеют большой набор функций и обеспечивают единообразное взаимодействие с пользователем.

Есть четыре вещи, которые вы всегда будете передавать этим объектам при их создании —

  • Текстовое поле, которое вы хотите сделать автозаполняемым. Как обычно, вы можете передать само поле или значение его атрибута id =.

  • Контейнер для вариантов автозаполнения, который в конечном итоге будет содержать список параметров <ul> </ li> для выбора. Опять же, передайте элемент напрямую или его id = . Этот элемент чаще всего является простым <div>. </ P> </ li>

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

  • Наконец, варианты. Как всегда, они предоставляются в виде своего рода хэша, и оба объекта автозаполнения могут обойтись без пользовательской опции; Есть подходящие значения по умолчанию для всего.

Текстовое поле, которое вы хотите сделать автозаполняемым. Как обычно, вы можете передать само поле или значение его атрибута id =.

Контейнер для вариантов автозаполнения, который в конечном итоге будет содержать список параметров <ul> </ li> для выбора. Опять же, передайте элемент напрямую или его id = . Этот элемент чаще всего является простым <div>. </ P> </ li>

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

Наконец, варианты. Как всегда, они предоставляются в виде своего рода хэша, и оба объекта автозаполнения могут обойтись без пользовательской опции; Есть подходящие значения по умолчанию для всего.

Чтобы использовать возможности автозаполнения script.aculo.us, вам необходимо загрузить модули controls.js и effect.js вместе с модулем prototype.js. Итак, ваша минимальная загрузка для script.aculo.us будет выглядеть так — 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Создание автозаполнения Ajax

Синтаксис конструкции следующий: 

new Ajax.Autocompleter(element, container, url [ , options ] )

Конструктор для Ajax.Autocompleter принимает четыре параметра:

  • Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

  • Имя элемента или ссылка на элемент <div>, который будет использоваться элементом управления в качестве меню выбора.

  • URL-адрес ресурса на стороне сервера, который будет предоставлять варианты выбора.

  • Обычные варианты хэша.

Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

Имя элемента или ссылка на элемент <div>, который будет использоваться элементом управления в качестве меню выбора.

URL-адрес ресурса на стороне сервера, который будет предоставлять варианты выбора.

Обычные варианты хэша.

Опции

При создании объекта Ajax.Autocompleter вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

ParamName

Имя параметра запроса, содержащего содержимое текстового поля, которое публикуется на сервере. По умолчанию используется имя текстового поля.

2

minChars

Количество символов, которое необходимо ввести до того, как запрос на выбор на стороне сервера может быть запущен. По умолчанию 1.

3

частота

Интервал (в секундах) между внутренними проверками, чтобы определить, следует ли публиковать запрос к серверному ресурсу. По умолчанию 0,4.

4

Индикатор

Идентификатор или ссылка на элемент, который будет отображаться во время выполнения запроса на стороне сервера. Если опущен, элемент не раскрывается.

5

параметры

Текстовая строка, содержащая дополнительные параметры запроса для передачи на серверный ресурс.

6

updateElement

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

7

afterUpdateElement

Функция обратного вызова, запускаемая после выполнения функции updateElement.

8

Лексемы

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

ParamName

Имя параметра запроса, содержащего содержимое текстового поля, которое публикуется на сервере. По умолчанию используется имя текстового поля.

minChars

Количество символов, которое необходимо ввести до того, как запрос на выбор на стороне сервера может быть запущен. По умолчанию 1.

частота

Интервал (в секундах) между внутренними проверками, чтобы определить, следует ли публиковать запрос к серверному ресурсу. По умолчанию 0,4.

Индикатор

Идентификатор или ссылка на элемент, который будет отображаться во время выполнения запроса на стороне сервера. Если опущен, элемент не раскрывается.

параметры

Текстовая строка, содержащая дополнительные параметры запроса для передачи на серверный ресурс.

updateElement

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

afterUpdateElement

Функция обратного вызова, запускаемая после выполнения функции updateElement.

Лексемы

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

пример

Live Demo 

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

Теперь нам нужна сторона сервера для доступа к этой странице и предоставления URL источника данных (serverSideScript.php). Вы сохраните полную логику для отображения предложений в этом скрипте.

Например, мы храним простой текст HTML в serverSideScript.php . Вы можете написать свой сценарий, используя CGI, PHP, Ruby или любой другой сценарий на стороне сервера, чтобы выбрать подходящие предложения и отформатировать их в виде <ul> <li> … </ li> </ ul> и передать их обратно. к программе звонящего. 

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

Это даст следующий результат —

с различными вариантами, обсуждаемыми в приведенной выше таблице.

Создание локального автозаполнения

Создание локального автозаполнения практически идентично созданию автозаполнения Ajax, как мы уже обсуждали в предыдущем разделе.

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

С помощью автозаполнения Ajax мы предоставили URL-адрес ресурса на стороне сервера, который будет выполнять необходимую фильтрацию с учетом пользовательского ввода и возвращать только совпадающие элементы данных. Используя Local Autocompleter, мы вместо этого предоставляем полный список элементов данных в виде массива JavaScript String, а сам элемент управления выполняет операцию фильтрации в своем собственном клиентском коде.

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

new Autocompleter.Local(field, container, dataSource [ , options ] );

Конструктор для Autocompleter.Local принимает четыре параметра —

  • Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

  • Имя элемента или ссылка на элемент <div>, который будет использоваться в качестве меню выбора элементом управления

  • Для третьего параметра вместо URL-адреса, как в случае автозаполнения с помощью сервера, мы предоставляем небольшой массив String, который содержит все возможные значения.

  • Обычные варианты хэша.

Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

Имя элемента или ссылка на элемент <div>, который будет использоваться в качестве меню выбора элементом управления

Для третьего параметра вместо URL-адреса, как в случае автозаполнения с помощью сервера, мы предоставляем небольшой массив String, который содержит все возможные значения.

Обычные варианты хэша.

Опции

При создании объекта Autocompleter.Local вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

Выбор

Количество вариантов отображения. По умолчанию 10.

2

partialSearch

Включает сопоставление в начале слов, встроенных в строки завершения. По умолчанию true.

3

fullSearch

Включает сопоставление в любом месте в строках завершения. По умолчанию false.

4

partialChars

Определяет количество символов, которые должны быть напечатаны перед попыткой частичного совпадения. По умолчанию 2.

5

IgnoreCase

Игнорирует регистр при сопоставлении. По умолчанию true.

Выбор

Количество вариантов отображения. По умолчанию 10.

partialSearch

Включает сопоставление в начале слов, встроенных в строки завершения. По умолчанию true.

fullSearch

Включает сопоставление в любом месте в строках завершения. По умолчанию false.

partialChars

Определяет количество символов, которые должны быть напечатаны перед попыткой частичного совпадения. По умолчанию 2.

IgnoreCase

Игнорирует регистр при сопоставлении. По умолчанию true.

пример

Live Demo 

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

Когда отображается и после ввода символа «а» в текстовое поле, отображаются все параметры соответствия.

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

Это даст следующий результат —

script.aculo.us — Редактирование на месте

Редактирование на месте является одной из отличительных черт приложений Web 2.0.style.

Редактирование на месте подразумевает получение нередактируемого контента, такого как <p>, <h1> или <div>, и предоставление пользователю возможности редактировать его содержимое, просто щелкая его.

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

Затем он синхронизирует редактирование на стороне сервера через Ajax и снова делает элемент не редактируемым.

Чтобы использовать возможности редактирования на месте script.aculo.us, вам необходимо загрузить модули controls.js и effect.js вместе с модулем prototype.js. Итак, ваша минимальная загрузка для script.aculo.us будет выглядеть так — 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Создание текстового редактора на месте

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

new Ajax.InPlaceEditor(element, url [ , options ] )

Конструктор для Ajax.InPlaceEditor принимает три параметра:

  • Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

  • Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

  • Обычные варианты хэша.

Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

Обычные варианты хэша.

Опции

При создании объекта Ajax.InPlaceEditor вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

OK для подтверждения

Логическое значение, указывающее, должна ли отображаться кнопка «ОК» или нет. По умолчанию true.

2

okText

Текст для размещения на кнопку ОК. По умолчанию «хорошо».

3

cancelLink

Логическое значение, указывающее, должна ли отображаться ссылка отмены. По умолчанию true.

4

cancelText

Текст ссылки отмены. По умолчанию «отмена».

5

savingText

Текстовая строка, отображаемая как значение элемента управления во время операции сохранения (запрос, инициированный нажатием кнопки ОК), обрабатывается. По умолчанию «Сохранение».

6

clickToEditText

Текстовая строка, которая появляется как подсказка элемента управления при наведении курсора мыши.

7

строки

Количество строк, отображаемых при активном элементе управления редактированием. Любое число больше 1 вызывает использование элемента текстовой области, а не элемента текстового поля. По умолчанию 1.

8

смещ_по_столбцам

Количество столбцов в активном режиме. Если опущено, ограничение столбца не накладывается.

9

размер

То же, что и cols, но применяется только тогда, когда в строках 1.

10

highlightcolor

Цвет, применяемый к фону текстового элемента при наведении мыши. По умолчанию бледно-желтый.

11

highlightendcolor

Цвет, до которого цвет подсветки исчезает как эффект.

Обратите внимание — в некоторых браузерах поддержка выглядит нечеткой.

12

loadingText

Текст, отображаемый в элементе управления во время операции загрузки. По умолчанию это «Загрузка».

13

loadTextURL

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

14

externalControl

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

15

ajaxOptions

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

OK для подтверждения

Логическое значение, указывающее, должна ли отображаться кнопка «ОК» или нет. По умолчанию true.

okText

Текст для размещения на кнопку ОК. По умолчанию «хорошо».

cancelLink

Логическое значение, указывающее, должна ли отображаться ссылка отмены. По умолчанию true.

cancelText

Текст ссылки отмены. По умолчанию «отмена».

savingText

Текстовая строка, отображаемая как значение элемента управления во время операции сохранения (запрос, инициированный нажатием кнопки ОК), обрабатывается. По умолчанию «Сохранение».

clickToEditText

Текстовая строка, которая появляется как подсказка элемента управления при наведении курсора мыши.

строки

Количество строк, отображаемых при активном элементе управления редактированием. Любое число больше 1 вызывает использование элемента текстовой области, а не элемента текстового поля. По умолчанию 1.

смещ_по_столбцам

Количество столбцов в активном режиме. Если опущено, ограничение столбца не накладывается.

размер

То же, что и cols, но применяется только тогда, когда в строках 1.

highlightcolor

Цвет, применяемый к фону текстового элемента при наведении мыши. По умолчанию бледно-желтый.

highlightendcolor

Цвет, до которого цвет подсветки исчезает как эффект.

Обратите внимание — в некоторых браузерах поддержка выглядит нечеткой.

loadingText

Текст, отображаемый в элементе управления во время операции загрузки. По умолчанию это «Загрузка».

loadTextURL

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

externalControl

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

ajaxOptions

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

Параметры обратного вызова

Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options

Sr.No Описание функции
1

OnComplete

Функция JavaScript, которая вызывается при успешном завершении запроса на сохранение. По умолчанию применяется эффект выделения для редактора.

2

OnFailure

Функция JavaScript, которая вызывается при сбое запроса на сохранение. По умолчанию выдается предупреждение с сообщением об ошибке.

3

Перезвоните

Функция JavaScript, которая вызывается непосредственно перед отправкой запроса на сохранение, чтобы получить строку запроса для отправки в запрос. Функция по умолчанию возвращает строку запроса, приравнивающую параметр запроса «значение» к значению в текстовом элементе управления.

OnComplete

Функция JavaScript, которая вызывается при успешном завершении запроса на сохранение. По умолчанию применяется эффект выделения для редактора.

OnFailure

Функция JavaScript, которая вызывается при сбое запроса на сохранение. По умолчанию выдается предупреждение с сообщением об ошибке.

Перезвоните

Функция JavaScript, которая вызывается непосредственно перед отправкой запроса на сохранение, чтобы получить строку запроса для отправки в запрос. Функция по умолчанию возвращает строку запроса, приравнивающую параметр запроса «значение» к значению в текстовом элементе управления.

CSS Styling и DOM id Опции

Вы также можете использовать одну из следующих опций для управления поведением редактора на месте —

Sr.No Вариант и описание
1

savingClassName

Имя класса CSS, примененное к элементу во время операции сохранения. Этот класс применяется при выполнении запроса к сохраняющему URL-адресу и удаляется при возврате ответа. Значением по умолчанию является «сохранение места редактора».

2

formClassName

Имя класса CSS применяется к форме, созданной, чтобы содержать элемент редактора. По умолчанию «inplaceeditor-form».

3

FormID

Идентификатор, примененный к форме, созданной для содержания элемента редактора.

savingClassName

Имя класса CSS, примененное к элементу во время операции сохранения. Этот класс применяется при выполнении запроса к сохраняющему URL-адресу и удаляется при возврате ответа. Значением по умолчанию является «сохранение места редактора».

formClassName

Имя класса CSS применяется к форме, созданной, чтобы содержать элемент редактора. По умолчанию «inplaceeditor-form».

FormID

Идентификатор, примененный к форме, созданной для содержания элемента редактора.

пример

Live Demo 

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>		
   </body>
</html>

При отображении нажмите и отредактируйте текст. Этот довольно тривиальный PHP-скрипт преобразует значение параметра запроса с ключом «value» в его заглавный эквивалент и записывает результат обратно в ответ.

Вот содержимое скрипта transform.php. 

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

Это даст следующий результат —

Параметры редактора коллекций на месте

Есть еще один объект с именем Ajax.InPlaceCollectionEditor, который поддерживает редактирование на месте и дает вам возможность выбрать значение из указанных параметров.

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

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Конструктор для Ajax.InPlaceCollectionEditor принимает три параметра:

  • Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

  • Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

  • Обычные варианты хэша.

Целевой элемент может быть либо ссылкой на сам элемент, либо идентификатором целевого элемента.

Второй параметр Ajax.InPlaceEditor указывает URL-адрес серверного сценария, с которым связываются после завершения редактирования значения.

Обычные варианты хэша.

Опции

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

Sr.No Вариант и описание
1

OK для подтверждения

Логическое значение, указывающее, должна ли отображаться кнопка «ОК» или нет. По умолчанию true.

2

okText

Текст для размещения на кнопку ОК. По умолчанию «хорошо».

3

cancelLink

Логическое значение, указывающее, должна ли отображаться ссылка отмены. По умолчанию true.

4

cancelText

Текст ссылки отмены. По умолчанию «отмена».

5

savingText

Текстовая строка, отображаемая как значение элемента управления во время операции сохранения (запрос, инициированный нажатием кнопки ОК), обрабатывается. По умолчанию «Сохранение».

6

clickToEditText

Текстовая строка, которая появляется как подсказка элемента управления при наведении курсора мыши.

7

Highlightcolor

Цвет, применяемый к фону текстового элемента при наведении мыши. По умолчанию бледно-желтый.

8

Highlightendcolor

Цвет, до которого цвет подсветки исчезает как эффект.

Обратите внимание — в некоторых браузерах поддержка выглядит нечеткой.

9

Коллекция

Массив элементов, которые должны использоваться для заполнения опций элемента select.

10

loadTextUrl

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

11

externalControl

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

12

ajaxOptions

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

OK для подтверждения

Логическое значение, указывающее, должна ли отображаться кнопка «ОК» или нет. По умолчанию true.

okText

Текст для размещения на кнопку ОК. По умолчанию «хорошо».

cancelLink

Логическое значение, указывающее, должна ли отображаться ссылка отмены. По умолчанию true.

cancelText

Текст ссылки отмены. По умолчанию «отмена».

savingText

Текстовая строка, отображаемая как значение элемента управления во время операции сохранения (запрос, инициированный нажатием кнопки ОК), обрабатывается. По умолчанию «Сохранение».

clickToEditText

Текстовая строка, которая появляется как подсказка элемента управления при наведении курсора мыши.

Highlightcolor

Цвет, применяемый к фону текстового элемента при наведении мыши. По умолчанию бледно-желтый.

Highlightendcolor

Цвет, до которого цвет подсветки исчезает как эффект.

Обратите внимание — в некоторых браузерах поддержка выглядит нечеткой.

Коллекция

Массив элементов, которые должны использоваться для заполнения опций элемента select.

loadTextUrl

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

externalControl

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

ajaxOptions

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

Параметры обратного вызова

Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options —

Sr.No Описание функции
1

OnComplete

Функция JavaScript, которая вызывается при успешном завершении запроса на сохранение. По умолчанию применяется эффект выделения для редактора.

2

OnFailure

Функция JavaScript, которая вызывается при сбое запроса на сохранение. По умолчанию выдается предупреждение с сообщением об ошибке.

OnComplete

Функция JavaScript, которая вызывается при успешном завершении запроса на сохранение. По умолчанию применяется эффект выделения для редактора.

OnFailure

Функция JavaScript, которая вызывается при сбое запроса на сохранение. По умолчанию выдается предупреждение с сообщением об ошибке.

CSS Styling и DOM id Опции

Вы также можете использовать одну из следующих опций для управления поведением редактора на месте:

Sr.No Вариант и описание
1

savingClassName

Имя класса CSS, примененное к элементу во время операции сохранения. Этот класс применяется при выполнении запроса к сохраняющему URL-адресу и удаляется при возврате ответа. Значением по умолчанию является «сохранение места редактора».

2

formClassName

Имя класса CSS применяется к форме, созданной, чтобы содержать элемент редактора. По умолчанию «inplaceeditor-form».

3

FormID

Идентификатор, примененный к форме, созданной для содержания элемента редактора.

savingClassName

Имя класса CSS, примененное к элементу во время операции сохранения. Этот класс применяется при выполнении запроса к сохраняющему URL-адресу и удаляется при возврате ответа. Значением по умолчанию является «сохранение места редактора».

formClassName

Имя класса CSS применяется к форме, созданной, чтобы содержать элемент редактора. По умолчанию «inplaceeditor-form».

FormID

Идентификатор, примененный к форме, созданной для содержания элемента редактора.

пример

Live Demo 

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>
		
      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

Вот содержимое скрипта transform.php. 

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

При отображении щелкните и выберите один из отображаемых параметров. Этот довольно тривиальный скрипт PHP преобразует значение параметра запроса с ключом «значение» в его заглавный эквивалент и записывает результат обратно в ответ.

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

Это даст следующий результат —

52
Share: