*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2017年8月23日 星期三

tooltipster 4.0版。超好用的tooltips模組。






tooltips互動 技法之一
快速補充說明
|tooltipster 互動技法
|馬上對不清楚的地方進行說明

tooltipster這一互動模組,可以產生tooltips的互動模態。更重要的是,它 有各式各樣的呈現變化,同時可 以承載多媒體媒材,也可以是超連結互動內容。在 使用上,簡單,可以行使在各種物件上。在調整上,也易於操作。


呈現樣態共有六種模式:


tooltipster的互動效果,可以作用於各式媒材,或編輯元素(elements),例如img、span、div、table、td、 iframe等等。操作方法便利。



設置方法



一、請在<head>xxx< /head>之間(建議)或<body>之後,置入下列 jquery & CSS程式碼:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css">



二、請在<head>xxx< /head>之間或<body>之後,置入一列驅動程式碼(預設款):

<script>
$(document).ready(function() {
$('.tooltipster').tooltipster();
});
</script>


三、為編輯元素設置互動,以span為例:


這是用span包圍起來的文字。


語法:
<span style="text-decoration: underline;" title="這是基本預設款式" class="tooltipster">這是用span包圍起 來的文字。</span>

說明:
1. 只要在span裡面,加入有啟動tooltipster功能的 class,此例為tooltipster。再於 title 裡面加入文字;那文字就是會跑出來的文字。
2. 基本款,其呈現位置會視狀況自行調整。




設置變化款式



一、同前例,如已設,則省略。

二、設置各種款項的驅動程式,< head>xx<head>之間或<body>之後,此例為筆者設定第一款式:

