jQuery Countdown 網頁倒數計時

From: Polin Wei


在網頁上實作倒數計時讓使用者知道多久會被導向到另一個網站，這個功能常會用在網站改網址或者是要告知一些重要事項。作法如下：
jQuery: jquery-1.11.1.min.js
jquery.countdown: jquery.countdown.min.js
下載上面兩個 java script，然後再寫一個網頁 index.html，即可。

(繼續閱讀...實例)

Datetime Picker 兩款 jQuery 的日期時間選擇器

From: Polin Wei

撰寫網頁程式時，日期選擇器是很常見，但要有日期與時間同時選擇的 javascript 還有點難找到，找到了兩款可供開發網頁時使用。

■ Date-Time-Picker with jQuery UI Datepicker
評論：在一般的網頁上沒有問題；但用在 XOOPS2 的網頁上，IE 流覽器在流覽時，CSS 的設置有些問題。
■ DateTimepicker
評論： IE 、FireFox 流覽在一般網頁或 XOOPS 網頁時均正常。


繼續詳細閱讀

[MIS] 資訊人員必看的教學網站

[部落格]
Racklin's 阿土伯程式大觀園
Josh's Note
Aqua , A/V and BSD
繼續閱讀懶人加強版
必优優客
龍文圖閣

[Blogger 文章精選]
Josh's Note之「超級無腦安裝Blogger外掛功能」功能更新
阿土伯之輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
0 與 1 謎詭世界-Blogger template模板教學課程---CSS外觀解說
0 與 1 謎詭世界-Blogger template模板教學課程---HTML內容架構
0 與 1 謎詭世界-blogger模版CSS語法細部介紹(上)
網站部署可考慮使用 Google AJAX Libraries API 載入 JS
Blogger 輕鬆提交 Sitemap
加入相關文章功能 (Related Post)
深入淺出Android程式設計(7)-如何安裝Android SDK


[JQuery]
[JQuery] 自製 jQuery Plugin - Part 1 - 網站製作學習誌
[JQuery] 自製 jQuery Plugin - Part 2 - 網站製作學習誌
邊做邊學 jQuery 系列 13- 打造自己的jQuery Plugin
jQuery插件James实现javascript自动完成提示功能
jQuery Themes
jQuery 教學

[PHP]

[手機開發-Android]
深入淺出 Android -- Google 手持設備應用程式設計入門
Jollen's Blog「Android OS」

[dotProject]
使用 DotProject 架設 Project Server，整合 AD 2003 帳號（適用 CentOS 4）


[VNC]
功能強大的遠端控制軟體 (1) - UltraVNC

[Linux]
Linux基礎班-CentOS 4.3簡介與操作

[討論群組]


[CSS　首選]
CSS 語法教學
HTML 學習手札

[Java Script]






2009/07/17 更新...

持續增加中．．．歡迎提供

[JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得

From: Polin Wei

在 Java Script 中, 物件 objects 與 陣列 arrays , 常會令人困惑, 查了一下 JQuery 的官方網站. 它所舉的例子就淺而易懂了.

整理一下 物件(objects) 與 陣列 (arrays) 的區分如下:

物件(objects):
1. 以 {} 包含
2. 有 Key & Value , 如: var obj = { one:1, two:2, three:3, four:4, five:5 };

陣列 (arrays):
1. 以 [] 包含
2. 只有 Value , 但內含 index , 如: var arr = [ "one", "two", "three", "four", "five" ]; 所以 arr[0] = one , arr[1] = two ...

知道這樣的特性後, 就可以用 JQuery 的函數 $.each() 來取得 物件(objects) 與 陣列 (arrays) 的值了. 再來看一下程式碼:
<script>
$(document).ready(function(){

    var arr = [ "one", "two", "three", "four", "five" ]; ==> 這是陣列 , 陣列只有 值, 內含 index
    var obj = { one:1, two:2, three:3, four:4, five:5 }; ==> 這是物件 (one,two,three,four,five) 是 Key , 相對應的 值 為 (1,2,3,4,5)

   jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
   });

   jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
   });

});
</script>


執行結果為
My id is one. - 1
My id is two. - 2
My id is three. - 3
My id is four. - 4
- 5

[JSON] JSON 資料在 JQuery 上的運用

From: Polin Wei

