李明哲老師多媒體互動寫作教學: 9月 2017

Hint.css 2.0

簡單　直接　快速｜讓tooltips 的功能發揮的很上手

一、純CSS語法套件。
二、純文字式的tooltips。
三、只用<span>來框住編輯元素即可。
四、可以設定直接呈現的功能。

一、快速上手實作

設置CSS：

/* 請放置<head></head>之間或<body>之後 * /

<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmc201708/hint.css-2.5.0/hint.css">

使用方法：

在任何編輯物件上，如文字、圖像、div、iframe…等，都可以使用。
文字（inline物件），img、iframe等inline-block類編輯物件，請外層加上<span>xxx< /span> 。例如 <span>這是範例文字</span>。
在<span>裡加人會產生作用的 class，以及aria-label="xxx"，xxx即是要跑出的文字。
其他塊狀編輯物件，div、p、H 等，請一定要設定寬度(px)，再於物件外層加上<span>xxx</span>，於<span>中加入作用class以及aria-label = "xxx"。否則會以內文長度為寬度。★ hint.css會把作用物件 inline-block 化 ★。
表格，請在TD內容前後加<span style="width: 100%;">td內容xxx</span> ，亦即要在span裡面加入 style="width: 100%；"，再加入作用的class，這樣「整個格子」才會是作用範圍。
<span>裡面如有設style，例如字體，會作用於出現的樣貌。

快速示範一：

這是有 Hint.css 作用的文字

〔語法〕：

<span
style="font-weight: bold; text-decoration: underline; font-style: italic;"
class="hint--right hint--error" aria-label="Hint.css的效果！">
這是有 Hint.css作用的文字
</span>

快速示範二：

這是一個DIV。請要設定寬度，才能有效作用。
區塊型編輯物件，請要設定寬度，否則會被inlin-block化，
這樣寬度就會被CSS語法改變。 / 滑鼠here /

〔語法〕：

<span aria-label="區塊型編輯物件" class="hint--left hint--success">
<div style="border: 1px solid gray; width: 349px; line-height: 2; font-family: '微軟正黑體';">
這是一個DIV。請要設定寬度，才能有效作用。<br>
區塊型編輯物件，請要設定寬度，否則會被inlin-block化，<br>
這樣寬度就會被CSS語法改變。 / 滑鼠here /<br>
</div>
</span><br>

二、功能作用

出現位置：

上左	上	上右
左		右
下左	下	bottom-right

位置語法：

上左： class=" hint--top-left "
上： class=" hint--top "
上右： class=" hint--top-right "
左： class=" hint--left "
右： class=" hint--right "
下左： class=" hint--bottom-left "
下： class=" hint--bottom "
下右： class=" hint--bottom-right "

內容語法：

aria-label="裡面可以填寫內容"

顏色語法（請加入 class裡面）：

紅色： hint--error
藍色： hint--info
橘色： hint--warning
綠色： hint--success

位置、顏色共現範例： class="hint--top hint--warning"

〔語法〕：

<span class="hint--top hint--warning" aria-label="拉拉山的水蜜桃"><img style="width: 180px; height: 120px;" alt="" src="https://farm5.staticflickr.com/4287/34757133373_159d1dcbd6_o.jpg"></span>

再強調一次：
一、文字、圖像( img )、以及影音( iframe )等inline以及inline-block的編輯物件，請外層加入<span>才有作用。
二、其他block的編輯物件，div、p 等，如要固定，請一定要設定寬度，並在其物件外層加入<span>，並加入作用class以及 aria-label，即可。
三、TD的使用注意，在td內文外層加上<span>，span寬度設100%，請看語法：

<td style="width: 180px;"><span style="width: 100%;"
class="hint--top-left hint--error" aria-label="上左的效果！">上左</span><br>
</td>

三、進階使用

請將下列代碼加入到class裡面，可以需要加上多個，中間有空白鍵即可：

hint--always                                //直接呈現

hint--rounded                             //圓角框

hint--no-animate                        //無動態效果

hint--small                               //小型框

hint--medium                           //中型框

hint--large                               // 大型框

說明：把所有想要的功能代碼，都加入到class裡面去，請移入。例：
class="hint--top hint--info hint--rounded hint--medium hint--no-animate"
aria-label="共有五種交果共同存在"

四、需求改造

如果你想要先直接呈現，然後滑鼠移入後 tooltips反而消失，這樣的功能效果，要如何來處置呢？

語法：

<span
onmouseover="$(this).removeClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
onmouseout="$(this).addClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
class="dispinbl hint--bottom-left hint--info hint--always hint--rounded hint--large"
aria-label="請滑鼠移到到DIV，直接呈現的Hint.css就會消失">

<div style="border: 1px solid gray; width: 576px; line-height: 2;">如果你想要
先直接呈現，然後滑鼠移入後
tooltips反而消失，這樣的功能效果，要如何來處置呢？</div>

</span>

保持 inline-block 狀態的CSS：

<style>
.dispinbl {
display: inline-block;
}
</style>

構思說明：

一、在span裡面加入，onmouseover 以及 onmousout 這二個互動語法。移入時把之前設好的 hint.css 功能代碼class 抽掉，於是之前設好的效果就不見了。滑鼠移出時，再「恢復」之前的class設定，於是hint.css的效果又出來了。
二、＊注意＊span裡面要記得加入inline-block功能的class。這樣一旦啟動onmouseover時，hint.css 的class被抽掉時，span還能保持inline-block的狀態。版面才不會變動。

教學影音：

語法：

<span class="hint--left hint--error" aria-label="Hint.css的效果！">
<iframe
src="https://www.youtube.com/embed/va9eQWi-A7s?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</span>

說明：

同樣的，在video iframe的語法外層加入有hint.css 效果的<span> 。

jQuery UI Dialog Box
互動的對話框｜自動跳出｜按一下跳出

各式各樣的媒材，文字、照片和影音，都可放進對話框

互動的對話框，是最常見的能動文本寫作技巧之一。
數位文本的能動特色，使得在對文本寫作的構思上，產生了許多傳統靜態線性文本所沒有的「文本呈現形式」。只有掌握了這些新的形式的寫作技巧，才能讓數位文本在意義表現上真正凸顯出與傳統文本的不同特色。
對作者而言，談數位文本，一個先決觀念是：技術先於意義！

自動跳出 dialog box

一、請將下列jquery程式碼及CSS複製到<head> </head>之間或<body>之後：

<script src="https://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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

二、要跳出來的內容設置於DIV內，請加上ID，下例：

jQuery UI 的 Dialog Box

基本上是Dialog Box這種互動模態
的「原型」，
如果你有了使用的上手經驗，
如果你對運作流程有一定理解，
就可以「思考」出更不同的表現形式。

〔DIV語法〕：

<div style="display: none;">

<div id="uidia20170901a" style="width: 424px;">
<img style="width: 180px; height: 165px;"
alt=""
src="圖像網址"
align="left" hspace="5"><span
style="text-decoration: underline; font-weight: bold;">jQuery UI 的
Dialog Box</span><br>
<br>
基本上是Dialog Box這種互動模態<br>
的「原型」，<br>
如果你有了使用的上手經驗，<br>
如果你對運作流程有一定理解，<br>
就可以「思考」出更不同的表現形式。<br>
</div>

</div>

〔注意事項〕：
一、請留意所設置DIV的寬度，此例為424px。這樣DIV的版面才能至少和dialog box相同。但最好多加28px。
二、因為是要跳出來的內容，所以請在文件的最後進行編輯寫作，才不會影響正常版面布局。
三、最後再於其外層加上一個<div style="display: none;">xxx</div>，使其消失於版面（但資料還在）。
四、按此看上例語法之示範。

【進階補充】電腦會把內文DIV，即灰色部分，以inline-block的結構抓到dialog box裡去。所以對內文DIV的變化，一般而言都會被保留下來。

三、請寫入下列dialog box驅動程式於<head></head>之間或<body>之後：

<script>
$( function() {
    $( "#uidia20170901a" ).dialog(
{
width: 424                                    //設定對話框寬度
});
});
</script>

〔說明〕：
一、紅字部分就是上面範例DIV的 ID。請一定要加入 # 字號。
二、要為dialog box 設置寬度，至少要和上範例的寬度相同。或稍微加大一點也可以，例430px。跟據我的經驗值，多加上28px，會很不錯。
這樣網頁一打開，dialog box就會跳出來，而內容正是上範例的DIV。
三、如果值設定的太小，會有捲軸跑出來。如果不想有，就加大寬度設定，建議值：請多加28px。

四、如果想要改變跳出來時的位置，請加人下列參數：

<script>
$( function() {
$( "#uidia20170901a" ).dialog(
{
width: 424,
position: { my: "center-50% center-80%", at: "center center", of: window }    //設定出現位置
});
});
</script>

按我看位置更動的效果

〔說明〕：
一、預設值是：position: { my: "center center", at: "center center", of: window }
二、可翻譯為my 我的跳出對話框的中間center（左右）、中間center（上下），對準於 at ，整個視窗（window）的中間center（左右）中間center（上下）。
三、我們更動為：position: { my: "center-50% center-80%", at: "center center", of: window }
四、xx%是以dialog box的長寬來當作計算標準。可以是正、負，例center+50% center-30%。

按一下就跳出 Dialog Box

一、請copy下列 jquery 程式碼至<head></head>之間或<body>之後，如上例已有使用，就可省略：

<script src="https://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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

二、用DIV做出要跳出的內容，如同上例，要設ID以及注意寬度數據：

這是div的內容。
ID 是 #diadiv02B。
寬度是 185px。

〔注意事項〕：
同樣的，
一、因為是要跳出來的內容，所以請在文件的最後進行編輯寫作，才不會影響正常版面布局。
二、最後再於其外層加上一個<div style="display: none;">xxx</div>，使其消失於版面（但資料還在，讓程式來抓資料）。

三、在要按下去的媒材內設置驅動程式：

onclick=" $('#diadiv02B').dialog({width: 195}); "

互動範例文字，請按我

〔上例語法〕：
<span onclick="$('#diadiv02B').dialog({width: 195});"
style="text-decoration: underline;">互動範例文字，請按我</span>

〔說明〕：
一、寬度設定為195px。我們之前提過，寬度至少要和DIV同寬，或著為了版面美觀，可以稍微多加一點。建議值：28px。
二、onclick可以放在任可編輯元素中，span, div, img, iframe等等。請看教學video。

四、想要設置對話框的跳出位置：

onclick=" $('#diadiv03A').dialog({width: 195, position: { my: 'center+100% center-100%', at: 'center center', of: window }}); "

Dialog Box互動範例，在DIV按下，請按我。

〔說明〕：
語法結構與「自動跳出」的前範例同。只是裡面的引號從 " （雙引號）改成 ' （單引號）。請看教學影音詳解。

進階參數補充

〔class〕： //設定dialog box布局的class

$( ".selector" ).dialog({
classes: {
    "ui-dialog": "highlight"
}
});

Default:
{
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all",
}

〔show & hide〕：   //出現、消失的動態方式

$( ".selector" ).dialog({
show: { effect: "blind", duration: 800 }
});

$( ".selector" ).dialog({
hide: { effect: "explode", duration: 1000 }
});

〔modal〕：     //產生遮罩

Default: false

$( ".selector" ).dialog({
modal: true
});

〔多參數整合語法範例〕：

<script>
function diydiaboxa01() {

$( function() {
    $( "#diymulti01" ).dialog(
{
width: 588,
show: { effect: "blind", duration: 800 },
classes: {
"ui-dialog": "ui-corner-all diydacl02"},
   modal: true
});
});

};
</script>

click 物件，請按我！看影音：

onclick=" diydiaboxa01(); "

〔使用經驗值）：
一、如果想變化「內文區」，即紅色框線內的變化，必須在id下參數。此例要設 #diymulti01 { }。
二、內文區有預設 padding 值，左右大約各有14px，所以共28px。因之，在設定dialog box 寬度時，宜在DIV寬度值再多加上28px 值，上文已提及。此例，560+28=588。
三、classes: { "ui-dialog": "ui-corner-all diydacl02" }, 所控制的，是「整個」dialog box的變化。例如 .diydacl02 {} 有設背景色，所以整個dialog box都呈現背景色（淡黃）。

李明哲老師多媒體互動寫作教學

2017年9月9日星期六

Hint.css 2.0：快速使用的純文字 tooltips

2017年9月2日星期六

jQuery UI Dialog Box 互動的對話框

2017年9月9日 星期六

Hint.css 2.0：快速使用的純文字 tooltips

2017年9月2日 星期六

jQuery UI Dialog Box 互動的對話框

2017年9月9日星期六

2017年9月2日星期六