【jQuery】使用ColorBox來撥放影片

ColorBox - a jQuery lightbox

---

A lightweight customizable lightbox plugin for jQuery

最近接到的Case是要在網頁上撥放影片
影片格式是wmv
所以嵌入式的做法是使用object標籤
參數autostart可以決定是否自動撥放影片

<object type="video/x-ms-asf" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
    <param name="url" value="file_name.wmv">
    <param name="autostart" value="0">                              
    <embed type="application/x-mplayer2" src="file_name.wmv"                                                    
    pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

上述做法是傳統嵌入式方法
如果使用 jQuqery 的 plug-in ColorBox 的話
就可以使用類似廣告效果的方式來呈現影片
使用 colorbox 除了要引入 jquery 以及 colorbox 函式外
也要記得加上 colorbox 這個 css 檔案，否則就會少了只凸顯影片的效果
下面這個例子是 colorbox 使用 youtube 的例子，

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    };
</script>
<p>
<a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?  rel=0&wmode=transparent" title="Movie Title">Flash / Video (Iframe/Direct Link To YouTube)</a>
</p>

因為一開始有說這個Case的影片格式是wmv
所以我的作法是結合兩種方式，先寫一個網頁用第一種方式播放內嵌 wmv 影片
然後再用連結的方式開啟這個內嵌影片檔的網頁
另外因為這個網頁上還有別的 JavaScript 外掛播放 swf 動畫
而且在影片播放的時候這段動畫沒有變成背景，非常難看，不整齊！
所以我就讓 colorbox 在開啟時將動畫隱藏起來，撥放結束再還原動畫
使用 onOpen 跟 onClosed 兩個函式即可

    

點此播放影片廣告效果

【jQuery】避免冒泡事件

利用jQuery製作網頁Tab效果的時候
想要利用 $('.class').click(function(event) {}) 這個函式來處理時
被卡住
看一下HTML部分

<div class="menu">
    <ul>
        <li><a target="#">Menu</a>
          <ul>
            <li><a target="a.html">list-1</a></li>
            <li><a target="b.html">list-2</a></li>
            <li><a target="c.html">list-3</a></li>
          </ul>
        </li>
    </ul>
</div>

後來去查了jQuery API發現因為有冒泡事件的發生
導致第二層選單的Tab效果在IE 9可以正常運作
但是在Google Chrome會發生錯誤
後來找到一個方法來解決冒泡事件
就是

event.stopPropagation()

先看一下jQuery API如何描敘他
Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
把這個方法放進 click function 內，就可以解決Chrome失效的問題
來看一下完成之後的jQuery code

$('.menu li').click(function(event) {
    var $this = $(this);
    /* 找到連結a中的targer標籤值 */
    _clickTab = $this.find('a').attr('target'); 
    if (_clickTab=="#")
        ;
    else
        $("#content").load(_clickTab);
    event.stopPropagation();
})

【HTML5】RGraph demos bar01

本文介紹使用HTML5 canvas標籤搭配RGraph函式
先看一下RGraph官網介紹
Title:Build faster websites with RGraph

內文
RGraph is a HTML5 charts library written in Javascript
that uses the HTML5 canvas tag to draw
and supports over twenty different types of charts.

<script>
        window.onload = function ()
        {
            var data = [5,4,1,6,8,5,3]; //data也可以是二維陣列           

            // Create the br chart. The arguments are the ID of the canvas tag and the data
            var bar = new RGraph.Bar('cvs', data);
            bar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); //橫座標項目
            bar.Set('chart.background.barcolor1', 'white');
            bar.Set('chart.background.barcolor2', 'white');
            bar.Set('chart.background.grid', true); //是否顯示格線
            // bar.Set('chart.colors', ['red']); //控制長條圖顏色

            // Now call the .Draw() method to draw the chart
            bar.Draw();
        }
</script>

HTML的部分就很簡單
主要是使用HTML 5的canvas標籤

<h1>A basic Bar chart</h1>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

下圖則是執行結果

【jQuery】讀取和寫入 HTML tag

最近在寫jQuery與Ajax遇到了問題
解決問題以後，記錄下來。
主要是利用Ajax處理刷新select選取參數
以及更改input text的值。
簡介jQuery寫法：
$("tag"),tag為html標籤
$("#id"),id為html tag的id
$("#id").val()可以獲取該tag的值

HTML標籤部分：

<select id="select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input id="text1" type="text" />
<button>OK</button>

1.變更HTML select tag的選取參數
jQuery程式碼：

$(document).ready(function(){
  $("button").click(function(){
    $("#select1")[0].selectedIndex = 3;
  });
});

未按鈕前：

執行jQuery程式碼後：

2.變更HTML input text的value值
jQuery程式碼：

$(document).ready(function(){
  $("button").click(function(){
    $("#text1").val("text change");
  });
});

執行jQuery程式碼後：

【Javascript】在表單submit之前進行欄位驗證

