Zdzislaw Beksinski

Zdzislaw Beksinski - Official web site

Mootools Demos - Tips

Mootools Demos - Tips
移過圖片與連結浮現提示說明的效果
和ㄧ般的提示說明相比之下精緻許多

mootools.js 是 Mootools Demos 的必備通用檔案
 請先下載並上傳到自己的空間
.不可同時使用兩種效果
.可重覆使用同一效果

套用到 HTML 與 Blogger
(方法一樣 不需做個別調整)
1.下載 mootools.js
 上傳到自己的空間
 然後在 <head> 跟 </head> 裡插入以下程式碼
 ( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到自己的空間的 mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});

/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
});
</script>
</b:skin>
套用到 Blogger 的程式碼插入處
</head>

2.請先下載 bubble.png
 上傳到自己的空間之後
 然後在 <head> 跟 </head> 裡插入以下 CSS 程式碼
 若要更改 .tool 樣式的寬度
 必須連同圖片一起修改
<style type="text/css">
<!--
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(上傳到自己的空間的 bubble.png) top left;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(上傳到自己的空間的 bubble.png) bottom right;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}
-->
</style>

3.選擇所要呈現效果的程式碼
 Tips 1 圖片說明 - 圖片式直接浮現
<img src="圖片網址" alt="替代文字" class="Tips1" title="提示說明標題 :: 提示說明" />

 Tips 2 圖片說明 - 圖片式淡入淡出浮現
<img src="圖片網址" alt="替代文字" class="Tips2" title="提示說明標題 :: 提示說明" />

 Tips 3 連結說明 - 圖片式直接浮現
<a href="連結網址" onclick="return false;" class="Tips3" title="提示說明標題 :: 提示說明">連結名稱</a>

 Tips 4 連結說明 - 色塊式直接浮現
<a href="連結網址" onclick="return false;" class="Tips4" title="提示說明標題 :: 提示說明">連結名稱</a>

Mootools Demos - Tips 在 Blogger 執行的結果請參見 Page Lab : Tips test
<!--
雖然替代文字與提示說明效果相近
但卻是不同的屬性

alt 属性(替代文字)

主要是圖片尚未顯示或是無法顯示時使用的文字替代形式
所以圖片無效時會出現
有的人誤認此屬性為額外說明
所以也將其設置在文字連結上或是當做圖片的補充說明之用
不過除了 IE 瀏覽器和早期的 Netscape 4(windows版本) 之外都不會出現

title 屬性(提示說明)

為圖片或文字連結提供補充說明的訊息
-->

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