> > Mootools Demos - Fx.Slide

Mootools Demos - Fx.Slide

Mootools Demos - Fx.Slide
可讓使用者將內容收合起來
有兩種效果
第一種效果 - 直向收合(Fx.Slide Vertical)
第二種效果 - 橫向收合(Fx.Slide Horizontal)

.照著網站所提供的程式碼去做會發現沒辦法順利執行
 那是因為還需要額外呼叫一個 JavaScript 腳本才行
.如果覺得四個選項太多想減少
 請使用 CSS 語法將其隱藏
 若直接拿掉 slideout 跟 slidein 的連結選項便無法正常執行
.同一元素不可同時使用兩種效果
.可重覆使用同一效果(需改寫內嵌的 JavaScript 參數)

套用到 HTML
1.下載 mootools.js
 上傳到自己的空間
 然後在 <head> 跟 </head> 裡插入以下程式碼

<script type="text/javascript" src="上傳到自己的空間的mootools.js"></script>
<script type='text/javascript'>
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('test');

$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});

$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});


//--horizontal

var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});

$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});

$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});

$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});

$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>

2.在 <head> 跟 </head> 裡插入以下 CSS 程式碼
<style type="text/css">
<!--
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}

#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
-->
</style>

3.在 <body> 跟 </body> 裡插入以下 HTML 程式碼
<h3 class="section">Fx.Slide Vertical</h3>

<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<h3 class="section">Fx.Slide Horizontal</h3>

<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

執行的結果請參見原本的網站 Mootools Demos - Fx.Slide

套用到 Blogger
1.下載 mootools.js
 上傳到自己的空間
2.展開小裝置範本
3.找到 </b:skin> 跟 </head> 並在中間插入步驟4的程式碼
</b:skin>
步驟4程式碼插入處
</head>

4.程式碼
<script src='上傳到自己的空間的 mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('test');

$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});

$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});


//--horizontal

var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});

$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});

$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});

$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});

$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>

5.插入以下 CSS 程式碼
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}

#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}

6.選擇要套用的網頁元素
 以標籤元素做範例
 找到 <b:widget id='Label1' locked='false' title='標籤' type='Label'>
 並在 </b:if> 下方插入以下程式碼
 (請任意選擇一個)
 第一種效果 - 直向收合(Fx.Slide Vertical)
<a href='#' id='slideout'>slideout</a> | <a href='#' id='slidein'>slidein</a> | <a href='#' id='toggle'>toggle</a> | <a href='#' id='hide'>hide</a>

 並將<div class='widget-content'>改成
<div class='widget-content' id='test'>

 第二種效果 - 橫向收合(Fx.Slide Horizontal)
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

 並將<div class='widget-content'>改成
<div class='widget-content' id='test2'>

Mootools Demos - Fx.Slide 在 Blogger 執行的結果請參見
Page Lab: Mootools Demo - Fx.Slide test