【jQuery UI】使用drap與drop實作sortable

最近在研究jQuert UI，功能很強大且程式碼很簡潔
研究的重點在於利用拖曳的功能作出圖片的排序
使用draggable來使DOM物件能夠被拖曳
使用droppable來讓DOM物件作為容器
HTML當中以block為容器而img為拖曳物件
先來看一下HTML有哪些目標容器與拖曳物件

第一個要注意的地方在於：如何得知drag物件是從哪個block拖曳到另一個block
我是採用drop的事件out與drop來判斷
但要特別注意out event如果拖曳有經過別的容器也會觸發
所以增加一個變數flag來判斷第一次out event的source block

第二個要注意的地方在於：要特別注意事件被觸發的順序
若事件為draggable start與stop以及droppable out與drop
根據我的理解，觸發順序為start→out→drop→stop
另外特別注意droppable事件over與out，我發現在預設的情況下
有可能只觸發over事件，而尚未觸發out事件
因為沒注意到此情況，導致某些情況下拖曳效果會失敗，產生嚴重瑕疵，不可不慎

第三個要注意的地方在於：因為我是用append來使拖曳物件移動到目標容器
但這樣產生的問題是，會被判斷成拖曳失敗而發生revert動畫
後來發現原因是append使拖曳物件到達目標容器後位移效果並沒有消失
可以用css( 'left', '0' )來取消位移
這樣就可以防止拖曳失敗而產生revert動畫

以上三點我覺得最為重要！

下面提幾個小細節的地方：
$(".line")用來顯示定位線，而且要判斷drag物件的out與drop block是左移還右移
為了維持定位線跑的感覺，當觸發over event處理定位線位置
$(".line").addClass('line_clear');先清除定位線再重新繪製
例如：block4→block1,那輔助線就要在block左邊；
反之，則要在block右邊

若要使拖曳物件永遠在top
我的作法是觸發start事件時將拖曳物件的zIndex升高
stop事件則將拖曳物件的zIndex歸零

【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';               //隨便給亂數