【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資料庫