JSON 轉換小技巧

最近利用 FullCalendar 來架設開館時間的行事曆。不過在於資料提供的方面，想到要請同仁直接提供符合 JSON 格式的資料，對同仁來說可能會有些困擾。但如果要將 FullCalendar 改寫，將資料的來源取自資料庫，又覺得沒有必要這樣大費周章。另外撰寫一個轉換格式的程式也覺得沒必要。後來想到，其實也可以利用 phpmyadmin 。將同仁彙整的 CSV 檔案直接將匯入到資料庫(MySQL)，再利用 phpmyadmin 資料匯出成符合 JSON 的格式(如圖)。按一按選一選，就可以很快得到符合需求的 JSON 格式資料。

• 輸出成果：

[{"id":"1","title":"09:00-18:00","start":"2015-09-20","end":"2015"}, {"id":"2","title":"08:00-22:00","start":"2015-09-21","end":"2015"}, {"id":"3","title":"09:00-22:00","start":"2015-09-26","end":"2015"}]

JS Calendar

同仁提出一個想法。想要提供類似日本筑波大學圖書館的開閉館行事曆服務。

這套 FullCalendar 看來很不錯。資料的提供，再修改一下從資料庫取出，再轉成它可接受的格式後應該就可以套用。讚！

註記：

• 事件用不同顏色標記的做法
• 範例：