JSON 即 JavaScript Object Natation，它是一種羽量級的資料交換格式，非常適合於伺服器與 JavaScript 的交互使用。JSON 也為 Web 應用開發者提供了另一種資料交換格式；JSON 同 XML 或 HTML 片段相比，JSON 提供了更好的簡單性和靈活性。

JSON 資料格式解析
和 XML 一樣，JSON 也是基於純文本的資料格式。由於 JSON 天生是為 JavaScript 準備的，因此，JSON 的資料格式非常簡單，您可以用 JSON 傳輸一個簡單的 String，Number，Boolean，也可以傳輸一個陣列，或者一個複雜的 Object 物件。 至於 物件 objects 與 陣列 arrays 的區分, 可以看這一篇文章 [JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得 取得瞭解

String，Number 和 Boolean 用 JSON 表示非常簡單。例如，用 JSON 表示一個簡單的 String "abc"，其格式為："abc"

除了字元 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要編碼外，其他 Unicode 字元可以直接輸出。

Boolean 類型表示為 true 或 false 。此外，JavaScript 中的 null 被表示為 null，注意，true、false 和 null 都沒有雙引號，否則將被視為一個 String 。

JSON 還可以表示一個陣列物件，使用 [] 包含所有元素，每個元素用逗號分隔，元素可以是任意的 Value，例如，以下陣列包含了一個 String，Number，Boolean 和一個 null：
["PolinWei",25,true,null]

Object 物件在 JSON 中是用 {} 包含一系列無序的 Key-Value 鍵值對表示的，實際上此處的 Object 相當於 Java 中的 Map，而不是 Java 的 Class 。注意 Key 只能用 String 表示。
例如，一個 Address 物件包含如下 Key-Value：

country: Taiwan
City: Taichung
postcode: 420


用 JSON 表示如下：
{"country":"Taiwan","City":"Taichung","postcode":420}

其中 Value 也可以是另一個 Object 或者陣列，因此，複雜的 Object 可以嵌套表示，例如，一個 申請者APPLIER 物件包含 員工基本資料( NAME, EMP_ID, Account) 和 簽核流程FLOW 物件 包含( ORDER, NAME, EMP_ID, COMPANY_NAME, DEPT_NAME)，可以表示如下：

{"APPLIER":[{"NAME":"王大明","EMP_ID":"E007","Account":"PolinWei"}],"FLOW":[
{"NAME":"張三","EMP_ID":"E002","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":0,"DEPT_NAME":"財務總處"},{"NAME"
:"李四","EMP_ID":"E001","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":1,"DEPT_NAME":"總經理室"}]}

假設伺服器返回的 JSON 資料是上面 code 裡的資料：

則在 JQuery 中, 可以這樣取得資料:
$(document).ready(function(){
        $.getJSON("DocFlow.do?reqCode=chgApplierJSON",{ function(userData){
            alert(userData.APPLIER[0].EMP_ID);  ==> 取得 APPLIER 物件第一筆的 EMP_ID 值
            alert(userData.APPLIER[0].NAME);    ==> 取得 APPLIER 物件第一筆的 NAME 值
            alert(userData.FLOW[0].EMP_ID);      ==> 取得 FLOW 物件第一筆的 EMP_ID 值
            alert(userData.FLOW[1].EMP_ID);      ==> 取得 FLOW 物件第二筆的 EMP_ID 值
        });
});


若想要快速取得物件中的資料, 則可以參考 JQuery 的 $.each() 函數, 例如要取得 JSON 回傳資料中的APPLIER 物件. 程式可以這樣寫
$.each(userData, function(i, val){
    if (i=="APPLIER"){
        $.each(val[0] , function(applier, a_val){
            alert("key:"+applier+" , value:"+a_val)
        });               
    }
});


取得的資料如下:
key: NAME , value: 王大明
key: EMP_ID , value: E007
key: Account , value: PolinWei

[JQuery] 選取 Form 表單上 #id , element 的應用

From: Polin Wei

在撰寫 HTML 時, 常需要取得 Selectors 的 #id , element 來作適當的處理, 使用 JQuery 可以直覺式取得您想要的, 並且給您更多. 若對 JQuery 不是很瞭解的話, 不妨可以先看這一篇文章 [教學] How jQuery Works 如何讓 jQuery 正常運作

首先, 先來看下面這一段 HTML 的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("#APPLIER").change(function(){
alert( $(this).val() );
});

$("input[name^='nextSign']").change(function(){
alert( $(this).val() );
});

$("form[name='form2'] input[name='docNo']").change(function(){
alert( $(this).val() );
});

});
</script>
</head>
<body>

