script.aculo.us Модули

Опубликовано: 1 Декабря, 2021

script.aculo.us расширяет Prototype JavaScript Framework, добавляя дополнительные функции доступности на вашу веб-страницу. Эти функции разделены на несколько модулей.

1. Модуль эффектов. Модуль эффектов включает пять основных эффектов: непрозрачность, масштаб, перемещение по, выделению и параллельность. Комбинация этих основных эффектов позволяет получить более 16 дополнительных эффектов, например: effect.Appear, effect.Toggle и т. Д.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < script type = "text/javascript"
        src = "prototype.js" >
    </ script >
     
    < script type = "text/javascript"
        src = "scriptaculous.js?load = effects" >
    </ script >
     
    < script type = "text/javascript" >
        function ShowElement(element) {
            new Effect.Opacity(element,
            { duration: 1, from: 0, to: 1.0 });
        }
 
        function HideElement(element) {
            new Effect.Opacity(element,
            { duration: 1, from: 1.0, to: 0 });
        }
    </ script >
 </ head >
 
< body >
    < div onclick = "ShowElement('element')" >
        < Button >Show Content</ Button >
    </ div >
    < br />
 
    < div onclick = "HideElement('element')" >
        < Button >Hide Content</ Button >
    </ div >
    < br />
    < img id = "element" src = "./gfg.png" >
 </ body >
 
</ html > 

Выход:

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

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < script type = "text/javascript"
        src = "prototype.js" >
    </ script >
     
    < script type = "text/javascript"
        src = "scriptaculous.js?load=effects,dragdrop" >
    </ script >
     
    < script type = "text/javascript" >
        var dragables = ['element'];
        window.onload = function () {
            dragables.each(function (item)
            { new Draggable(item, {}); });
        }
    </ script >
 </ head >
 
< body >
    < img id = "element" src = "./gfg.png" >
 </ body >
 
</ html > 

Выход:

3. Ползунки. Ползунок - это своего рода небольшая дорожка, по которой можно перемещать ручку. Он переводится в числовое значение. С script.aculo.us вы можете создавать такие ползунки с большим контролем.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < script type = "text/javascript"
        src = "prototype.js" >
    </ script >
     
    < script type = "text/javascript"
        src = "scriptaculous.js?load = slider" >
    </ script >
     
    < script >
        window.onload = function () {
            new Control.Slider('handle', 'track', {
                range: $R(1, 100),
                values: [1, 10, 20, 30, 40,
                    50, 60, 70, 80, 90, 100],
                sliderValue: 1,
                onSlide: function (value) {
                    $('sliderValue').innerHTML
                        = 'Slider Position: ' + value;
                }
            });
        }
    </ script >
 
    < style >
        .track {
            background-color: rgb(0, 0, 0);
            position: relative;
            height: 10px;
            width: 200px;
            cursor: pointer;
        }
 
        .handle {
            background-color: #13e421;
            height: 20px;
            width: 4.25px;
            top: -4.25px;
            cursor: move;
        }
    </ style >
 </ head >
 
< body >
    < div id = "track" class = "track " >
        < div id = "handle" class = "handle"
            style = "width: 10px;" >
        </ div >
    </ div >
 
    < p id = "sliderValue" ></ p >
 </ body >
 
</ html > 

Выход:

4. Автозаполнение: Автозаполнение позволяет локальным и серверным автозаполнением текстовых полей ввода. Это делает автозаполнение очень простым.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < script type = "text/javascript"
        src = "prototype.js" >
    </ script >
     
    < script type = "text/javascript"
        src = "scriptaculous.js?load = effects,controls" >
    </ script >
     
    < script type = "text/javascript" >
        window.onload = function () {
            new Autocompleter.Local(
                'searchBox',
                'Result',
                ['effect', 'drag', 'drop',
                'auto', 'complete',
                'slider', 'sound'],
            );
        }
    </ script >
 </ head >
 
< body >
    < div >
        < label >Search :</ label >
        < input type = "text" id = "searchBox" />
        < div id = "Result" ></ div >
    </ div >
 </ body >
 
</ html > 

Выход:

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

6. Builder: Builder позволяет динамически создавать элементы DOM. Этот инструмент упрощает создание модели DOM.

7. Звук: этот модуль был впервые представлен в версии 1.7.1 скрипта. Он позволяет легко воспроизводить звуки, ставить их в очередь, использовать несколько дорожек и т. Д. <Это помогает легко управлять звуковыми дорожками.

Technical Scripter JavaScript Picked

script.aculo.us Модули

HTML

HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