events: [
                {
                    title: '09:00-18:00',
                    start: '2015-09-20',
                    backgroundColor: '#E66F89'
                },
                {
                    title: '08:00-22:00',
                    start: '2015-09-21',
                    end: '2015-09-26',
                    backgroundColor: '#20D788'
                },

• 定義星期六、日與星期一至星期五的底色
• 範例 (在 CSS內調整)：

<style>
    .fc-sat{
           background-color: #BBE7F2;
    }
    .fc-sun{
           background-color: #FC8D90;
    }
    .fc-mon{
           background-color: #CBF8A8;
    }
    .fc-tue{
           background-color: #CBF8A8;
    }
    .fc-wed{
           background-color: #CBF8A8;
    }
    .fc-thu{
           background-color: #CBF8A8;
    }
    .fc-fri{
           background-color: #CBF8A8;
    }
</style>

• 介面中文化
• 範例
• 加入中文語言 js (<script src='../lang/zh-tw.js'></script>)
• 指定預設語系： lang: 'zh-tw',

相關資料：

• 官網：http://fullcalendar.io/
• 文件：http://fullcalendar.io/docs/
• 對不同的事件，標示不同顏色的做法
• Fullcalendar CRUD with jQuery and PHP 
• How do I get FullCalendar to display information from my JSON feed? 
•  FullCalendar应用——读取JSON数据

雛形：

Dashboard 溫度感測

前些天(103.04.18)開一個關於 dashboard 的會議，主要是要討論要將那些資料項目採用 Dashboard 的方式呈現。於會議中同仁提及到一個我覺得還蠻好玩的想法。

因為自從實施節能後，館內空調的溫度會設定於某一個固定的溫度。但是自從這樣做後，常常被學生反應某區太熱或太冷。當然溫度每個人的感受本來就很主觀，不過也許建置 Dashboard 溫度感測後，可以讓使用者了解所前往的區域目前的溫度，他可以有個資訊來參考，再決定要不要前往該區，也許能降低此方面的困擾。

稍微實做了一下。前端的頁面是利用 Google Chart 來產生溫度計的效果。至於後端的資料來源則仍需請廠商協助提供界接的方式。

相關資料：

• Google Chart API 
• JSON 

 成品示意圖：

Timeline @ NTHU Library

Timeline 的呈現方式有很多種。也有許多不同的專案可供選擇。

現在要做介紹的 TimelineJS 這個就很棒。TimelineJS 中文資料不多。其實要應用它真的很容易，若將要呈現的資料選擇放在 Google Docs上，其實可以很快的將這個應用給迅速架設起來。實作的方式在它的網站上就說明了很清楚了，在這就不多做說明。

雖然可以選擇使用 KnightLab's CDN 的服務，但我的習慣還是將程式的原始碼放在自家的機器內，它的專案程式碼可以到 GitHub 下載。下載完成後，解壓縮後，在目錄內有相關的範例檔案，直接拿它的範例檔案來做修改即可。

相關資料：

• TimelineJS 程式碼專案
• Timeline JS Website
• 15+ Memorable jQuery Timeline Plugins
• 25+ Premium And Free Javascript/jQuery Timeline plugins 

滑鼠游標指定到網頁表單內的特定欄位(Javascript)

同仁在詢問我在使用訪客系統時，可否在開啟頁面的同時，將游標指定到借閱的欄位內？

做法還蠻簡單的，只要一行 javascript 即可。

在 <body> 標籤內加入指定的表單名稱內的欄位名稱後再使用 focus()即可。

<body onLoad="document.p_check.guest_id.focus()">

對照表單：
<form id="p_check" name="p_check" method="post" action="#">
<input type="text" name="guest_id" value="" ACCESSKEY="B" />
</form>

不想寫在<body>標籤內也可以改成這樣的寫法，如下：

<script>
　　window.onload = function ()
　　{
　　document.p_check.guest_id.focus();
　　}
</script>

簡體字轉正體中文

在實作 FB Like Button @ OPAC 時，它的簡介的部份是可以應用於圖書館館藏查詢系統，檢索到書目可以自動的帶有一般圖書的簡介，個人是覺得放這個一般書籍的簡介資料會比放傳統 MARC 格式資料來的吸引人。

不過因為所應用的豆瓣 API，它所提供的書目資料有些是簡體版的資料，有些是繁體版的資料，這部份也不知道同仁的想法。所以稍微找看看簡體轉繁體中文有沒有較好的解決方式。

由找到的資料來看，大致上的做法是維護一份轉換字碼對照表，透過代碼表的交換來達成目的。也有人是採用 Google Translate API的作法，但目前 google translate api有些限制，不能達到所要的需求。在找到的資料當中，以 新同文堂 for Web　的做法最為簡單，簡單的幾行javascript 加入後就可以逹到要的效果 DEMO。


相關資料：

1. 新同文堂 中文網頁繁簡轉換
2. 新同文堂 for Web
3. mediawiki-zhconverter
4. 使用 Mediawiki zhconverter 進行 PHP 網頁簡繁互轉 
5. php 在UTF8編碼下將繁體中文轉換成簡體中文 

DEMO

 

LyteBox 套件

Lytebox is a lightweight, cross-browser compatible and mobile friendly Javascript library and content viewer. It's easy to use, it's fast, it's compatible with other libraries, and best of all, it's COMPLETELY FREE.

不錯使用，目前我是用在臺灣聯合大學系統圖書代借代還服務頁面，自動的彈跳出要公告的內容。使用這個套件，完全不需變動原本頁面的 HTML 內容，只要加入短短的幾行 javascript script ，就完成了。其它詳細的使用方式可以直接參考官方上的參考文件，中文的教學也可以參考這篇 BLOG 的介紹。　

<script>
$lb.launch({
    url: 'images/2013UST.jpg',
    title: 'UST'
})
</script>
</head>

Timeline

Simile Widget Timeline - 用靜態網頁表現時間線

Timeline是採用時間軸示意的手法來表示所發生的事件。它可以用在那呢？

也許可以將它應用在，歷年來所舉辦的說明會課程、展覽活動、大世紀等活動，應該是非常有趣的應用。

試玩了一下，將它拿來當作自我介紹時的專案展現結果介紹也是不錯的。

• DEMO

Book Cover Slider Gallery

新版的網頁預計放新書展示的功能。

使用 Google 輸入 Jquery Slider Gallery or Sliding box 的關鍵字後，馬上就可以找到不少非常漂亮的 Plugin 可以立即套用。例如 jQuery教學-SliderGallery滑動式相本特效應用、Elastislide 與 Cycle Plugin 的效果，就是這次我所需要的功能。

前端頁面的部份，我是採用 Elastislide Plugin 與 Cycle Plugin 來實作這次的功能。
Elastislide & Cycle 的使用方式，可以直接觀看官方網頁的文件，Elastislide Plugin 搞了比較久的地方在於，書本的封面要提供串連到館藏  WebPAC 的超連結的功能，這在官方的頁面並沒有提及如何實作點選超連結的做法，需要稍微改寫一下，腳本如下。

 <script type="text/javascript"> 
            $('#carousel').elastislide({
                imageW         : 80,
                minItems    : 1,
                border        : 0,
                onClick  :  function( $item ) {
                    window.location = $.myURL("index", $(this).attr("value"));
                }
            });
</script>

實作後的 DEMO 圖

JS

• Javascript系列文章
• 那些年，我們應該瞭解的 JavaScript 小知識 - 物件, 數字, 字串, 陣列, 迴圈
• Cookie
• 如何抓取表單中checkbox的值 
• Useful JavaScript Libraries and jQuery Plugins
• Coding Style
  
  

  ---

  改變節點文字的安全三步驟 (from Heading first Javascript P361)
  

   
  var node = document.getElementByID("YOURID");
  
      while (node.firstChild)
  
      node.removeChild(node.firstChild);
  
       node.appendChild(document.createTextNode("Your new HTML message"));

SyntaxHighlighter @ Google Blog

有時在文章內會貼上一些程式碼的原始碼，直接貼上 source code 在文章內，看起來不是很漂亮，此時可以使用 SyntaxHighlighter 套件，可以將這些需要的檔案放在自己的主機上，也可以選擇考慮放在 Google 協作平台內 (放 google 協作平台的作法)。

使用的方法，觀看 Blog及Google Blogger使用SyntaxHighlighter(高亮度語法)的方法 與 Google Blogger 中使用 SyntaxHighlighter 3.0.83 ，這兩篇文章的說明就可以了解該如何實作。

目前我僅放 javascript and Php 兩種模式而已，有需要再新增即可。

SyntaxHighligher 目前支援的語言程式碼清單可見 Bundled Brushes 列表。

• 使用方式：要呈現的原始碼之前加入<pre class="brush:js"> </pre> 標籤即可。

DEMO Script

 
line 1
line 2
line 3
line 4
line 5
line 6

Cookies

Javascript Cookies function

From : head first Javascript (ISBN:9789866840241)