2015年6月12日 星期五

快速補充資訊的tooltips（二）：圖文格式



Tooltips這種模式的互動機制，在於速迅的為某一文本媒材增加補充「小額量的」訊息。
這次使用的Tooltipster模組，可以快速的形成「圖、文式」的補充資料。作法很簡單。



黑格爾的《小邏輯》開始讀出味道之後，居然是一種苦讀的心情在催促著自己，彷 若重回高三要拼聯考的時光。是什麼力量呢？一種「理性」思維的動 力，燒起那團團的熱情之火。很難想像，那麼嚴格的邏輯的推論之文，倒是一字一字地鼓風起火焰之燃。這是黑格爾的力道。一種用理性撼動人的力道。《小邏 輯》是談「本體論」的「邏輯」。邏輯被他談得是一種具體性的生命過程之邏輯。




jQuery 程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>

<script>
$(document).ready(function() {
$('#id061201').tooltipster({
content: $('<span><img style="width: 192px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Zkt8ndff6A-3c_paUCltv39pPTPbMKKI8hKfej3XwQvsLvQsQnEriEGO_vlYZPxdM0L2Wo2QzfC-ShZBhgjYKNTYKz733BxOVm1McdH1j-dvocg3enE7od0SuRccsi_MXP430gvFaJg/w278-h302-no/" /> <br><strong>黑格爾及其 《小邏輯》一書。</strong></span>'),
position: 'left',
offsetX:0 ,
offsetY: 30
});
});
</script>

語法說明：
一、要被滑入的物件，記得要設id。綠色字體者。
二、請寫入圖像網址、大小以及圖說。紅色字體者。
三、設定tooltips出現的位置以及位移的量（正、負數字）。藍色字體者。
四、位置有八種：right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。





影音教學：






更 多tooltips的教學內容：

一、快速補充資訊的tooltips（一）：通用格式 ，clikc here。
二、小額資訊量的快速互動補充：純CSS互動範例，click here。
三、超快速、好用的補充說明互動法：Hint.css Tooltips，click here。




沒有留言:

2015年6月6日 星期六

快速補充資訊的tooltips（一）：通用格式



互動的功能之一，在於快速補充資訊。tooltips這種功能，是常用的技法。學會使用這一互動模組， 可以有多種的變化形式來處理資訊補充的方式。這次是使用Tooltipster這 一互動模組。




這是DIV裡面的內容，可以是文 字、 圖像、 影音和所有html的格式資訊。
這是圖像的tooltips說明。
 這是表格TD裡面的資訊。表格的格子內容也可 以使用 tooltips。
表格文字居中。



通用式範例一的快速 語法表：
DIV
 <div  class="tooltipsa1" title="這是通用式的tooltip說明。"  ...> xxx</div>
圖像
 <img  class="tooltipsa1" title="可以重覆使用在很多地方。"  .../>
表格格子
 <td  class="tooltipsa1" title="而且呈現的格式都相同。"  ...> xxx</td>
表格本身
 <tabel class="tooltipsa1" title="這個表格本身的說明。"  ...> xxx</table>
youtube影音
 <iframe class="tooltipsa1" title="youtube影音，即iframe，也可以用。"  ...> </table>



教學影音：




共用的必要程 式碼，請置於<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>




通用範例一的CSS以及 jQuery，請放置於<body>之後：
<style>
/* 創製自己的class，取名為 "my-theme01" */
.my-theme01 {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: white;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme01 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa1').tooltipster(
{
position: 'top',
theme: 'my-theme01'
});
});
</script>

使用說明：
一、可以調整tooltips的出現位置，即position:，改藍色字體處，共有right, left, top, top-right, top-left, bottom, bottom-right, bottom-left，共八個位置。
通用範例二的CSS以及 jQuery，請放置於<body>之後：
<style>
/* 創製自己的class，取名為 "my-theme02" */
.my-theme02 {
border-radius: 5px;
border: 2px solid gray;
background: #93FF93;
color: red;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme02 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa2').tooltipster(
{
position: 'left',
theme: 'my-theme02'
});
});
</script>








2 則留言:

2015年6月1日 星期一

快 速簡單又有變化： 標題內文式互動開合



快 速簡單又有變化：
content slider / 互動式文字列表／摘要內文

這次的模組使用「表 格」來設計，在使用操作上更為簡單。一個更為便利的使用特色在於：可以用來處理互 動文字列表的需求，也可以用來表現互動摘要 ／內文式的互動寫作呈現。
使用表格！

可以快速、直覺以
數位文本寫作思維
來對文本進行寫件布局。


這是標題／摘要（一）   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是標題／摘要（二）   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
2017出版。本書更深刻地探討數位文本的文本理論。
購買：五南書局



jQuery的互動程式組，請放置於<haed></head>之間或<body>之後：

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});

</script>

說明：
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向，可設 up / down / left / right ，四選一。
三、褐色字體者，為滑動速度，1000是一秒。



CSS的語法，請放置於<haed></head>之間或<body>之後：

<style>
/* 標題列的TD之CSS，請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}

/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}

/* 內文列的TD之CSS，請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}

/* 讓內文列消失之CSS，請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>



教學影音：




沒有留言: