script.aculo.us 模块

script.aculo.us通过向您的网页添加更多辅助功能来扩展 Prototype JavaScript 框架。这些功能分为几个模块。

1. 特效模块：特效模块自带五个核心特效：不透明度、缩放、移动、高光、平行。通过这些核心效果的组合，还有超过 16 种附加效果，例如：effect.Appear、effect.Toggle 等。

例子：

HTML

  

    
    
      
    
    
      
    
        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 });
        }
    

  

    
        Show Content
    
    
  
    
        Hide Content
    
    
    

  

输出：

2.拖放：它可以用于使任何元素可拖动，将其变成放置区，甚至可以使整个系列的元素可排序，以便您可以通过拖放重新排列它们。

例子：

HTML

  

    
    
      
    
    
      
    
        var dragables = ['element'];
        window.onload = function () {
            dragables.each(function (item) 
            { new Draggable(item, {}); });
        }            
    

  

    

  

输出：

3.滑块：滑块是一种小轨道，您可以沿着它滑动手柄。它转化为一个数值。使用 script.aculo.us，您可以创建具有大量控制的滑块。

例子：

HTML

  

    
    
      
    
    
      
    
        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;
                }
            });
        }
    
  
    
        .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;
        }
    

  

    
        
        
    
  
    

  

输出：

4. 自动完成：自动完成允许本地和服务器驱动的自动完成文本输入字段。它使自动完成变得非常容易。

例子：

HTML

  

    
    
      
    
    
      
    
        window.onload = function () {
            new Autocompleter.Local(
                'searchBox',
                'Result',
                ['effect', 'drag', 'drop', 
                'auto', 'complete', 
                'slider', 'sound'],
            );
        }
    

  

    
        Search :
        
        
    

  

输出：

5.就地编辑：它允许使数据库中的任何文本或项目集合，只需单击即可就地编辑。您可以使用此模块将静态内容转换为可编辑的形式。

6. Builder： Builder允许动态创建DOM元素。这个工具简化了 DOM 创建。

7、声音：该模块在脚本1.7.1版本中首次引入。它可以让您轻松播放声音、将它们排队、使用多个音轨等等。< 它有助于轻松管理音轨。