<script>
$(document).ready(function() {
$('.tps20170822a').tooltipster({
side:['left'],                               //出現的位置,有 left, right, top, bottom 這四選項。
animation: 'fall',                        //出現動作模式,有 'fade','grow','swing','slide','fall' 這五種選項。
theme: 'tooltipster-punk',          //設定的款式,有五種,請看下方說明。
functionPosition: function(instance, helper, position){     //可設定出現的位移位置。
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


三、為元素設定互動,以圖片為例:



語法:
<img style="width: 240px; height: 160px;" title="第一變化款式樣態" class="tps20170822a" alt="" src="https://c1.staticflickr.com/3/2942/34049661985_07e951a0de_b.jpg">

說明:
可設定的款式共有五款,分別為:tooltipster-light,  tooltipster-borderless,  tooltipster-punk,  tooltipster-noir,  tooltipster-shadow  。


四、其他筆者所設定樣態,第二款式noir:

請copy驅動程式碼,放到<head> xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822b').tooltipster({
side:['top'],
animation: 'swing',
theme: 'tooltipster-noir',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


這是DIV。請移到這樣 來看tooltipster效果。

語法:
<div title="筆者自設第二款式效果" class="divexa20170822a tps20170822b">這是DIV。請移到這樣來看 tooltipster效果。</div>





可超連結款式


請copy驅動程式碼,放到<head> xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822d').tooltipster({
side:['top'],
animation: 'slide',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
contentAsHTML: true,      //這二行,啟動title的內文可是超連結文字的功能
theme: 'tooltipster-shadow',
functionPosition: function(instance, helper, position){   //此例設定了位移,向左位移90px
position.coord.top += 0;
position.coord.left += 90;

return position;
}
});
});
</script>




這是表格。
也可設定在格子TD。

夏日。
陽明山。
綠色。



語法:
<table style="text-align: left; width: 100%;"
title="&lt;a href='http://lmcsilver.blogspot.tw/' target='_blank'&gt;可超連結影像blog&lt;/a&gt;,同
時位移的樣態。"
class="tps20170822d" border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/5/4227/34898664156_5eecb5299a_b.jpg"><br>
</td>
<td style="vertical-align: top; text-align: right;">這是表格。<br>
<br>
夏日。<br>
陽明山。<br>
<br>
綠色。<br>
<br>
</td>
</tr>
</tbody>
</table>

說明:
有超連結的內容設定較為複雜一點點,還請看下面的影音教學。


影音說明範例,將 " 符號都改為 ' 這符號:
<a href=' http://lmcsilver.blogspot.tw/ ' target='_blank'>可超連結影像blog</a>,同
時位移的樣態。






圖文整合款式
 ★注意:使用data-tooltip-content 取代上面的 title

設置思路:
  1. 請設置一個小型DIV,把圖文以及影音,都放在DIV內。最後tooltip出現的就是這個DIV。
  2. 在這DIV的前後加上有id的span,<span id="idname">XXX</span>。因為這個模組是如此要求的。
  3. 置入驅動程式碼。
  4. 在設定的互動的媒材,這次要用data-tooltip-content="#idname",而不是上面所用的 title="xxx"。
  5. 最後,使用display:none; 使得先寫好的DIV,消失於版面上。

一、小型DIV,加上 span,給span設立 id  ,範例。DIV裡面可以加入任何元素以及互動、超連結。

  師大夜市
  總是人潮如海,
  讓人懷念的小吃,很多。

語法:
<span id="tpcontenta01">
<div style="width: 258px;"><img style="width: 92px; height: 61px;" alt="" src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg" align="left">&nbsp; <span style="font-weight: bold;">師大夜市</span><br>&nbsp; 總是人潮如海,<br>&nbsp; 讓人懷念的小吃,很多。<br></div>
</span>

二、設置驅動程式碼, <head>xxx</head>之間或<body>之後:

<script>
$(document).ready(function() {
$('.tps20170822e').tooltipster({
side:['top'],
animation: 'fall',
theme: 'tooltipster-light',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
functionPosition: function(instance, helper, position){   //設定向右偏移了90px
position.coord.top += 0;
position.coord.left += 90;

return position;
}
});
});
</script>


三、為媒材設立互動機 制,注意,使用 data-tooltip-content  ,而不是 title :


晚上,散步的師大夜市, 一樣的味道,不一樣的嘈吵。


語法:

<span style="text-decoration: underline; font-weight: bold; font-style: italic;" data-tooltip-content="#tpcontenta01" class="tps20170822e">散步的師大夜市</span>


注意技巧:
data-tooltip-content="#xxx" ,那個「 # 」字符號,即id的符號,一定要加進去。


四、把第一步聚所設置的 小DIV,在版面上藏起來。

在小DIV(包含span)外層再加上一個DIV,然後設立 style="display: non;" 使得加上的外層DIV在版面上消失。例如:

<div style="display: none;">
<span id="tpcontenta01">
<div style="width: 258px;">
內容
</div>
</span>
</div>


如果圖文整合款式,有做了很多個,都可以把所做的小DIV,一起藏在這個要消失的DIV裡面。



使用click方式
 ★你可以使用click來取代hover,例如純影音的內 容時

構思方式:
  1. 設置方式和上例,圖文整合款示,相同。設立一個小DIV,再外加上有id 的span 。
  2. 驅動程式碼的內容設定,有一個增加功能,啟動Click,請看範例。
  3. 使用click,而不是如之前的hover,來啟動tooltips。

一、驅動程式碼:

<script>
$(document).ready(function() {
$('.tps20170822f').tooltipster({
side:['right'],
animation: 'swing',
theme: 'tooltipster-noir',
interactive: true,              //這一行,啟動滑鼠可上移到內容並click的功能。
trigger: 'click',              //這一行,將以click來啟動功能。
functionPosition: function(instance, helper, position){  
position.coord.top += 0;
position.coord.left += 0;

return position;
}
});
});
</script>


二、範例,請按圖片(這次是click,不是hover):


  臉色!
  諸佛也有臉色嗎?
 
  俯看世間的眼,
  是一種深沈的人性。
  ← click image !!


語法:

<img style="width: 180px; height: 120px;" data-tooltip-content="#show02a" class="tps20170822f" alt="" src="https://farm1.staticflickr.com/717/31964606043_17ca856b39_o.jpg" align="left">











海豚的跳躍。
使用light模式,grow,
在右邊呈現。圖加文。



  師大夜市
  總是人潮如海,
  讓人懷念的小吃,很多。





沒有留言:

張貼留言