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

2017年9月9日 星期六

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

 


 

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">



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






2017年9月2日 星期六

jQuery UI Dialog Box 互動的對話框





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
});



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


jQuery UI 的 Dialog Box

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


這是第二個div的內容。
ID 是 #diadiv03A。
寬度是    185px。

<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都呈現背景色(淡黃)。








輕輕走過,靜靜聽過,慢慢想過。安沈中有一種力量。