function subForm(theform){
   if(document.form1.money.value.length == 0){
    alert("請輸入金額");
    document.form1.money.focus();
    return false;
   }
   if(checkDate(document.form1.startdate.value)==false){
          document.form1.startdate.focus();
       return false;
   }
   return true;
}

function checkDate(str) {
    var date = Date.parse(str);
        if(isNaN(date)) {
            alert("請輸入合法日期！");
            return false;
        }
    return true;
}

在form表單送出之前，
利用Javascript進行欄位的檢查
第一個if判斷式檢查欄位不可為空
第二個if判斷式檢查日期字串
方法是把使用者輸入的字串丟入 JavaScript 函式 Date.parse 裡

為了避免form表單檢查有誤還送出資料
所以加了onsubmit="return subForm()"
這樣檢查發現有欄位驗證有誤會return false
這樣form就不會submit出去
檢查無誤就return true
這時form才會submit

【phpMyAdmin】修改帳號密碼登入方式

來到phpMyAdmin的資料夾下
把 config.sample.inc.php 檔案複製後變更名稱為 config.inc.php
再進行設定

/* 設定phpmyadmin的認證方式(config、http、cookie) */
 $cfg['Servers'][$i]['auth_type'] = 'config';            //不需輸入密碼即可登入
 $cfg['Servers'][$i]['auth_type'] = 'http';              //有變動到資料庫就要輸入一次密碼，彈出一個對話方塊來登入帳號密碼
 $cfg['Servers'][$i]['auth_type'] = 'cookie';            //利用cookie方式只要輸入一次密碼即可(預設值)，登入畫面為Web介面
/* 若使用認證方式為 cookie 則必須設定 blowfish 加密演算法亂數值 */
 $cfg['blowfish_secret'] = '';                           //預設值
 $cfg['blowfish_secret'] = 'qwerzxcv5566';               //隨便給亂數

【phpMyAdmin】變更MySQL的密碼

使用phpmyadmin更改Mysql密碼的方法
1.適用phpMyAdmin ver.3.1.1
首頁→Actions→更改密碼

2.適用phpMyAdmin ver.2.9.2
首頁→權限→編輯root使用者
變更完成後，記得重新讀取權限，否則新密碼不會生效

3.下SQL語法
UPDATE user SET password=password('new_pwd') where user='root';
FLUSH PRIVILEGES; //刷新Mysql資料庫

【JAVA】Class String compareTo

今天簡單介紹一下JAVA裡面的String類別底下的一個方法
就是compareTo，會想介紹這個方法是因為我一開始只知道
這個方法用於比較字串，正確的話就會回傳0，但我不清楚
如果錯誤的話，回傳的值表示什麼意思。

查了一下Java SE 7的API
public int compareTo(String anotherString)
如果字串一樣的話，毫無疑問會回傳0。
但如果不一樣呢，
compareTo會逐一比較兩個字串，
當出現了第一個不一樣的 character 時，
該character位於字串的位置 k，k 也就是 index
則回傳以下結果：
this.charAt(k) - anotherString.charAt(k)

或是比較完比較短的字串仍沒有發現相異的字元時，
則會回傳以下結果：
this.length( ) - anotherString.length( )

舉例而言：

String a = "abc";
String b = "abcde";
String c = "abcF";
System.out.println(a.compareTo(b));
System.out.println(b.compareTo(a));
System.out.println(c.compareTo(a));
System.out.println(c.compareTo(b));
System.out.println(c.charAt(3)-b.charAt(3));

執行結果：

首先 a.compareTo(b) 會回傳 a.length( ) - b.length( ) 所以 3 - 5 = -2
同理可推 b.compareTo(a) 則回傳 b.length( ) - a.length( ) 回傳 2
c.compareTo(a) 則是 c.length( ) - a.length( ) 所以 4 - 3 = 1
c.compareTo(b) 因為第一個相異的字元的index為3
所以會回傳 c.charAt(3) - b.charAt(3) = -30
至於-30怎麼來的，
上網查了一下應該是轉成Unicode之後的計算結果。

【VBA】Excel亂數分配名單的演算法

接前一篇Excel隨機分配名單，這篇想講一下亂數分配名單的演算法。

這段程式碼我放在"Module1"模組裡面

第一個For迴圈把原始修課名單複製到第四張工作表

第二個For迴圈則進行亂數分配名單

演算法的部分非常簡單

使用變數 i  來記錄第幾位學生( i 會遞增)

使用變數randNum 來取得修課人數之間的一個隨機整數

然後就把第 i 位學生與第randNum位學生做交換

For   迴圈只進行三分之一修課人數的次數

