Tool Pages

Dialog effects 提示視窗

對話視窗
一般寫文章時會將所有內容攤在陽光下, 一覽無遺. 這種直線式的文章對於閱讀者很方便; 寫作者更容易操作. 當需要對內文做註解或提供詳細資訊時, 直接寫在關聯段落中便顯得拖拖拉拉, 還可能中斷閱讀者的思緒.
偏偏我就習慣老人家碎碎念, 加個旁白或註解是常有的事情, 於是選擇了對話視窗當作解決之道. 首先了解 Dialog box 的基本用途： 提示 回應式確認資訊 附屬資訊
當然, 使用 jQuery 程式庫的網友也能夠運用 Dialog 提示效果, 不過每次寫文章需要編寫複雜的結構對我而言是不實用的, 所以我另外選擇 Bootstrap 編寫套用公式; 小燈泡註解效果就變得很容易附加在文章裡了. 喜歡這個效果者再繼續看如何使用.

先看看小燈泡效果是什麼? BootstrapDialog.show({title:' Information',message:'這就是小燈泡提示效果',buttons:[{id:'btn-1',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});
教學的第一段是懶人包的使用方法. 適用於在文章頁面中只使用一次, 懶得修改太多細節的人, 直接套用公式即可.

Step 1. 打開 CSS 範本, 將以下插件安裝至 </body> 上方.

<link href='https://googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/dialog-box.css'
rel='stylesheet'/>
<script src='https://googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/dialog-box.js'/>

Step 2. 使用在文章時, 切換成 HTML 編輯模式, 將以下公式轉貼到顯示位置.

<!-- DIALOG START -->
<span class="tips-code none">BootstrapDialog.show({title:'Information',message:'HTML Content',buttons:[{id:'btn-ok',label:'OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});</span>
<script>$(function(){$('.tips-code').each(function(index){var $section = $(this);var code = $(this).html().replace('<!--', '').replace('-->', ''); if($section.hasClass('none')){var $button = $('<button class="btn btn-primary">NOTE</button>');$button.on('click', {code: code}, function(event){eval(event.data.code);});$button.insertAfter($section);}});});
</script>
<!-- END -->

修改綠區：HTML Content 將此文字修改成您的註解內容即完成.
細心的您如果注意到綠區不僅是使用純文字內容; 而是 HTML 內文, 表示裡面可以放的東西可多了! 列舉幾項常用的物件：
文字或連結
圖片, 當作說明圖解. 已設定為自動縮放樣式, 通常圖解無須大圖面, 如必須使用大圖面請參考使用燈箱效果：Lightbox 燈箱效果 不影響提示視窗效果.
影片或內嵌微型網頁. 使用影片當作說明物件是目前網站設計的趨勢. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Video',message:'
',buttons:[{id:'btn-2',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});
會員表單. 例如網站正在做促銷, 利用查詢按鍵可連結表單資料, 而無須另開視窗或跳出視窗, 避免先前填了一堆資料卻因為跳出網頁又要重複填寫一次.
這個效果本體亦是按鈕, 大部分按鈕可作到的, 小燈泡也有相同功能.

進階修改：適合多次使用此功能, 或顏色區分註解內容者.
完成 Step 1 之後, 於 Step 2 內嵌以下程式碼. 安插到範本內或工具模組亦可.

<!-- DIALOG START -->
<div class="tips-code none">
var types = [ BootstrapDialog.TYPE_PRIMARY ];
 $.each(types, function(index, type){
 BootstrapDialog.show({
 type: type,
 title: 'Information',
 message: 'HTML Content',
 buttons: [{
 id: 'btn-ok',
 label: 'OK',
 cssClass: 'btn-primary',
 action: function(dialogRef){
 dialogRef.close();
 }
 }]
 });
 });
</div>

<script>$(function(){
 $('.tips-code').each(function(index){
 var $section = $(this);
 var code = $(this).html().replace('<!--', '').replace('-->', '');
 if($section.hasClass('none')){
 var $button = $('<button class="btn btn-primary">Check here</button>');
 $button.on('click', {code: code}, function(event){
 eval(event.data.code);
 });
 $button.insertAfter($section);
 }
 });
});
</script>
<!-- END -->

修改各區的數值, 對應位置參考圖：

jquery dialog box

紅區：不同的提示視窗使用不同的 class值做區別, Ex: Tips-A、Tips-B、Tips-C...
橙區：修改此處參數, 以顏色做類別區分.
黃區：title 提示的主標題, 依照目的、內容做修改.
綠區：使用 HTML 標記, 修改重點如上段所述. 純文字則依據網頁樣式顯示.
藍區：id 請使用不同命名區別, Ex: btn-1、btn-2、btn-3...
紫區：關閉(確認)按鈕的名稱.
棕區：開啟按鈕的名稱, 即小燈泡.

註解內容可顯示於搜尋結果中(包括影音媒體), 不會有好內容做白工的遺憾.
至於小燈泡怎麼來的? 可使用內碼選字或是使用 圖形字型 .