<form name="form1">
申請人:<input id="APPLIER" type="text" name="APPLIER" value="PolinWei"><br/>
文件編號:<input type="text" name="docNo" value="doc-123"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E123"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D001"><br/>
</form>

<form name="form2">
申請人:<input id="nextAPPLIER" type="text" name="APPLIER" value="Jamie"><br/>
文件編號:<input type="text" name="docNo" value="doc-456"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E456"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D002"><br/>
</form>

</body>
</html>

程式碼解說:

1.取得 id 值為 APPLIER $("#APPLIER")
2.取得所有 element 值為 input , 且 name 的開頭符合 nextSign $("input[name^='nextSign']")
3.取得 form=form2 , element=input , name=docNo $("form[name='form2'] input[name='docNo']")

當改變這些欄位內的值時, 才會 alert 出改變後的值, 否則就不會出現 alert 的視窗.

[教學] How jQuery Works <<如何讓 jQuery 正常運作>>

From: Polin Wei

　　jQuery 在前面的 [文章] 初談 jQuery 有大致的介紹，但對一般開始要學習 jQuery 的人來說，還是有點學習的障礙，今天就大概來說一下該如何快速進入 jQuery 的世界，若你對原文(英文)的閱讀是無障礙的，那你可以讀這一篇 Tutorials:How jQuery Works本篇也是參考這文章

　　 1. 首先建立一個新的網頁 HTML 檔案 jQueryDemo.HTML ，就像下面：

  <html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

　　

　　2. 在上面的檔案中編輯 src 的屬性，如果 jquery.js 的 JavaScript 檔案與這個網頁jQueryDemo.HTML 是同目錄的話，就不需修改，就像下面

 <script type="text/javascript" src="jquery.js"></script>

　　
　　若你有需要 jQuery 的檔案，則可以在 Downloading jQuery 取得

　　3. 因為網頁在網路上讀取時，有時所有的 JavaScript 還沒有下載完畢，所以有時執行時會不如預期，為了避免這種情況發生，一般 JavaScript 的程式應該在 Document Ready 時才開始執行，為此，有兩種方法可以來解決：
方法一：

 window.onload = function(){ alert("abc") }

方法二：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
(document).ready(function(){
// Your code here
});
</script>
</head>

　　至於 jQuery 的一些範例則可以參考 [文章] 初談 jQuery

[文章] Java Script 建立物件的方法

From: Polin Wei

方法一是：

var MyObject = function(){ /*Your Code Here*/ };

方法二是：

var MyObject = function(){ return{ /*Your Code Here*/ } }();

範例: 建立一個 MyObject

