MING: JS

顯示具有 JS 標籤的文章。顯示所有文章

2015年9月23日星期三

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

2015年9月22日星期二

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',

相關資料：

雛形：

2014年4月22日星期二

Dashboard 溫度感測

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

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

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

相關資料：

成品示意圖：

2014年4月1日星期二

Timeline @ NTHU Library

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

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

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

相關資料：

2014年3月13日星期四

滑鼠游標指定到網頁表單內的特定欄位(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>

2013年11月4日星期一

簡體字轉正體中文

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

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

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

相關資料：

DEMO

2013年1月15日星期二

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>

2012年9月25日星期二

Timeline

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

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

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

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

DEMO

2012年8月24日星期五

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 圖

2012年7月13日星期五

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)

訂閱：文章 (Atom)

網頁

2015年9月23日 星期三

2015年9月22日 星期二

2014年4月22日 星期二

2014年4月1日 星期二

2014年3月13日 星期四

2013年11月4日 星期一

2013年1月15日 星期二

2012年9月25日 星期二

2012年8月24日 星期五

2012年7月13日 星期五