Sub 亂數工作表()
  Dim TempNumber As Long
  Dim TempName As String

  For i = 1 To UserForm1.CountPeople + 1
    Sheets(4).Cells(i, 1) = Sheets(1).Cells(i, 1)
    Sheets(4).Cells(i, 2) = Sheets(1).Cells(i, 2)
  Next

  For i = 2 To UserForm1.CountPeople / 3
    Randomize randNum = Int(Rnd * (UserForm1.CountPeople)) + 2
    TempNumber = Sheets(4).Cells(i, 1)
    TempName = Sheets(4).Cells(i, 2)
    Sheets(4).Cells(i, 1) = Sheets(4).Cells(randNum, 1)
    Sheets(4).Cells(i, 2) = Sheets(4).Cells(randNum, 2)
    Sheets(4).Cells(randNum, 1) = TempNumber
    Sheets(4).Cells(randNum, 2) = TempName
  Next
End Sub

這段演算法我學習使用VBA的Rnd 方法來幫助我取隨機數

簡單介紹一下這個方法
Int ((upperbound - lowerbound + 1) * Rnd + lowerbound)

upperbound顧名思義就是範圍的上限

lowerbound 顧名思義就是範圍的下限

舉例而言

Int ((6 - 1 + 1) * Rnd + 1) 就會回傳給我們1~6之間的整數

或是也可以這樣理解

Int(Rnd * range) + InitialValue

也就是說，回傳從InitialValue值開始落在range範圍的一個數

例如：

Int(Rnd * 501) + 200那就會回傳給我們200~700之間的整數

200就是起始值，而200~700之間剛好共501個整數(包含200跟700) 

最後補充幾個VBA的基礎控制流程跟迴圈

1.If-Then

If 條件 Then

   敘述

End If

2.If-Then-Else

If 條件 Then

   敘述

ElseIf 條件
   敘述
End If

3.If-Then-ElseIf-Else

If 條件 Then

   敘述

ElseIf 條件

   敘述

ElseIf 條件

   敘述

Else

   敘述

End If

4.Do While ...Loop

Do While 條件

   敘述

Loop

5.Do  ...Loop While

Do

   敘述

Loop While 條件

6.For ... Next

For  數值變數=初始值 To 終止值 [Step增量]

   敘述

Next [數值變數]

* [Statements]表示可以省略！

7.跳離指令

Exit Do：強制離開Do Loop迴圈

Exit For：強制離開For Loop迴圈

Exit Sub：強制跳離Sub程序

【VBA】Excel隨機分配名單

主要是因為當TA的關係，
期中考的時候總是要將修課學生亂數名單分配，
還要分配座位表，實在很麻煩，
所以就想寫個小程式讓Excel自動化完成名單分配還有分配座位表。
但因為目前實際上修課126人，所以只要使用兩間教室就夠用。
因此設計的程式也是以兩間教室為準。

Excel工作表介紹
Sheets(1):一開始的修課名單，第一欄是學號，第二欄是姓名
Sheets(2):第一間教室名單 ←VBA程式自動產生
Sheets(3):第二間教室名單 ←VBA程式自動產生
Sheets(4):根據第一個工作表亂數產生的名單，接下來也用來分配座位表。

Private Sub CommandButton1_Click()
    ClassRoomOne = TextBox1.Text //第一間教室名稱
    ClassRoomTwo = TextBox2.Text //第二間教室名稱
    RoomOnePeople = TextBox3.Text //第一間教室人數
    CountPeople = TextBox4.Text //修課人數
 
    Module1.初始化巨集
    Module1.亂數工作表 //把名單先複製到新的工作表，然後亂數排序新工作表的名單
 
    //把亂數過後的名單依據第一間教室人數複製到該教室名單的工作表
    For i = 2 To RoomOnePeople + 1
    Sheets(2).Cells(i, 1) = Sheets(4).Cells(i, 1)
    Sheets(2).Cells(i, 2) = Sheets(4).Cells(i, 2)
    Next
    //把亂數的名單按照學號由小到大重新排列，若要由大至小排列則把最後的1改成2即可
    Sheets(2).Range("A2", "B" & RoomOnePeople + 1).Sort Sheets(2).Range("A1"), 1
    Sheets(2).Range("A1", "B" & RoomOnePeople + 1).Borders.LineStyle = 1 //畫上框線
 
    //把剩餘的名單複製到第二間教室名單的工作表
    For i = RoomOnePeople + 2 To CountPeople + 1
    Sheets(3).Cells(i - RoomOnePeople, 1) = Sheets(4).Cells(i, 1)
    Sheets(3).Cells(i - RoomOnePeople, 2) = Sheets(4).Cells(i, 2)
    Next
    //把亂數的名單按照學號由小到大重新排列
    Sheets(3).Range("A2", "B" & CountPeople - RoomOnePeople + 1).Sort Sheets(3).Range("A1"), 1
    Sheets(3).Range("A1", "B" & CountPeople - RoomOnePeople + 1).Borders.LineStyle = 1
End Sub

然後我建了一個UserForm以及四個TextBox來接收使用者輸入的參數
還有一個CommandButton來讓使用者按下之後開始亂數分配教室名單
程式執行完成後，就會有兩張工作表來儲存兩間亂數過後的教室名單。
至於 Module1.亂數工作表的演算法部分，我打算另寫一篇文章來介紹^_^