MyObject = function() { // private variables : 私有屬性或稱為區域變數 // private functions : 私有方法或稱為區域方法 // public space return { // public properties, e.g. strings to translate : 公有屬性或稱為公開變數 // public methods : 公有方法或稱為公開方法 init: function() { alert('Application successfully initialized'); } }; }();

實例如下:

MyObject = function() { var myFirstName='WEI'; //私有屬性或稱為區域變數 var myLastName='Polin' ; function getFirstName(){ alert(myFirstName); } function getLastName(){ alert(myLastName); } return { NickName1: 'Super WEI', // public properties 公有屬性或稱為公開變數 NickName2: 'Good Luck', init: function() { alert(this.NickName1); //在Public zone裡面的需要使用this.xxxx來存取變數 alert(myFirstName); //在Public zone裡面的直接使用 xxx來存取 private zone裡面的變數 }, // end of init other : function(){ alert(this.NickName2); //在Public zone裡面的需要使用this.xxxx來存取變數 alert(myLastName); //在Public zone裡面的直接使用 xxx來存取 private zone裡面的變數 } //注意結尾的,需要去除不然龜毛的IE會拒絕執行 end of other }; // end of return }(); // end of MyObject

有幾點重點要注意


第一個是變數的宣告方式:
在Private zone的變數使用分號(;)隔開舉例如下:

• var 變數1;
• var 變數2;

但是在Public zone裡面的變數要使用逗號(,)隔開(註:其實這是JSON寫法的變型)舉例如下:

變數1:變數1的值, 變數2:變數2的值 //注意結尾的逗點在IE無法通過檢查

第二個是function(或稱方法)的宣告方式：
在Private zone的使用方法如下:

function fun1(){ /*Your code HERE*/ }; function fun2(){ /*Your code HERE*/ };

在但是在Public zone的使用方法如下,(註:還這是JSON寫法的變型):

• fun1: function() {
• 
  /*Your code HERE*/
• },
• fun2: function() {
• 
  /*Your code HERE*/
• }

[文章] 初談 jQuery

From: Polin Wei

　　這幾天在流灠有關於 Blogger 的網站, 總是有人談到 jQuery ，雖然本身在工作上是使用 ExtJS 2.1作為企業內的開發，但底層仍是 jQuery ， 那到底什麼是 jQuery 呢? 它有什麼媚力呢? 若你有到 jQuery 的網站看的話, 就可以知道, 它開宗明義就有說明:

jQuery The Write Less, Do More !! jQuery is a new type of JavaScript library.
　　jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

意思就是說:
jQuery 是一套 JavaScript 的 Library
　　jQuery 主要是用在 HTML 上 DOM 文件的操作，它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」，在快速選取元素上可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。

　　以下是一個完整的HTML實例，您可以Copy/Paste去跑看看，讓您更能瞭解 jQuery 的威力，至於所需要的 jQuery 可以到 jQuery 去下載，目前最新版為 1.2.6 ：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery 1.2.6 Demo</title>
        <script type="text/javascript" src='jQuery-1.2.6.js'>  => 載入 jQuery 的 Java Script Library
        </script>
        <style type="text/css">
            .changeStyle {
                background-color: blue;
                color: #FFFFFF;
            }
           
            .content1 {
                background-color: red;
            }
           
        </style>
        <script type="text/javascript">
            /**
             *  jQuery 基本函數練習
             */
   
           // 函數說明: $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素,
           // 後面接著的 .addClass("changeStyle") 就是將所有的 div 都加上 changeStyle 的 Style 的 class
            function fDiv(){
                $("div").addClass("changeStyle");
            }
   
    // 函數說明: 選取 id 為 first 的元素都加上 changeStyle 的 Style 的 class      
            function fDivFirst(){
                $("div#first").addClass("changeStyle");
            }
           
   // 函數說明: 選取 body 的元素都加上 changeStyle 的 Style 的 class
            function fBody(){
                $("body").addClass("changeStyle");
            }
           
   // 函數說明: 選取 h2  的元素都加上 changeStyle 的 Style 的 class
            function fHeader(){
                $("h2").addClass("changeStyle");
            }
   
            // 函數說明: 選取 class 為 content1 的 <div> 所包住的所有下層的 <p>
            function fContent1P(){
                $("div.content1 p").addClass("changeStyle");
            }
           
   // 函數說明: 選取 body 的元素, 並移除  changeStyle 的 Style 的 class
            function fRemoveBodyClass(){
                $("body").removeClass("changeStyle");
            }
           
   // 函數說明: 選取所有 div 的元素, 並移除  changeStyle 的 Style 的 class
            function fRemoveDivClass(){
                $("div").removeClass("changeStyle");
            }
        </script>
    </head>
    <body>
     <!-- 以下 <button ...> </button...> 作為事件觸發時, 所要作的事項 -->
        <button onclick="fDiv()"> 選取所有  div 的 selector </button>
        <button onclick="fDivFirst()"> 選取 div id 為 first </button>
        <button onclick="fHeader()"> 選取 h2 的 Header </button>
        <button onclick="fContent1P()"> 選取content1 的 Paragraph </button>
        <button onclick="fBody()"> Change Body Background Color </button>
        <button onclick="fRemoveBodyClass()"> Remove Body Class </button>
        <button onclick="fRemoveDivClass()"> Remove Div Class </button> <br>
  
  <!-- 以下為 HTML 的本體  -->
        <h2>Header H2</h2> <br>
        <div id="first">
            Hello World !! Polin Wei 這是第一個 div id = first
            <div class="content1">
                <p>
                    jQuery 是一個 Java Script Liberary
                </p>
            </div>
        </div>
        <h3>Header H3</h3>
        <br>
        <div id="second">
            Why jQuery? 這是第二個 div id = second
        </div>
        <div id="content2">
            <p>
                jQuery 主要是用在 HTML 上 DOM 文件的操作，它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」，在快速選取元素上可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。
            </p>
        </div>
    </body>
</html>