2014年12月28日 星期日

JQuery的小日曆

在撰寫html的日期選擇時,常會要求使用者使鍵入正確的日期格式,這樣才會方便後續的處理,例如進行MySQL的查詢,這時如果只是使用html中單純的text是難以規範使用者的輸入內容的,所以通常我們都會採取不讓使用者直接輸入而是用選擇的方式輸入日期資料,通常有下例幾種方式:
  1. 直接把年、月、日拆開來,分別用不同的下拉式選單讓使用者選取正確的數字,不過這種方式使用者能選擇的值是有限的,你沒有提供的數字就無法選擇。
  2. 以直觀的方式使用日曆來讓使用者選擇日期,使用者會看到日曆並直接在上面選擇。
因為JQuery十分方便,只要引用進JSP中就可以直接使用,而且日曆外觀也不錯,所以在這裡就以JQuery的小日曆為例子,來說明如實現第2種的日曆方式:
  1. 首先要在html的head中把要使用的CSS樣式、JQuery和JQuery UI引用進來,如以下的前三行程式碼,第四行程式碼是中文化的功能,不加入這行時日曆是呈現英文的界面,加入後就能顯示中文介面的日曆:
  2. <!-- 使用 jQuery -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    
    <!-- 使用 jQuery Datepicker的中文化-->
    <script type="text/javascript" src="../jquery/jquery.ui.datepicker-zh-TW.js"></script>

2014年12月23日 星期二

&#32與&nbsp,換行空格與不換行空格

在html中常會遇到空白字符的編碼問題,而空白的常用編碼有兩個,一個是&#32,另一個是&nbsp,這兩個空白看起來一樣,卻有著不一樣的特性。

&#32是換行空格,也就是我們平常用的最普通的空白,它的特性是,如果空白後面接的字太長且超出邊界的話,後面接的文字就會強制被移動到下一行。

&nbsp是不換行空格,一般我們很少用到,或著是用到時也沒有意識到,其實它可以很簡單的一個例子來理解,例如:一公里我們會用"1 km"來表示,其中"1"和"km"有一個空格,如果我們希望不要"1"寫在一行、"km"寫在下一行,也就是希望"1 km"是一體的,一起在同一行,這時我們就會使用不換行格而不是換行空格,就像這樣:"1&nbspkm"