Mootools 1.2教程(23)——滑动效果（Slide）（4）

代码示例

上面所讲的这些基本涵盖了全部基本用法。下面的示例将使用我们上面学到的大部分知识，显示一些不同的滑动元素，并提供一些div作为指示器，以便你可以清楚地看到这些事件。

首先，创建HTML文件。

参考代码： 

<div id="start" class="ind">Start</div> 
<div id="cancel" class="ind">Cancel</div> 
<div id="complete" class="ind">Complete</div> 
<br /><br /> 

<button id="openA">open A</button> 
<button id="closeA">close A</button> 
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires.  This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div> 

<button id="openB">open B</button> 
<button id="closeB">close B</button> 
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events.  This slide is set up with the option "link: 'chain'"</div> 

<button id="openC">toggle C</button> 
<div id="slideC" class="slide">Here is some content - C</div> 

<button id="openD">toggle D</button> 
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events.  This was done with the .slide shortcut.</div> 

<button id="openE">toggle E</button> 

<div id="slide_wrap"> 
<div id="slideE" class="slide">Here is some content - E</div> 
</div>

接下来是CSS文件。我们让它尽量保持简单。

参考代码： 

.ind { 
    width: 200px; 
    padding: 10px; 
    background-color: #87AEE1; 
    font-weight: bold; 
    border-bottom: 1px solid white; 
} 

.slide { 
    margin: 20px 0;  
    padding: 10px; 
    width: 200px; 
    background-color: #DAF7B4; 
} 

#slide_wrap { 
    padding: 30px; 
    background-color: #D47000;